scss 笔记

#main {
    width: 97%;
    p,
    div {
        font-size: 2em;
        a {
            font-weight: bold;
        }
    }
    pre {
        font-size: 3em;
    }
}

上面的css代码将编译为：

#main {
  width: 97%;
}
#main p,
#main div {
  font-size: 2em;
}
#main p a,
#main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

使用嵌套规则时，不大建议嵌套太多层，特别是对于后续可能需要经常修改样式布局的页面，嵌套太多层在修改的时候查找起来会感觉有点乱，特别是在原来的嵌套上增加其他嵌套的时候。

1.2 父选择器 &

在 1.1 的嵌套中，需要用到嵌套外层的父选择器时，可以用 & 代表嵌套规则外层的父选择器。如果含有多层嵌套，在最外层的父选择器会一层一层的向下传递。例如：

#main {
  color: black;

  &:hover {
    text-decoration: underline;
  }

  body.firefox & {
    font-weight: normal;
  }

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

编译为：

#main {
  color: black;
}

#main:hover {
  text-decoration: underline;
}

body.firefox #main {
  font-weight: normal;
}

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

& 感觉可以理解为外层的嵌套一层一层传递下来的父选择器的简写，有点像指令 v-on 简写为 @ 一样。

1.3 属性嵌套

有些 css 属性遵循相同的命名空间，例如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。scss 允许将属性嵌套在命名空间中，命名空间也可以包含自己的属性值。例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

// 20px/24px 即为font自己的属性值，如果没有自己的属性值，则直接省略

编译为：

.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold;
}

1.4 占位符选择器 % 与 @extend 指令

@extend 指令用法：如果一个选择器中的样式与另一个选择器样式几乎相同，只有少量的区别，这时可以使用@extend。@extend 指令可以告诉 scss 一个选择器的样式从另一个选择器继承。示例1：

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

编译为：

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

上面示例中，button-report、button-submit 通过 @extend 可以继承 button-basic 里的所有样式。当 button-basic 未通过 @extend 调用时，button-basic也会编译到 css 文件中。

占位符选择器 % 用法：与常用的 id 、calss 选择器写法相似，只是 # 或 . 变成了%。占位符选择器 % 必须通过 @extend 调用，当 % 单独使用时（未被 @extend 调用），不会被编译到 css 文件中。示例2：

%button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend %button-basic;
  background-color: red;
}

.button-submit  {
  @extend %button-basic;
  background-color: green;
  color: white;
}

编译为：

.button-report, .button-submit {  // 注意这里不会编译 button-basic，和示例1中有所区别
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

二、多行注释 /* */ 与单行注释 //

scss 支持标准的 css 单行及多行的注释，区别是/* */ 注释的内容会被完整编译到 css 文件中，而 / / 不会。例子：

/* 
   * 多行注释的内容
   * ....
*/

.calssname1 {
    color: red;
}

// 单行注释的内容

.classname2 {
    color: black;
}

编译后：

/* 
   * 多行注释的内容
   * ....
*/

.calssname1 {
    color: red;
}

.classname2 {
    color: black;
}

插值语句可以写进多行注释中输出 scss 变量值：

$version: "1.2.3";
/* 输出 version #{$version} */
注：#{ } 为 scss 的插值语句

编译后：

/* 输出 version 1.2.3 */

三、SassScript

在 css 的基础上，scss 提供了一些名为 SassScript 的新功能。SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

3.1 变量 $、变量定义 !default

变量以美元符号 $ 开头；变量支持块级作用域（局部变量），嵌套规则内定义的变量只能在嵌套规则内使用，也就是说在某个{ } 内定义的局部变量，和i能在该 { } 内使用，这个和js中的局部变量类似；将局部变量转为全局变量可以用 !global 声明。

可以在 scss 变量的结尾添加 !default 声明，如果变量已经被附值，则不会被重新附值，如果变量还没附值，则会被赋值。例如：

$content: "First content";
$new_content: "First time reference" !default;
$content: "Second content?" !default;

$title: null;
$title: "新的标题" !default;

#main {
  content: $content;  
  new-content: $new_content;
}

#main-two {
  content: $title;  
}

编译后：

#main {
  content: "First content";  // 第一次有值，不会被第二次的替换
  new-content: "First time reference";
}

#main-two {
  content: "新的标题";  // 第一次为null，则会取第二次的值
}

3.2 数据类型

SassScript 支持6中数据类型：

数字，如 1，1px
字符串，包括有引号、无引号字符串，如 “a”，b
颜色，如 red， #000000，rgba（0，0，0，0.2）
布尔
空值 null
数组，用空格或逗号作为分隔符
maps，相当于 js 中的 object

3.3 运算

加减乘和普通运算没有太大的区别，除法（/）会有些不同，除法符号 / 在 CSS 中通常是分隔数字的作用，有三种情况 / 会被视为除法运算符：

1. 值，或值的一部分，是变量或者函数的返回值；

2. 值被圆括号包裹；

