CSS 预处理器 - Sass - 《计算机 | computer》

语法格式
使用 Sass
- 缓存
- 判断语法格式
CSS 功能拓展
注释
SassScript
@-Rules 与指令
编译格式
mixin(混合)
函数
列表函数
- length
- nth
index
- append
- join
map 函数
数据类型
- 列表(list)
- map
interpolation
控制指令
function

什么时候使用 CSS 预处理器，可以参考目录 CSS -> 书籍 -> CSS 揭秘下的 “我们应该使用预处理器吗”。

语法格式

Sass 有两种语法格式

第一种是早期的缩进格式，通常简称 “Sass”，这种格式以 .sass 作为拓展名。

第二种是 Sass3 引入的新语法 SCSS (Sassy CSS)，这种格式以 .scss 作为拓展名。

任何一种格式可以直接导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

# Sass 转换成 SCSS
$ sass-convert style.sass style.scss
# SCSS 转换成 sass
$ sass-convert style.scss style.sass

使用 Sass

安装图文教程

Windows 系统需要先安装 Ruby

安装 Sass

gem install sass

在命令行中运行 Sass：

sass input.scss output.css

监视单个 Sass 文件，每次修改并保存时自动编译：

sass --watch input.scss:output.css

监视整个文件夹：

sass --watch app/sass:public/stylesheets

缓存

Sass 自动缓存编译后的模板与 partials，这样做能够显著提升重新编译的速度。

单独使用 Sass，缓存内容保存在 .sass-cache 文件夹中。

判断语法格式

Sass 命令行工具根据文件的拓展名判断所使用的语法格式，没有文件名时 sass 命令默认编译 .sass 文件，添加 --scss 选项或者使用 scss 命令编译 SCSS 文件。

CSS 功能拓展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器。

示例

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

编译为

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

父选择器 `&`

当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 表示引用父选择器。

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

示例

a {
  color: #333;
  &:hover {
     color: #fff;
  }
  /*生成复合的选择器*/
  & &-text {
    font-size: 15px;
  }
}

编译为

a {
  color: #333;
}
a:hover {
  color: #fff;
}
a a-text {
  font-size: 15px;
}

如果没有父选择器，&的值将为null。这意味着你可以在mixin中使用它来检测父选择器是否存在。

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

避免了重复输入 Sass 允许将属性嵌套在命名空间中

示例

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

编译为

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

命名空间也可以包含自己的属性值，例如：

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

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

注释

Sass 中有三种注释

单行注释

使用 // 进行注释，注释不会在 expanded 和 compressed 编译格式中显示

多行注释

使用 /* */ 进行注释，注释会在 expanded 编译格式中显示，不会在 compressed 编译格式中显示

强制注释

使用 /*! */ 进行注释，强制注释会在任何编译后的文件中显示，通常用于添加版权信息。

SassScript

Interactive Shell

Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果：

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

变量 `$`

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;

直接使用即调用变量：

#main {
  width: $width;
}

嵌套规则内定义的变量是局部变量，不在嵌套规则内定义的变量则是全局变量，将局部变量转换为全局变量可以添加 !global 声明。

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

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

数据类型

数字，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)

字符串(Strings)

SassScript 支持 CSS 的两种字符串类型：有引号字符串，如 "Lucida Grande" 'http://sass-lang.com'；与无引号字符串，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有使用 #{} (插值语句) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

数组 (Lists)

数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。只包含一个值的也被视为数组。

数组中可以包含子数组，比如 padding: 5px 10px, 5px 0 是包含 5px 10px 与 5px 0 两个数组的数组。也可以使用空格分割子数组，如 (5px 10px) (5px 0)。

当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 (5px 10px) (5px 0) 与 5px 10px, 5px 0 在编译后的 CSS 文件中是完全一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。

用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。

Maps

Maps 可视为键值对的集合（类似 js 中的对象），和 Lists 不同 Maps 必须被圆括号包围。语法格式为 $map: (key1: value1, key2: value2) ，能用在列表上的函数同样适用 map 类型的数据类型。

运算

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

数字运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)。

