Sass

零碎知识

生成 CSS

Sass --style [风格] [源文件] [目标文件]

将 SCSS 文件或者 Sass 文件编译为 CSS 文件，编译风格有以下四种

• nested：默认风格，嵌套缩进的 CSS 代码。（大括号前不换行）
• expanded：没有缩进的、扩展的 CSS 代码。
• compact：简洁格式的 CSS 代码。（仅选择器间换行）
• compressed：压缩后的 CSS 代码。

sass --watch [源文件]:[目标文件]

监听 SCSS 文件或者 Sass 文件，一旦源文件有变动就会立马编译为目标文件。

基本用法

• Sass 允许使用变量，所有变量以"$"开头。声明的变量仅仅在子嵌套中可以使用。变量名中短横线和下划线是等价的，可以交换使用。
• 在后面加"!global"可以声明全局变量。在后面加"!defalut"如果变量已有值则不会覆盖原值。

$width: 5em !global;

• Sass 允许在代码中使用算式。
• Sass 允许选择器嵌套和属性嵌套，在嵌套的代码块中可以通过"&"来引用父元素。

div {
    h1 {
        color: red;
    }
}

• 以%开头可以声明占位选择器，占位选择器仅用于被继承，不会出现在 CSS 文件中。
• "/* comment */"的注释会保留到生成的 CSS 文件中。"// commeny"的注释只会保留到 SCSS 文件中。"/*! comment */"的注释即使在压缩模式下也会保留到 CSS 文件中。

数据类型

SassScript支持以下几种数据类型：数字（包含单位）、字符串、颜色、布尔值、null、list（1.5em 1em 0 2em, Helvetica, Arial, sans-serif）、映射（(key1: value1, key2: value2)）。

在字符串中插入变量必须要写在"#{}"中

list中的元素可以以逗号分隔也可以以空格分隔，可以以括号为开始和结束。list中可以不含有值，也可以含有 null 值，在编译为 CSS 文件时 null 值都会被去掉。

映射必须要被包含在括号中，必须以逗号分隔，映射中的键和值都可以是任意 SassScript 对象。映射可以作为list，(key1: value1, key2: value2)的映射可以被视为 key1 value1, key2 value2 的list。直接将映射作为 CSS 属性的值会报错。

在压缩模式下颜色值会被转化为最简单的形式，比如 #FF0000 会被转化为 red。值得注意的是如果在选择器中出现颜色值那么也有可能会被转化，因此如果选择器中出现了颜色值，需要用引号包起来。

操作符

由于 CSS 中是存在正斜杠的，因此在 SCSS 文件中正斜杠只有在以下几种情况下才会被解析为除操作符。如果在这几种情况下需要用到 CSS 的正斜杠，那么可以用#{}分别包裹正斜杠的两边。

• 值或者值的一部分中是变量或者是函数的返回值。
• 值被括号包裹，除非这个括号是包裹list的括号。
• 值的一部分使用了算式。

短横线和减操作符也具有同样的问题，遵循以下的规则就不会产生歧义。

• 在减操作符两边都加空格。
• 在短横线前面加空格，除非是在负数或者负号后。
• 在空格分隔的list中如果要用到负号，那么将这个元素用括号包裹。

所有操作符都对于颜色值适用。两个颜色值相加时将三个通道分别相加，当具有透明度通道的时候必须两个颜色的透明度相同才能够相加。颜色值与数字相乘时每个通道与数字分别相乘。

在字符串中使用算式需要用"#{}"包裹整个算式。

@ 指令

@import

@inport指令既可以引入一个 CSS 文件，也可以引入 Sass 文件和 SCSS 文件。

@import 指令中也可以插入"#{}"，但是不能够用这种方式动态引入 Sass 文件和 SCSS 文件，仅能够用于url()方式动态引入 CSS 文件。

@import同样可以使用在嵌套中。

@media

Sass 中的 @media 指令可以在嵌套中使用。

@extend

@extend 命令使一个选择器继承另一个选择器

.class2 {
    @extend .class1;
}

如果继承的是没有样式的选择器，那么就会在编译时抛出一个错误，在命令后面加上 !optional 就可以允许继承失败而不报错。

在 @media 下使用 @extend 命令只能够继承同一个命令块下的选择器。

@at-root

@at-root 指令可以将一条或更多的规则释放到文档根部而不是嵌套在其他选择器下。

.parent {
  ...
  @at-root {
    .child { ... }
  }
}

默认情况下，@at-root 指令仅仅排除选择器。使用查询选项可以排除其他指令，比如 @at-root (without: media) 可以将规则释放到媒体查询以外。

@at-root (without: all) 可以排除所有指令和规则。@at-root (without: rule) 相当于默认情况。

也可以通过 with 来指定保留的部分，其余部分都将被排除。

@debug

@debug 指令将 SassScript 表达式的值打印在命令行中。

@debug 10em + 2em;

@warn

@warn 指令同样可以打印信息，与 @debug 不同的是 @warn 会同时打印这行代码的位置。另外 @warn 指令打印的信息可以通过 --quiet 选项来屏蔽。

@error

@error 指令抛出一个错误。

控制指令和表达式

条件语句

@if condition {
} @else {
}

循环语句

for 循环将对两个边界之间的每一个整数取一个值。有两种形式，区别是 for...through 包括两个边界，而 for...to 不包括两个边界。

@for $var from <start> through <end>
@for $var from <start> to <end>

each 语句

@each $var in <list>
@each $var, $var in <map>

while 语句

@while condition {}

Mixin 指令

@mixin 命令定义一个 mixin，可以为其指定参数。

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}

@include 命令通过 mixin 的名字来引入一个 mixin。既可以直接传入参数，也可以传入关键字参数。

div {
    @include left(20px, $value: 10px);
}

