Sass(Scss)是世界上最成熟、稳定和强大的专业级CSS扩展语言。 Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。在前端开发中使用频繁。

定义 CSS 预处理器

“CSS 预处理器是一个程序，可让您从预处理器自己的独特语法生成 CSS。有很多 CSS 预处理器可供选择，但是大多数 CSS 预处理器会添加一些纯 CSS 中不存在的功能，例如 mixin、嵌套选择器、继承选择器等。这些特性使 CSS 结构更具可读性和更易于维护”。

一旦你熟悉了 CSS，下一个自然的步骤就是使用预处理器。最大的优点是不必重复自己。

这个优势被称为保持你的 CSS Dry，它代表“不要重复你自己”

基本知识点

& 父选择器

如果多级嵌套，&指向最近的一个

例如：

a{
 font-weight: bold;
 &:hover{
  text-decoration: none;
  }
}

编译为

a{
 font-weight: bold;
}
a:hover{
text-decoration: none;
}

属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

插值语句 #{} 可以写进多行注释中输出变量值

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

变量

以$开头

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

变量支持块级作用域，分局部变量和全局变量，

局部转全局 加：!global

数据类型

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

除法

``/在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了/除法运算的功能。也就是说，如果/` 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

字符串运算

p:before {
  cursor: e + -resize;
  content: "Foo " + Bar;
  content: "I ate #{5 + 10} pies!";
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
}

编译为

p:before {
  cursor: e-resize;
  content: "Foo Bar";
  content: "I ate 15 pies!"; 
  font-family: sans-serif; 
  margin: 7px auto; 
}

导入外部文件

@import

假设 example.scss 文件包含以下样式：

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}

@media

允许在css中嵌套使用

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为

.sidebar {
  width: 300px;
}
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
      } 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
    }
}

@extend

.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; 
}

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

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

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