sass 使用指南

什么是SASS

Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

sass有2种语法：

1.一种是以sass后缀，对代码的排版有着非常严格的要求，而且没有大括号，没有分号

2.一种是以scss后缀，更接近我们程序写法，比如大括号，分号

二、安装和使用

2.1 安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

window下安装SASS首先需要安装Ruby，先从官网下载Ruby 并安装

安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。 如下图：

安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

安装详细说明点击这里
安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

vue项目使用sass

npm i scss scss-loader node-sass sass-loader style-loader -D

然后就可以使用了

2.2 使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

sass语法不使用大括号和分号,而且不能嵌套,只能使用缩进语法,
例如:

#sidebar
      width: 30%
      background-color: #ccc

如果不习惯可以把style标签里的lang="sass" 改成 lang="scss"就能正常嵌套和使用大括号了,因为scss是sass的拓展,语法是使用大括号和分号;

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

上面命令除了生成.css文件还会生成一个.css.map和.sass-cache文件 在后面加--sourcemap=none --no-cache可以不生成改类型文件文件

sass css.scss test.css --sourcemap=none --no-cache

Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。再具体点可以看
Source Map 详解

SASS提供四个编译风格的选项：

• nested：嵌套缩进的css代码，它是默认值。
• expanded：没有缩进的、扩展的css代码。
• compact：简洁格式的css代码。
• compressed：压缩后的css代码。

四种编译排版演示;

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

nested 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

   // watch a file

　　sass --watch input.scss:output.css

　　// watch a directory

　　sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。

三、基本用法

3.1 变量

SASS允许使用变量，所有变量以$开头。

   $blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

• 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。

• !default含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

看下面的列子

 $content:"softwhy.com";
 $content: "antzone" !default;
 #main {
   content: $content;
 }

编译之后

#main {
 content: "softwhy.com"; 
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

   $side : left;
　　.rounded {
　　　　border-#{$side}-top-radius: 5px;
　　}

3.2 计算功能

SASS允许在代码中使用算式：

  body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

3.3 嵌套

SASS允许选择器嵌套。比如，下面的CSS代码：

div h1 {
　　　　color : red;
　　}

可以写成：

div {
　　　　h1 {
　　　　　　color:red;
　　　　}
　　}

属性也可以嵌套，比如border-color属性，可以写成：

p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

注意，border后面必须加上冒号。

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

   a {
　　　　&:hover { color: #ffb3ff; }
　　}

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

 body {
   color: #333; // 这种注释内容不会出现在生成的css文件中
   padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

/*!
　　　　重要注释！压缩不会被删掉。上面两种会被删除掉
　　*/

四、代码的重用

4.1 继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

   .class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

 .class2 {
@extend .class1;
font-size:25px;
}

4.2 Mixin

使用@mixin命令，定义一个代码块。

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。

div {
　　　　@include left;
　　}

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

使用的时候，根据需要加入参数：

div {
　　　　@include left(20px);
　　}

下面是一个mixin的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}-#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

使用的时候，可以像下面这样调用：

    #navbar li { @include rounded(top, left); }

　　#footer { @include rounded(top, left, 5px); }

4.3 颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

    lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

Sass 颜色函数详情

4.4 插入文件

@import命令，用来插入外部文件。

　@import "path/filename.scss";

因为sass的语法完全兼容css，所以你也可以把原始的css文件改名为.scss后缀，即可直接导入了

如果插入的是.css文件，则等同于css的import命令。

　@import "foo.css";

• css的@import规则，只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。而sass的@import规则在生成css文件时就把相关文件导入进来

• @import规则并不需要指明被导入文件的全名，可以省略.sass或.scss文件后缀

4.5 占位符 %placeholder

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的CSS:

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

五、高级用法

5.1 条件语句

@if可以用来判断：

p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

配套的还有@else命令：

@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

5.2 循环语句

SASS支持for循环：

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

也支持while循环：

$i: 6;

　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

each命令，作用与for类似：

@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

5.3 自定义函数

SASS允许用户编写自己的函数。

@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}

— end —