也可以将变量作为参数传入，但是必须以list或者映射形式传入所有参数并且在后面跟上"..."。

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

也可以同时传入list和映射，但是list必须要在映射之前，比如@include colors($values..., $map...)。

在使用 @include 指令的时候可以同时传入代码块，代码块中的代码将会出现在 @content 指令出现的地方。代码块中无法引用到传入 mixin 中的参数。

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

函数指令

@function 指令定义自定义函数，@return 指令返回。

@function doule($n) {
    @return $n * 2;
}

函数参数也可以传入关键字参数。

对于函数的命名最好加入前缀，以免被误认为 SCSS 或者 CSS 的一部分。

函数

字符串函数

• unquote($string)：在一个字符串两端删除引号。
• quote($string)：在一个字符串两端添加引号。
• str-length($string)：返回字符串中的字符数。
• str-insert($string, $insert, $index)：将 $insert 插入到字符串的指定位置中。
• str-index($string, $substring)：返回 $substring 在字符串中首次出现的位置。
• str-slice($string, $start-at, [$end-at])：截取字符串的一段。
• to-upper-case($string)：将字符串转换为大写。
• to-lower-case($string)：将字符串转换为小写。

数字函数

• percentage($number)：将一个没有单位的数字转换为百分数。
• round($number)：将一个数舍入为整数。
• ceil($number)：向上取整。
• floor($number)：向下取整。
• abs($number)：取绝对值。
• min($numbers…)：取最小值。
• max($numbers…)：取最大值。
• random([$limit])：返回0到1之间的一个随机数，精确到小数点后五位，包括0不包括1。如果传入参数则从1到 $limit 之间返回一个随机整数，包括1和 $limit。

list 函数

• length($list)：返回list的长度。
• nth($list, $n)：返回list中的第 $n 个元素，从1开始。
• set-nth($list, $n, $value)：用 $value 替换list中的元素。
• join($list1, $list2, [$separator])：将两个list拼接成一个，传入第三个参数可以指定分隔符。第三个参数可以是 comma、space 或者 auto。
• append($list1, $val, [$separator])：将一个值插入到list的最后。
• zip($lists…)：将几个list拼接成一个多维list，其中几个list的长度必须是相同的。
• index($list, $value)：返回 $value 在list中的位置，没有找到则返回 null。
• list-separator($list)：返回list的分隔符。

映射函数

• map-get($map, $key)：从映射中返回指定键的值。
• map-merge($map1, $map2)：将两个映射拼接成一个新的映射。
• map-remove($map, $keys…)：从映射中移除指定键。
• map-keys($map)：返回由映射中所有键组成的list。
• map-values($map)：返回由映射中所有值组成的list。
• map-has-key($map, $key)：返回一个布尔值，表示映射中是否存在指定键。
• keywords($args)：返回被传入到函数中的所有参数组成的list。

选择器函数

• selector-nest($selectors…)：依次嵌套参数中的选择器，第一个参数在最外层。
• selector-append($selectors…)：将选择器拼接起来，中间没有空格。
• selector-extend($selector, $extendee, $extender)：用 $extender 继承 $selector 中的 $extendee。
• selector-replace($selector, $original, $replacement)：用 $replacement 替换 $selector 中的 \original。
• selector-unify($selector1, $selector2)：返回能够同时符合两个选择器的选择器。比如：selector-unify(".a .b", ".x .y")会返回 .a .x .b.y, .x .a .b.y，但是不会返回 .a.x .b.y，这防止了指数级别的数量。
• is-superselector($super, $sub)：返回 $super 是否能够匹配 $sub 所匹配的所有元素。
• simple-selectors($selector)：返回组合选择器中的每一个选择器。
• selector-parse($selector)：以 & 返回的格式返回分解选择器。

颜色函数

rgb 函数

• rgba($color,$alpha)：根据颜色和透明度算出一个 rgba 值。
• red($color)：从一个颜色中获取其中红色值。
• green($color)：从一个颜色中获取其中绿色值。
• blue($color)：从一个颜色中获取其中蓝色值。
• mix($color1,$color2,$weight)：混合两个颜色，其中 $weight 为第一个颜色的比重,。

hsl 函数

• hsl($hue,$saturation,$lightness)：通过色相、饱和度和亮度的值创建一个颜色。
• hsla($hue,$saturation,$lightness,$alpha)：通过色相、饱和度、亮度和透明度的值创建一个颜色。
• hue($color)：从一个颜色中获取色相值。
• saturation($color)：从一个颜色中获取饱和度值。
• lightness($color)：从一个颜色中获取亮度值。
• adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色。
• lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色。
• darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色。
• saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色。
• desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色。
• grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%)。
• complement($color)：返回一个补充色，相当于adjust-hue($color,180deg)。
• invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

透明度函数

• alpha($color) ：获取颜色透明度值。
• opacify($color, $amount)：使颜色更不透明。
• transparentize($color, $amount)：使颜色更加透明。

检查函数

• feature-exists($feature)：返回当前 Sass 版本是否支持某个功能。
• variable-exists($name)：返回一个变量是否存在在当前的作用域链中。
• global-variable-exists($name)：返回一个变量是否存在在全局作用域中。
• function-exists($name)：返回一个函数是否存在。
• mixin-exists($name)：返回一个 mixin 是否存在。
• inspect($value)：？
• type-of($value)：返回值的数据类型。
• unit($number)：返回数字的单位。
• unitless($number)：返回数字是否带有单位。
• comparable($number1, $number2)：返回两个数字能否比较、相加、相减。
• call($name,$args…)：动态调用 Sass 函数。

其他函数

• if($condition, $if-true, $if-false)：$condition 为 true 时返回第二个参数，为 false 时返回第三个参数。
• unique-id()：返回唯一的 CSS 标识符。