3. 如果值是算数表达式的一部分；

例如：

P {
  font: 10px/8px; // 纯CSS，不会进行除法运算
  $width: 1000px;
  width: $width/2; // 使用变量，会进行运算
  width: round(1.5) / 2; // 使用函数, 会进行运算
  height: (500px/2); // 使用了圆括号包裹，会进行运算
  margin-left: 5px + 8px/2px; // 在算数表达式中，会进行运算

  $font-size: 20px;
  $line-height: 40px;
  font: #{ $font-size }/#{ line-height }  // 要使用变量，又要使/不进行运算，可以将变量用#{}包裹
}

编译后：

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

  font: 20px/40px;
}

其他运算，如颜色、字符串等感觉不是特别常用，就没用做特别的记录，有想了解的，可以跳转原文查看。

3.4 插值语句 #{ }

通过 #{ } 插值语句可以在选择器、属性名、多行注释中使用变量，在属性值中使用可以避免scss运行运算表达式（见除法运算中的例子）。示例：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/* 使用变量的注释 #{$name} */

编译后：

p.foo {
  border-color: blue;
}

/* 使用变量的注释 foo */

四、@-Rule 与指令

4.1 @import

通常，@import 会寻找 scss 文件并将其导入，但在一下情况下，@import 仅作为普通 CSS 语句，不会导入任何 .scss 文件：

文件拓展名为 . css
文件名以 http:// 开头
文件名为 url（）
@import 包含media queries

如果不在上面的四种情况内，则会导入 .scss 拓展名的文件。如果没有指定拓展名，scss 将会寻找拓展名为 .scss 的同名文件，然后将其导入。

@import "foo.scss"; 或 @import "foo";
都会导入 foo.scss 文件

不会导入 .scss 文件的四种情况例子：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

编译后：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

scss 允许同时导入多个文件，例如：

@import "rounded-corners", "text-shadow";

会同时导入 rounded-corners.scss , text-shadow.scss 两个文件

导入文件也可以使用 #{ } ，但不是通过变量动态导入scss文件，只能用于 url( ) 的导入方式，

例如：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

编译后：

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

4.2 @media、@extend、@at-root、@warn

原文章中这部分内容还包含了@media、@extend、@at-root、@warn这几个指令，有兴趣的可以阅读原文。

五、控制指令

控制指令平时用到的比较少，主要是和混合指令 mixin 配合使用。

5.1 @if

@if 和 js 中 if 的用法类似，当条件满足时，输出相对应的代码。同 js 的 if 一样，@if 后面也可以跟一个 @else 或多个 @else if。例如：

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

$type: monster;
.name {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译后：

P {
  border: 1px solid;
}

.name {
  color: green;
}

5.2 @for

@for 指令可以在限制的范围内重复输出格式，可以每次都按要求（变量的值）输出不用的结果。@for 包含的两种格式及其使用中的区别：

@for $var from <start> through <end>，输出范围包含 <start> 和 <end>
@for $var from <start> to <end>，输出范围只包含 <start>，不包含 <end>

上面两种格式中，$var 可以是任何变量名，<start> 和 <end> 必须是整数值。例子：

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

@for $j from 1 to 3 {
  .info-#{$j} {
    height: 1em * $j;
  }
}

编译后：

// through 方式含头尾
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

// to 方式含头不含尾
.info-1 {
  height: 1em;
}

.info-2 {
  height: 2em;
}

5.3 @each

@each 指令的格式是：@each $var in <list>，$var 可以是任何变量名，而<list>是值列表。@each 将变量 $var 作用于列表中的每一项，然后输出结果，例子：

@each $animal in puma, sea-slug {
  .#{$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");
}

@each 也可以使用多个变量，如@each $var1, $var2 ...，后面跟的列表中的子列表的每个元素会分配给相应的变量。例子：

@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {
  .#{$animal}-icon {
    background-image: url("/images/#{$animal}.png");
    border: 2px solid $color;
    cursor: $cursor;
  }
}

编译后：

.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

六、混合指令 @mixin

@maxin 用于定义可重复使用的样式，避免使用无语义的 classname。混合指令可以包含所有的 css 规则，绝大部分 scss 规则，甚至可以通过参数引入变量，输出多样化的样式。

6.1 定义@mixin

@mixin 用法格式：@mixin 名称 { 样式 }。例子：

6.2 引用混合样式 @include

已定义的@mixin 通过 @include 引用，格式：@include 混合名称。也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

例子：

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

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

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

@include silly-links; // 在最外层引用

编译后：

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

a {
  color: blue;
  background-color: red;
}

6.3 参数

定义@maxin 时，可以设置参数，可以设置参数默认值，写法和函数类似。例子：

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}

编译后：

P {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

七、其他内容

函数指令@function、输出格式（:nested、:expanded、:compact、:compressed）感觉平时用不大到，有兴趣的可以看原文链接Sass 中文文档 · SCSS中文文档 · 看云

一、css 功能拓展

1.1 嵌套规则