课程表

SASS 基础

SASS 高级

工具箱
速查手册

Sass SassScript

当前位置：免费教程 » HTML/CSS » SASS

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

通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。

Interactive Shell

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

  1. $ sass -i
  2. >> "Hello, Sassy World!"
  3. "Hello, Sassy World!"
  4. >> 1px + 1px + 1px
  5. 3px
  6. >> #777 + #777
  7. #eeeeee
  8. >> #777 + #888
  9. white

变量 $ (Variables: $)

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

  1. $width: 5em;

直接使用即调用变量：

  1. #main {
  2.   width: $width;
  3. }

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

  1. #main {
  2.   $width: 5em !global;
  3.   width: $width;
  4. }
  6. #sidebar {
  7.   width: $width;
  8. }

编译为

  1. #main {
  2.   width: 5em;
  3. }
  5. #sidebar {
  6.   width: 5em;
  7. }

数据类型 (Data Types)

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 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

字符串 (Strings)

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

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

编译为

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

数组 (Lists)

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

数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。变化是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。

当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 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 这个以空格分隔的数组的数组。

地图

地图(map)表示键和值之间的关联，其中键用来查找值。它们可以很容易地将值收集到命名组中，并动态访问这些组。他们与CSS没有直接关系，虽然他们在语法上类似于CSS的查询表达式：

  1. scss
  2. $map: (key1: value1, key2: value2, key3: value3);

与列表不同，地图必须总是被圆括号包围，并且必须始终用逗号分隔。地图中的键和值可以是任何sassscript对象。map中，一个键只有一个相关的值（尽管该值可能是一个列表）。但是反过来却不一样，一个给定的值可能与许多键关联。

像列表一样，地图最大限度的支持sassscript的功能操作。map取值函数在地图中查找值，map合并函数将值添加到地图中。@each指令可用于在地图中为每个键/值对添加样式。map中对的顺序总是与创建地图时的顺序相同。

凡是可以用列表的地方，就可以用地图。当使用列表函数时，map将被视为对列表。例如，（KEY1：value1，value2 KEY2：）也会被列表函数视为嵌套列表：KEY1 value1，KEY2,value2。但是反过来则不一样，除空列表外，其他列表不能被视为地图。空列表（）可以同时表示没有键/值对的地图和没有元素的列表。

请注意，地图键可以是任何数据类型（即使是另一个地图）。声明地图的语法允许任意的sassscript表达式可以确定一个键。

地图无法转换为纯CSS。使用一个变量或参数到CSS函数上，将会导致错误。使用 inspect（$value）函数生成用于调试地图的输出字符串。

颜色 (Colors)

任何CSS的颜色表达式返回一个sassscript颜色值。这包括大量已经命名的颜色，但是这些颜色名混在字符当中很难辨认。

在压缩输出模式下，SASS将输出最小型化的CSS颜色表达方式。例如，#FF0000将输出为红色的压缩模式，但类似“blanchedalmond”这样的颜色将输出十六进制的颜色#ffebcd。

这里有一个关于已经命名颜色常见的问题，当SASS输出与其他输出模式下一样的格式时，一个压缩过的颜色值插入到选择器就会出现语法错误。为了避免这一点，应该始终引用一个选择器支持的、已经命名过的颜色。

运算 (Operations)

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

数字运算 (Number Operations)

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

  1. p {
  2.   width: 1in + 8pt;
  3. }

编译为

  1. p {
  2.   width: 1.111in; }

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

6.4.1.1. 除法运算 / (Division and /)

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

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

  • 如果值，或值的一部分，是变量或者函数的返回值
  • 如果值被圆括号包裹
  • 如果值是算数表达式的一部分
  1. p {
  2.   font: 10px/8px;             // Plain CSS, no division
  3.   $width: 1000px;
  4.   width: $width/2;            // Uses a variable, does division
  5.   width: round(1.5)/2;        // Uses a function, does division
  6.   height: (500px/2);          // Uses parentheses, does division
  7.   margin-left: 5px + 8px/2px; // Uses +, does division
  8. }

编译为

  1. p {
  2.   font: 10px/8px;
  3.   width: 500px;
  4.   height: 250px;
  5.   margin-left: 9px; }

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

  1. p {
  2.   $font-size: 12px;
  3.   $line-height: 30px;
  4.   font: #{$font-size}/#{$line-height};
  5. }

