sass

sass

Sass是一款强化CSS的辅助工具，Sass是一套理由Ruby实现的，最早最成熟的CSS预处理器，诞生与2007年，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports) 等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass教程 | Sass中文网

Sass文件以.sass或者.scss结尾

• .sass以缩进替代{}表示层级结构，语句后面不用写分号
• .scss以{}表示层级结构，语句后面需要写分好 (建议使用)

less比sass更晚出现，less的语句很多参考了sass的语法，所以less跟sass用法很相似

vscode安装sass相关插件

直接安装easy sass插件,scss文件保存之后会自动生成css文件跟min.css文件

注释

Sass支持标准的CSS多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的CSS文件中，而后者则不会，例如：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

变量

Sass最普遍的用法就是变量，变量以美元符号开头，赋值方法与CSS属性的写法一样:

$width: 5em;
#main {
  width: $width;
}

运算

所有数据类型均支持相等运算==或!=，此外，每种数据类型也有其各自支持的运算方式。

混合

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如 .float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。

/*
定义混合
*/
@mixin center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


div {
    width: 100px;
    height: 100px;
    background-color: pink;
    // 使用混合
    @include center;
}

带参数混合

/*
生成一个三角形的混合，通过$size, $color指定参数
*/
@mixin triangle($size, $color) {
    width: 0;
    height: 0;
    border: $size solid;
    border-color: $color transparent transparent transparent;
}

/*
生成一个三角形的混合，通过$size, $color指定参数， 指定参数默认值，当不传递这个参数时就使用默认值
*/

@mixin triangle($size:50px, $color:#f00) {
    width: 0;
    height: 0;
    border: $size solid;
    border-color: $color transparent transparent transparent;
}

/*
使用混合生成三角形
*/
div {
    @include triangle(50px, #f00)
}

/*
当多个参数都有默认值时，指定参数的值
*/
div {
    @include triangle($color: pink)
}

混合的可变参数

/*
可变参数
全部为可选的
*/
@mixin border($args...) {
    border: $args;
}

/*
可变参数
必须传的（@size）加可选的
*/
@mixin  border($size, $args...) {
    border: $size $args;
}

div {
    width: 100px;
    height: 100px;
    @include border(5px #f00 solid)
}

函数

Sass定义了多种函数，有些甚至可以通过普通的CSS语句调用

p {
  color: hsl(0, 100%, 50%);
}

编译为

p {
  color: #ff0000; 
}

通过Sass::Script::Functions查看完整的Sass函数列表，参数名，以及如何自定义函数

嵌套

Sass允许将一套CSS样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

编译后的CSS文件中&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

&必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
  }

.seriousError {
  border-width: 3px; 
}

条件判断

/*
定义一个生成三角形的mixin,通过$dir来判断方向
*/
@mixin triangle($dir, $size: 50px, $color: #f00) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $size;
    @if ($dir == Down) {
        border-color: $color transparent transparent transparent;
    } @else if($dir == Left) {
        border-color: transparent $color transparent transparent;
    } @else if($dir == Up) {
        border-color: transparent transparent $color transparent;
    } @else {
        border-color: transparent transparent transparent $color;
    }
}

div {
    @include triangle(Right, 50px, #f00);
}

循环

@for指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式@for $var from <start> through <end>或者@for $var from <start> to <end>区别在于through与to的含义：当使用through时，条件范围包含<start>与<end>的值，而使用to时条件范围只包含<start>的值不包含<end>的值。另外，$var可以是任何变量，比如$i；<start>和<end>必须是整数值

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为

.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

@while指令重复输出格式直到表达式返回结果为false。这样可以实现比@for更复杂的循环，只是很少会用到。例如：

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

编译为

.item-6 {
  width: 12em; 
}

.item-4 {
  width: 8em; 
}

.item-2 {
  width: 4em; 
}

导入

@import "library"; // library.scss
@import "typo.css";