当使用 / 进行除法运算时，Sass 会原样输入，因为有些 css 属性会用到这种方式。例如 font: 16px/1.8 serif 以下三种情况 / 将被视为除法运算符号：

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

示例

p {
  font: 10px/8px;             // 纯 css 不能使用除法
  $width: 1000px;
  width: $width/2;            // 使用一个变量
  width: round(1.5)/2;        // 使用一个函数
  height: (500px/2);          // 使用括号
  margin-left: 5px + 8px/2px; // 使用了 + 是算数表达式的一部分
}

编译为

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 {
  font: 12px/30px; }

颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {
  color: #050709; }

使用 color functions(看不懂) 比计算颜色值更方便一些。

数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如：

p {
  color: #010203 * 2;
}

计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为

p {
  color: #020406; }

需要注意的是，如果颜色值包含透明通道（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译为

p {
  color: rgba(255, 255, 0, 0.75); }

颜色值的透明通道可以通过 opacify 或 transparentize 两个函数进行调整。

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。此处涉及 CSS3 filter 属性。

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

编译为

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

字符串运算

+ 可用于连接字符串

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  cursor: e + -resize;
}

编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
    cursor: e-resize;
}

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

编译为

p:before {
  content: "I ate 15 pies!"; }

布尔运算

SassScript 支持布尔型的 and or 以及 not 运算。

and

>> (5px > 3px) and (5px > 10px)
false
>> (5px > 3px) and (5px < 10px)
true

>> (5px > 3px) or (5px > 10px)
true
>> (5px > 3px) and (5px < 10px)
true

not

相当于取反

>> not(5px > 3px)
false
>> not(5px > 3px)
true

函数

SassScript 定义了多种函数

关键词参数

Sass 函数允许使用关键词参数

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

插值语句 `#{}`

通过 #{} 插值语句可以在选择器或属性名中使用变量：

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

编译为

p.foo {
  border-color: blue; }

#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

变量定义 `!default`

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值。如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

变量是 null 空值时将视为未被赋值。

$content: "First content";
$content: "Second content?" !default;

#main {
  content: $content;
}

编译为

#main {
  content: "First content"; }

@-Rules 与指令

Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）。

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

@import "foo.scss";

或

@import "foo";

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

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

分音

有些样式作为共同样式被提取出来，使用 _ 进行区分。使用 _ 开头的 sass 文件不会被编译成 css 文件，该文件称为局部文件(partials)

使用 _ 开头的文件导入时不需要加上 _

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import "colors";

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平

时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

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

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

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

编译为

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

@media 的查询允许互相嵌套使用，编译时，Sass 自动添加 and

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

编译为

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

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译为

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式一个特殊样式，这样做带来了很多不便。

@extend 也会继承到使用到该选择器的样式（个人理解：被继承的选择器之后的选择器也同样会继承，下面示例的 .error.intrusion 就体现了该性质，如果被继承的选择器之前还有其它选择器，那么继承了该选择器样式的选择器也会加上同样的选择器…）

示例

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

延伸复杂的选择器

Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^="http://"] 等，例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译为

a:hover, .hoverlink {
  text-decoration: underline; }

所有 a:hover 的样式将继承给 .hoverlink，包括其他使用到 a:hover 的样式，例如：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编译为

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多重延伸

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：

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

编译为

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }
.seriousError {
  border-width: 3px; }

多重延伸可以使用逗号分隔选择器名，比如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果。

继续延伸

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

现在，每个 .seriousError 选择器将包含 .error 的样式，而 .criticalError 不仅包含 .seriousError 的样式也会同时包含 .error 的所有样式，上面的代码编译为：

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }
.seriousError, .criticalError {
  border-width: 3px; }
.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

选择器列

暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列：

#fake-links .link {
  @extend a;
}
a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

编译为

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

编译格式

语法：

sass —watch [被监视目录]:[编译文件目录] —style [格式名]

ul {
  font-size: 15px;
  li {
    list-style: none;
  }
}

nested 嵌套（默认）

ul {
  font-size: 15px; }
  ul li {
    list-style: none; }