编译为

  1. p {
  2.   font: 12px/30px; }

颜色值运算 (Color Operations)

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

  1. p {
  2.   color: #010203 + #040506;
  3. }

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

  1. p {
  2.   color: #050709; }

使用 color functions 比计算颜色值更方便一些。

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

  1. p {
  2.   color: #010203 * 2;
  3. }

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

  1. p {
  2.   color: #020406; }

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

  1. p {
  2.   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
  3. }

编译为

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

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

  1. $translucent-red: rgba(255, 0, 0, 0.5);
  2. p {
  3.   color: opacify($translucent-red, 0.3);
  4.   background-color: transparentize($translucent-red, 0.25);
  5. }

编译为

  1. p {
  2.   color: rgba(255, 0, 0, 0.8);
  3.   background-color: rgba(255, 0, 0, 0.25); }

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

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

编译为

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

字符串运算 (String Operations)

+ 可用于连接字符串

  1. p {
  2.   cursor: e + -resize;
  3. }

编译为

  1. p {
  2.   cursor: e-resize; }

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

  1. p:before {
  2.   content: "Foo " + Bar;
  3.   font-family: sans- + "serif";
  4. }

编译为

  1. p:before {
  2.   content: "Foo Bar";
  3.   font-family: sans-serif; }

运算表达式与其他值连用时，用空格做连接符：

  1. p {
  2.   margin: 3px + 4px auto;
  3. }

编译为

  1. p {
  2.   margin: 7px auto; }

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

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

编译为

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

空的值被视作插入了空字符串：

  1. $value: null;
  2. p:before {
  3.   content: "I ate #{$value} pies!";
  4. }

编译为

  1. p:before {
  2.   content: "I ate pies!"; }

布尔运算 (Boolean Operations)

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

数组运算 (List Operations)

数组不支持任何运算方式，只能使用 list functions 控制。

圆括号 (Parentheses)

圆括号可以用来影响运算的顺序：

  1. p {
  2.   width: 1em + (2em * 3);
  3. }

编译为

  1. p {
  2.   width: 7em; }

函数 (Functions)

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

  1. p {
  2.   color: hsl(0, 100%, 50%);
  3. }

编译为

  1. p {
  2.   color: #ff0000; }

关键词参数 (Keyword Arguments)

Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：

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

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

通过 Sass::Script::Functions 查看完整的 Sass 函数列表，参数名，以及如何自定义函数。

插值语句 #{} (Interpolation: #{})

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

  1. $name: foo;
  2. $attr: border;
  3. p.#{$name} {
  4.   #{$attr}-color: blue;
  5. }

编译为

  1. p.foo {
  2.   border-color: blue; }

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

  1. p {
  2.   $font-size: 12px;
  3.   $line-height: 30px;
  4.   font: #{$font-size}/#{$line-height};
  5. }

编译为

  1. p {
  2.   font: 12px/30px; }

& in SassScript

就像当它用于SASS选择器一样，&在sassscript中指向当前元素的父元素。这是一个分隔空格的逗号分隔列表。例如:

  1. .foo.bar .baz.bang, .bip.qux {
  2.   $selector: &;
  3. }

$选择器在SASSScript中的值是((".foo.bar" ".baz.bang"), ".bip.qux")。复合选择器在SASSScript中是被引用作为字符串使用，但实际运用中一般不会被引用。即使父选择器不包含逗号或空格，但&总是包含两个嵌套级别，因此它始终都可以访问。

如果没有父选择器，&的值将为 null。这意味着你可以在一个混合（mixin）中使用它，去检测是否存在父选择器：

  1. @mixin does-parent-exist {
  2.   @if & {
  3.     &:hover {
  4.       color: red;
  5.     }
  6.   } @else {
  7.     a {
  8.       color: red;
  9.     }
  10.   }
  11. }

变量定义 !default (Variable Defaults: !default)

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

  1. $content: "First content";
  2. $content: "Second content?" !default;
  3. $new_content: "First time reference" !default;
  5. #main {
  6.   content: $content;
  7.   new-content: $new_content;
  8. }

编译为

  1. #main {
  2.   content: "First content";
  3.   new-content: "First time reference"; }

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

  1. $content: null;
  2. $content: "Non-null content" !default;
  4. #main {
  5.   content: $content;
  6. }

编译为

  1. #main {
  2.   content: "Non-null content"; }
转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号