scss学习笔记

一、scss是什么？

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) ,也是本参考资料示例所使用的格式 , 这种格式仅在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS 也支持大多数 CSS hacks 写法 以及浏览器专属前缀语法 (vendor-specific syntax)，例如，IE 古老的 filter 语法。 这种语法的样式表文件需要以 .scss 作为拓展名。
另一种，也是最早的语法，被称为缩进语法 (Indented Sass)，或者通常说的 "Sass"，它提供了一种更加简介的方式来书写CSS。它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速。 缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异； 具体差异在缩进语法参考中都有描述。 使用此种语法的样式表文件需要以 .sass 作为扩展名。

二、引用父选择器:&

有些时候需要直接使用嵌套外层的父选择器，这个就很有用了，例如，你可能喜欢给选择器指定 hover样式，或者当body元素具有某个样式时，在这些情况下，你可以 & 字符来明确地表示插入指定父选择器。 例如：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
编译为：
a {
   font-weight: bold;
   text-decoration: none;
 }
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
 }

&将替换为呈现在CSS文件中的父选择器。这意味着，如果你有一个多层嵌套的规则，父选择器将在被&替换之前完全分解。 例如：

.main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
编译成：
.main {
  color: black; 
}
.main a {
    font-weight: bold;
 }
.main a:hover {
      color: red;
 }

& 必须出现在的选择器的开头位置（注：也就是作为选择器的第一个字符），但可以跟随后缀，将被添加到父选择的后面。 例如：

.main {
  color: black;
  &-sidebar { border: 1px solid; }
}
编译为：
.main {
  color: black; 
}
.main-sidebar {
    border: 1px solid;
 }

三、嵌套属性

CSS中有一些属性遵循相同的“命名空间”；比如，font-family, font-size, 和 font-weight都在font命名空间中。在CSS中，如果你想在同一个命名空间中设置一串属性，你必须每次都输出来。Sass为此提供了一个快捷方式：只需要输入一次命名空间，然后在其内部嵌套子属性。例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
编译为：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
 }

命名空间也可以有自己的属性值。例如：

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
编译为：
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

四、变量 $

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

$width: 5em;

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

.main {
  $width: 5em !global;
  width: $width;
}

.sidebar {
  width: $width;
}

五、数据类型

SassScript 支持 6 种主要的数据类型：
数字: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)

六、运算

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

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

运算注意事项：

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

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

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

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

字符串运算

“+” 号可用于连接字符串

p {
  cursor: e + -resize;
}
编译为
p {
  cursor: e-resize;
}

注意：字符串在“+”号左边，编译的结果会带引号，字符串在“+”号右侧，编译的结果不会带引号。

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

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

.example {
  color: red;
}
然后导入到 .main 样式内
.main {
  @import "example";
}
编译为
.main .example {
  color: red;
}

@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

  Oh no! You've been hacked!

样式如下
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

麻烦的是，这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式，带来了很多不变：智能比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

上面代码的意思是将 .error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error。

@extend-Only 选择器 (@extend-Only Selectors)

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。
如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。

.context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。
.notice {
  @extend %extreme;
}
编译为
.context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

!optional 声明 (The !optional Flag)

如果 @extend 失败会收到错误提示，比如，这样写 a.important {@extend .notice}，当没有 .notice 选择器时，将会报错，只有 h1.notice 包含 .notice 时也会报错，因为 h1 与 a 冲突，会生成新的选择器。
如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的，例如：

a.important {
  @extend .notice !optional;
}

@if

当@if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

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

p {
  border: 1px solid;
}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
编译为

p {
  color: green;
}

七、@for

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

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

八、@each

image.png

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
编译为
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

九、@while

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

混合指令

混合指令 (Mixin Directives)
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
定义混合指令 @mixin (Defining a Mixin: @mixin)
混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用混合样式 @include (Including a Mixin: @include)
使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译为:
a {
  color: blue;
  background-color: red;
}