SassScript

发表于 | 分类于
字数统计: 3.7k | 阅读时长 ≈ 15

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

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

1. 变量 $ (Variables: $)

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

1
$width: 5em;

直接使用即调用变量：

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

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

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

#sidebar {
  width: $width;
}

编译为

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

#sidebar {
  width: 5em;
}

2. 数据类型 (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 不会特殊对待这些属性值，一律视为无引号字符串。

2.1. 字符串 (Strings)

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

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

编译为

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

2.2. 数组 (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 这个以空格分隔的数组的数组。

2.3.Maps

Maps代表一个键和值对集合，其中键用于查找值。他们可以很容易地将值收集到命名组中，并且可以动态地访问这些组。在CSS中你找不到和他们类似的值，虽然他们的语法类似于媒体查询表达式：

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

和列表（Lists）不同，Maps必须始终使用括号括起来，并且必须用逗号分隔。Maps中的键和值可以是任意的SassScript对象。一个Maps可能只有一个值与给定的键关联（尽管该值可以是一个列表）。一个给定的值可能与许多键关联。

和列表（Lists）类似，Maps的主要操作使用的是 SassScript 函数。map-get函数用于查找map中的值，map-merge函数用于添加值到map中的值， @each 指令可以用来为 map 中的每个键值对添加样式。map中键值对的顺序和map创建时始终相同。

Maps还可以用于任何列表（Lists）能做的事情。当用于一个列表函数时，map被视为键值对列表。例如，(key1: value1, key2: value2)被用于列表函数时，将被视为嵌套列表key1 value1, key2 value2。列表不能被视为maps，不过，空列表除外。 ()表示一个键/值对都没有的map,也可以被视为一个没有元素的列表。

需要注意的是 map 的建（keys）可以是任何 Sass 数据类型（甚至是另一个map），并且声明map的语法允许是任意的SassScript表达式，这个表达式将被评估为一个值以确定建（keys）。

Maps不能转换为纯CSS。作为变量的值或参数传递给CSS函数将会导致错误。使用inspect($value)函数以产生输出字符串，这对于调试 maps 非常有用。

2.4.颜色（Colors）

任何CSS颜色表达式返回SassScript颜色值。这其中包括了大量的命名的颜色，这些名字字符串不区别带不带引号。

在压缩输出模式，Sass 将输出CSS简短的颜色表示法。例如，在压缩模式下 #FF0000 将输出为red，但是blanchedalmond将输出为 #FFEBCD。

一个用户遇到的常见问题是在其它输出模式中Sass喜欢输出与命名的颜色相同的格式，当压缩的时候，插值到选择器的颜色变得无效语法。为了避免这种情况，如果他们是为了在选择施工中使用，总是给命名的颜色。

3. 运算 (Operations)

所有数据类型均支持相等运算 

1
==

或 

1
!=

，此外，每种数据类型也有其各自支持的运算方式。

3.1. 数字运算 (Number Operations)

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

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

编译为

1
2
p {
  width: 1.111in; }

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

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

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

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

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

编译为

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

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

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

编译为

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

3.2. 颜色值运算 (Color Operations)

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

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

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

1
2
p {
  color: #050709; }

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

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

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

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

1
2
p {
  color: #020406; }

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

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

编译为

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

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

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

编译为

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

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

1
2
3
4
5
$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)}');
}

编译为

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

3.3. 字符串运算 (String Operations)

+ 可用于连接字符串

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

编译为

1
2
p {
  cursor: e-resize; }

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

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

编译为

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

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

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

编译为

1
2
p {
  margin: 7px auto; }

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

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

编译为

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

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

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

编译为

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

3.4. 布尔运算 (Boolean Operations)

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

3.5. 数组运算 (List Operations)

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

4. 圆括号 (Parentheses)

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

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

编译为

1
2
p {
  width: 7em; }

5.函数 (Functions)

SassScript定义了一些有用的函数， 这些函数可以像普通 CSS 函数语法一样调用：

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

编译为：

1
2
p {
  color: #ff0000; }

可用函数的完整列表，请参阅这张页面。

5.1关键词参数 (Keyword Arguments)

Sass 函数允许指定明确的关键词参数 (keyword arguments) 进行调用。 上面的例子也可以改写成：

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

虽然不够简明，但可以让Sass代码阅读起来更加方便。 关键词参数让函数具有更灵活的接口， 即便参数众多，也不会让使用变得困难。

命名参数（named arguments）可以以任意顺序传入，并且，具有默认值的参数可以省略掉。 由于命名参数也是变量名称，因此，下划线、短横线可以互换使用。

完整的 Sass 函数列表和它们的参数名称，以及在 Ruby 里如何定义你自己的函数的步骤，请见 Sass::Script::Functions。

6.插值：#{}（Interpolation: #{}）

您还可以通过 #{} 插值语法在选择器和属性名中使用 SassScript 变量：

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

编译为：

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

它也可以使用#{}插值语句把 SassScript 插入到属性值中。在大多数情况下，这种做可能还不如使用直接变量来的方便，但使用 #{}意味着靠近它的运算符都将被视为纯CSS（愚人码头注：可以避免各种运算）。 例如：

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

编译为：

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

7.SassScript中的&（& in SassScript）

就像当它在选择器中使用一样，SassScript中的&指向当前父选择器。下面是一个逗号分隔的列表（list）中包含一个空格的分隔列表（list）。例如：

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

$selector的值是现在 ((".foo.bar" ".baz.bang"), ".bip.qux")。这个混合选择器在这里加了引号，以表明他们是字符串，但在现实中，他们将不带引号的。即使选择器不包含逗号或空格，&总会有两个嵌套层次，因此它可以保证访问一致性。

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

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

变量默认: !default （Variable Defaults: !default）

如果分配给变量的值后面添加了!default标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。

例如:

1
2
3
4
5
6
7
8
$content: "First content";
    $content: "Second content?" !default;
$new_content: "First time reference" !default;

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

编译为：

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

通过!default赋值的时候，如果变量是 null 值时，将视为未赋值（愚人码头注：所以下面的$content值为 “Non-null content”）：

1
2
3
4
5
6
$content: null;
    $content: "Non-null content" !default;

#main {
  content: $content;
}

编译为：

1
2
#main {
  content: "Non-null content"; }
-------------本文结束感谢您的阅读-------------

本文标题:SassScript

文章作者:yangpu

发布时间:2019年06月05日 - 15:23

最后更新:2019年06月05日 - 15:23

原始链接:https://mongofeng.github.io/2019/06/05/SassScript/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。