compact 紧凑

sass —watch sass:css —style compact

ul { font-size: 15px; }
ul li { list-style: none; }

expanded 扩展

sass —watch sass:css —style expanded

ul {
  font-size: 15px;
}
ul li {
  list-style: none;
}

compressed 压缩

sass —watch sass:css —style compressed

ul{font-size:15px}ul li{list-style:none}

mixin(混合)

语法：

也可以省略参数

@mixin 名字 (参数1， 参数2) {
   ··· 
}

示例：

函数

darken()

改变颜色的明度（加深颜色）
css 输出结果会换算成 16 进制

/*编译前*/
a {
  color: darken(#ffe5e5, 10%);
}

/*编译后*/
a {
  color: #ffb2b2;
}

lighten

改变颜色的明度（增亮颜色）
css 输出结果会换算成 16 进制

/*编译前*/
a {
  color: darken(hsl(222, 100%, 50%), 10%);
}

/*编译后*/
a {
  color: #003dcc;
}

saturate

增加颜色的饱和度

/*编译前*/
a {
  color: saturate(#ffe5e5, 10%);
}

/*编译后*/
a {
  color: #ffe5e5;
}

desaturate

降低颜色的饱和度

/*编译前*/
a {
  color: desaturate(hsl(221, 50%, 50%), 10%);
}

/*编译后*/
a {
  color: #4d6db3;
}

transparentize

减少颜色的透明度

原本的透明度减去设置的值

/*编译前*/
a {
  color: transparentize(hsla(221, 50%, 50%, 0.5), 0.3);
}

/*编译后*/
a {
  color: rgba(64, 104, 191, 0.2);
}

opacify

增加颜色的透明度

原本的透明度加上设置的值

/*编译前*/
a {
  color: opacify(hsla(221, 50%, 50%, 0.5), 0.3);
}

/*编译后*/
a {
  color: rgba(64, 104, 191, 0.8);
}

adjust-hue

调整颜色的色相

css 最后会生成 16 进制的颜色

第二个参数是需要调整的颜色，第二个参数是调整色相的度数（deg）
即可以使用 hsl 也可以使用 16 进制

$base-color: #ff0000;
$base-color-hsl: hsl(0, 100%, 50%);

/*编译前*/
body {
  background-color: adjust-hue($base-color, 137deg);
  color: adjust-hue($base-color-hsl, 137deg);
}

/*编译后*/
body {
  background-color: #00ff48;
  color: #00ff48;
}

abs()

返回一个数的绝对值

>> abs(-10)
10
>> abs(10px)
10px

round()

四舍五入

>> round(3.5)
4
>> round(3.2)
3

ceil()

向上进位

>> ceil(3.2)
4
>> ceil(3.5)
4

floor()

向下进位

>> ceil(3.6)
3
>> ceil(3.1)
3

percentage()

转换为百分比类型

>> percentage(65 / 100)
65%
>> percentage(65px / 100px)
65%

注意：单位不相同会报错，例如 percentage(65px / 100)

min()

返回一组数据中的最小数据

max()

返回一组数据中的最大数据

to-upper-case

将字符串全部转换为大写

>> to-upper-case("hello")
"HELLO"

to-lower-case

将字符串全部转换为小写

>> to-lower-case("HELLO")
"hello"

str-length

返回字符串的长度

>> str-length("hello")
5                                                                                             "hello"

str-index

查找字符串的位置（从 1 开始）

第二个参数是被查的的字符串，第二个参数是需要查找的字符串

>> str-index("hello", e)
2

str-insert

在字符串指定位置插入新字符

第一个参数是被插入的字符串
第二个参数是需要插入的字符串
第三个参数是插入的位置

>> str-insert("hello", "word", 6)
"helloword"

列表函数

length

返回一个列表数据的长度(项目数)

>> length(5px 10px)
2

nth

获取列表里面的项

第一个参数是列表，第二个参数是下标（Sass 里面的下标第一个是 [1]）

>> nth(10px 5px, 1)
10px
>> nth(10px 5px, 2)
5px

index

获取列表里面项目的下标

第一个参数是一个列表，第二个参数是想要查找的项目
第三个参数可以指定返回的列表的项目分割符(可选)

space(空格)
comma(逗号)
auto(自动)

>> index(1px solid red, solid)
2

append

向列表中添加新的项目

第一个参数是需要插入新项目的列表，第二个参数是插入的新项目

>> append(5px 10px, 5px)
(5px 10px 5px)

join

将两个列表合并成一个列表

第三个参数可以指定返回的列表的项目分割符(可选)

space(空格)
comma(逗号)
auto(自动)

>> join(5px 10px, 5px 0)
(5px 10px 5px 0)
>> join(5px 10px, 5px 0, comma)
(5px,10px,5px,0)

map 函数

map-get

可以通过 key 获取 value

第一个参数是需要查找的 map 数据，第二个参数是项目名 key

>> $colors:(light: #ffffff, dark: #000000)
>> map-get($colors, dark)
#000000

map-keys

获取所有项目的 Key，并返回一个列表

>> $colors:(light: #ffffff, dark: #000000)
>> map-keys($colors)
("light", "dark")

map-values

获取所有项目的 value，并返回一个列表

>> $colors:(light: #ffffff, dark: #000000)
>> map-values($colors)
(#ffffff, #000000)

map-haskey

判断 map 数据里是否有指定的 key

第一个参数是需要判断的 map 数据，第二个参数是 key

>> $colors:(light: #ffffff, dark: #000000)
>> map-haskey($colors, light)
true
>> map-haskey($colors, gray)
false

map-merge

把两个 map 数据合并

>> $colors:(light: #ffffff, dark: #000000)
>> map-merge($colors, (light-gray: #e5e5e5))
(light: #ffffff, dark: #000000, light-gray: #e5e5e5)

map-remove

移除 map 数据中的项目

第一个参数是需要移除的 map 数据，第二个参数是 map 中项目的 key

>> $colors:(light: #ffffff, dark: #000000)
>> map-remove($colors, light)
(dark: #000000)

数据类型

列表(list)

例：

border: 1px solid #000;

font-family: Courier, “Lucida Console”, monospace;

padding: 5px 10px, 5px 0;

map

名值对的一个列表

能用在列表上的函数同样适用 map 类型的数据类型

$map: (key1: value1, key2: value2, key3: value3)

interpolation

可以把一个值插入到另一个值里面

控制指令

@if

语法：

@if 条件 {
  ...
}

@for

语法：

@for $var form <开始值> through <结束值> {
 ... 
}

@for $var form <开始值> to <结束值> {
 ... 
}

示例：

through 比 to 多循环一次，to 不包含最后一次循环

@each

循环遍历一个列表（list）

语法：

@each $var in $list {
 ... 
}

示例：

@while

语法：

@while 条件 {
 ... 
}

@warn

显示的错误信息会在命令行中显示

@error

function

语法：

@function 名称 (参数1, 参数2) {
 ... 
}

Sass

语法格式

使用 Sass

缓存

判断语法格式

CSS 功能拓展

嵌套规则

父选择器 &

属性嵌套

注释

SassScript

Interactive Shell

变量 $

数据类型

字符串(Strings)

数组 (Lists)

Maps

运算

数字运算

颜色值运算

字符串运算

布尔运算

函数

关键词参数

插值语句 #{}

变量定义 !default

@-Rules 与指令

@import

分音

嵌套 @import

@media

@extend

延伸复杂的选择器

多重延伸

继续延伸

选择器列

编译格式

mixin(混合)

函数

darken()

lighten

saturate

desaturate

transparentize

opacify

adjust-hue

abs()

round()

ceil()

floor()

percentage()

min()

max()

to-upper-case

to-lower-case

str-length

str-index

str-insert

列表函数

length

nth

index

append

join

map 函数

map-get

map-keys

map-values

map-haskey

map-merge

map-remove

数据类型

列表(list)

map

interpolation

控制指令

@if

@for

@each

@while

父选择器 `&`

变量 `$`

插值语句 `#{}`

变量定义 `!default`