Sass 数据类型 - 自学教程

Sass 支持许多值类型，其中大多数直接来自CSS。每个表达式产生一个值，变量保存值。大多数值类型直接来自CSS：

数字（Number），可能有也可能没有单位，例如12 或100px。
字符串（String），可以带或不带引号，例如"Helvetica Neue"或 bold。
颜色（Color），可以通过其十六进制表示形式或名称（如#c6538c或）来引用，也可以blue从函数（如rgb(107, 113, 127)或）返回hsl(210, 100%, 20%)。
列表（List），其可以由空格或逗号并且其可以被包含在方括号或没有括号可言，等进行分离1.5em 1em 0 2em，Helvetica, Arial, sans-serif或 [col1-start]。

特定于Sass 的类型：

布尔值（boolean），值true和 false。
null 值。
映射（Map），例如("background": red, "foreground": pink)。
由返回get-function() 并调用的函数引用call()。

数字（Number）

Sass中的数字包含两个部分：数字本身及其单位。例如，16px数字为16，单位为px。数字不能有单位，也可以有复杂的单位。有关更多详细信息，请参见下面的单位。

SCSS

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

单位

Sass 根据实际单位计算的工作方式为操纵单位提供强大的支持。当两个数字相乘时，其单位也将相乘。当一个数字除以另一个时，结果从第一个数字获取其分子单位，从第二个数字获取其分母单位。一个数字在分子和/或分母中可以具有任意数量的单位。

SCSS

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug 5px / 2s; // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em; // 3.125px*deg/s*em
                                // (read "pixel-degrees per second-em")

$degrees-per-second: 20deg/1s;
@debug $degrees-per-second; // 20deg/s
@debug 1 / $degrees-per-second; // 0.05s/deg

Sass会自动在兼容的单位之间转换，尽管它会选择哪个单位作为结果取决于您使用的Sass实现。如果尝试组合不兼容的单位（如）1in + 1em，Sass会抛出错误。

SCSS

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

与实际单位计算一样，如果分子包含与分母中的单位兼容的单位（如96px / 1in），它们将被抵消。这样可以轻松定义可用于单位之间转换的比率。在下面的示例中，我们将所需速度设置为每50像素1秒，然后将其乘以过渡覆盖的像素数，以获取所需的时间。

SCSS

$transition-speed: 1s/50px;

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

编译为 CSS 结果：

CSS

.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

精度

简单数字在小数点后最多支持10位精度。这意味着一些不同的事情：

只有小数点后数字的前十位数字才会包含在生成的 CSS 中。
如果它们在小数点后的第十位之前相同，像 == 和 >= 这样的操作将认为两个数字相等。
如果一个数字与整数的距离小于 0.0000000001，则对于需要整数参数的函数（如 list.nth（），它被认为是一个整数。

SCSS

@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // false 官方例子为true
@debug 0.01234567891 == 0.0123456789123; // true
@debug 0.0123456789111 == 0.0123456789123; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

字符串（String）

字符串是字符序列（特别是 Unicode 代码点）。Sass 支持两种内部结构相同但呈现方式不同的字符串：带引号的字符串（如“Helvetica Neue”）和不带引号的字符串（也称为标识符），如粗体。这些共同涵盖了CSS中出现的不同类型的文本。

您可以使用带引号的字符串转换为加引号的字符串string.unquote()功能，并且可以使用不带引号的字符串转换为一个带引号的字符串string.quote()函数。

SCSS

@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"

转义

所有的Sass字符串都支持标准的CSS 转义码：

通过从A到F的字母或从0到9的数字（甚至换行！）之外的任何字符都可以包含在字符串 \ 中。
通过写 \ 后跟以十六进制写的Unicode代码点号，可以将任何字符作为字符串的一部分包含在内。您可以选择在代码点编号之后包含一个空格，以指示Unicode数字的结束位置。

SCSS

@debug string.index("Helvetica Neue", "Helvetica");
@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"

对于允许出现在字符串中的字符，编写Unicode转义符会产生与编写字符本身完全相同的字符串。

引号

带引号的字符串写在单引号或双引号之间，如中所示"Helvetica Neue"。它们可以包含插值，以及任何未转义的字符，除了：

\可以作为转义 \\;
'或"，用于定义该字符串的那个，可以以\'或形式转义\"。
换行符，可以换成\a（包括尾随空格）。

带引号的字符串保证可以编译为与原始Sass字符串内容相同的CSS字符串。确切的格式可能会根据实现或配置而有所不同-包含双引号的字符串可能会编译为"\""或'"'，并且非ASCII字符可能会也可能不会转义。但这应该在任何符合标准的CSS 实施中（包括所有浏览器）进行解析。

SCSS

@debug "Helvetica Neue"; // "Helvetica Neue"
@debug "C:\\Program Files"; // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""; // "\"Don't Fear the Reaper\""
@debug "line1\a line2"; // "line1\a line2"

$roboto-variant: "Mono";
@debug "Roboto #{$roboto-variant}"; // "Roboto Mono"

未加引号

未加引号的字符串写为CSS 标识符。它们可能在任何地方包括插值。最好编写引号的字符串。

SCSS

@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex

字符串索引

Sass有许多使用或返回数字的字符串函数，这些数字称为index，它们引用字符串中的字符。索引1指示字符串的第一个字符。请注意，这与许多从0开始的编程语言不同！Sass还使引用字符串的结尾变得容易。索引-1表示字符串中的最后一个字符，-2表示倒数第二个，依此类推。

SCSS

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"

颜色（Color）

Sass具有对颜色值的内置支持。就像CSS颜色一样，它们表示s RGB颜色空间中的点，尽管许多Sass 颜色功能也可以在HSL颜色空间中运行。Sass的颜色可以写成十六进制代码（#f2ece4或#b37399aa），CSS颜色名称（midnightblue，transparent），或功能rgb()，rgba()，hsl()，和hsla()。

SCSS

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

无论最初如何编写Sass颜色，它都可以与基于HSL的功能和基于RGB的功能一起使用！

CSS支持许多可以表示相同颜色的不同格式：其名称，其十六进制代码和功能符号。Sass选择哪种颜色编译颜色取决于颜色本身，颜色在原始样式表中的书写方式以及当前的输出模式。由于样式的变化很大，因此样式表作者不应依赖任何特定的输出格式来编写颜色。

Sass支持许多有用的颜色功能，这些功能可通过将颜色混合在一起或缩放其色相，饱和度或亮度来基于现有的颜色创建新的颜色。

SCSS

SCSS  语法
$venus: #998099;

@debug scale-color($venus, $lightness: +15%); // #a893a8
@debug mix($venus, midnightblue); // #594d85

列表（List）

列表包含一系列其他值。在 Sass 中，列表中的元素可以用逗号(Helvetica, Arial, sans-serif) 或空格(10px 15px 0 0) 分隔，只要它在列表中保持一致即可。与大多数其他语言不同，Sass 中的列表不需要特殊的括号;任何用空格或逗号分隔的表达式都算作一个列表。但是，您可以编写带有方括号([line1 line2])的列表，这在使用网格模板列（grid-template-columns）时很有用。

Sass 列表可以包含一个甚至零个元素。单元素列表可以写成 (<expression>,) 或 [<expression>]，零元素列表可以写成 () 或 []。此外，所有列表函数都会将不在列表中的单个值视为包含该值的列表，这意味着您很少需要显式创建单元素列表。

没有括号的空列表不是有效的 CSS，因此 Sass 不允许你在属性值中使用括号。

Sass提供了一些功能，这些功能使您可以使用列表来编写功能强大的样式库，或者使应用程序的样式表更清洁，更可维护。

索引

其中许多函数采用或返回称为索引的数字，这些数字引用列表中的元素。索引1表示列表的第一个元素。请注意，这与许多从0开始的编程语言不同！Sass还使引用列表的末尾变得容易。索引-1表示列表中的最后一个元素，-2表示倒数第二个，依此类推。

访问元素

如果您无法从中获取值，则列表用处不大。您可以使用该list.nth($list, $n)函数在列表中的给定索引处获取元素。第一个参数是列表本身，第二个参数是您要获取的值的索引。

SCSS

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

遍历列表（List）

这实际上并没有使用函数，但是它仍然是使用列表的最常用方法之一。该@each规则为列表中的每个元素评估一个样式块，并将该元素分配给变量。

SCSS

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

编译为 CSS 结果：

CSS

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

append 添加到列表

将元素添加到列表中也很有用。该list.append($list, $val)函数获取一个列表和一个值，然后返回列表的副本，并将该值添加到末尾。请注意，由于Sass列表是不可变的，因此它不会修改原始列表。

SCSS

@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

查找元素

如果您需要检查某个元素是否在列表中或弄清楚它在什么索引上，请使用list.index($list, $value)函数。这需要一个列表和一个值以在该列表中定位，并返回该值的索引。

SCSS

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

如果该值根本不在列表中，则list.index()返回null。因为null是falsey，所以可以将或list.index()与一起使用，以检查列表是否包含给定值。@ifif()

SCSS

@use "sass:list";

$valid-sides: top, bottom, left, right;

@mixin attach($side) {
  @if not list.index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  // ...
}

不变性

Sass 中的列表是不可变的，这意味着列表值的内容永远不会更改。Sass 的列表函数都返回新列表，而不是修改原始列表。不变性有助于避免在样式表的不同部分共享同一列表时可能出现的许多潜在的错误。

不过，您仍然可以通过将新列表分配给同一变量来随着时间的推移更新状态。这通常用于函数和 mixins 中，以将一堆值收集到一个列表中。

SCSS

@use "sass:list";
@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@function prefixes-for-browsers($browsers) {
  $prefixes: ();
  @each $browser in $browsers {
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
  }
  @return $prefixes;
}

@debug prefixes-for-browsers("firefox" "ie"); // moz ms

参数列表

当您声明一个接受任意参数的 mixin 或函数时，您获得的值是一个称为参数列表的特殊列表。它的作用就像一个列表，其中包含传递给mixin或函数的所有参数，还有一个额外的功能：如果用户传递了关键字参数，则可以通过将参数列表传递给meta.keywords() 函数来访问它们作为映射（map）。

SCSS

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: $60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

编译为 CSS 结果：

CSS


pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

映射（Map）

Sass 中的Map 包含成对的键和值，并且可以轻松地通过相应的键查找值。它们被写成 (<expression>: <expression>, <expression>: <expression>)，前面的表达式是键，后面的表达式是与该键关联的值。键必须是唯一的，但值可以重复。与列表（List）不同，映射（Map）必须用括号书写，空的Map用 ()表示。

空映射（Map）与空列表（List）都是()。那是因为它既是映射（Map）又是列表（List）。实际上，所有Map 都算作List！每个Map都算作一个 List，例如，(1: 2, 3: 4)算作 (1 2, 3 4)。

查找Map 值

获取Map 的值：map.get($map, $key)函数！此函数返回与给定键关联的映射中的值。如果不包含Map 键，则返回null。

SCSS

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

遍历Map

SCSS

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

编译为 CSS 结果：

CSS

@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

合并Map

使用map.merge($map1, $map2)，它返回一个新Map。

SCSS

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// (
//   "lightest": 100,
//   "light": 300,
//   "medium": 500,
//   "bold": 700
// )

map.merge() 通常与内联映射一起使用以添加单个键/值对。

SCSS

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.merge($font-weights, ("extra-bold": 900));
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)

如果两个Map 都具有相同的键，则返回第二个Map 的值。

SCSS

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.merge($font-weights, ("medium": 600));
// ("regular": 400, "medium": 600, "bold": 700)

请注意，由于Sass映射是不可变的，因此map.merge()不会修改原始列表。

不变性

Sass 中的Map 是不可变的，但可以通过将新Map 分配给同一变量来随时更新状态，通常用于mixins 和函数中：

SCSS

@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@mixin add-browser-prefix($browser, $prefix) {
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global;
}

@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)

布尔值（Boolean）

布尔值是逻辑值true和false。除了其文字形式外，布尔值还由相等和关系运算符以及许多内置函数（如math.comparable()和）返回map.has-key()。

SCSS

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true

布尔运算符and 、or 和not

SCSS

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

@debug not true; // false
@debug not false; // true

使用布尔值

您可以使用布尔值来选择是否在Sass中执行各种操作，使用@if：

SCSS

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }

编译为 CSS 结果：

CSS

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

使用 if() 函数：

SCSS

@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px

空字符串，空列表和数字0在Sass中都是为true的。

SCSS

@debug if((), 10px, 30px); // 10px
@debug if(([]), 10px, 30px); // 10px

null

该值null是其类型的唯一值。它表示缺少值，通常由函数返回以表示缺少结果。

SCSS

@use "sass:map";
@use "sass:string";

@debug string.index("Helvetica Neue", "Runoops"); // null
@debug map.get(("large": 20px), "small"); // null
@debug &; // null

如果列表(list)包含null，null则会在生成的CSS中将其省略。

SCSS

$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");

h3 {
  font: 18px bold map-get($fonts, "sans");
}

编译为 CSS 结果：

CSS

h3 {
  font: 18px bold;
}

如果属性值为null，则将完全省略该属性。

SCSS

$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");

h3 {
  font: {
    size: 18px;
    weight: bold;
    family: map-get($fonts, "sans");
  }
}

编译为 CSS 结果：

CSS

h3 {
  font-size: 18px;
  font-weight: bold;
}

null也是flase，可以作为条件@if和if()。

SCSS

@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(#fff, 0.75);
  }
}

@include app-background(#036);

.sidebar {
  @include app-background(#c6538c);
}

编译为 CSS 结果：

CSS

.app-background {
  background-color: #036;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar.app-background {
  background-color: #c6538c;
  color: rgba(255, 255, 255, 0.75);
}

函数

函数也可以是值！您不能直接将函数编写为值，但是可以将函数名称传递给[meta.get-function() ] []以将其作为值。一旦有了函数值，就可以将其传递给meta.call()函数来调用它。这对于编写调用其他函数的高阶函数很有用。

SCSS

@use "sass:list";
@use "sass:meta";
@use "sass:string";

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list.separator($list);
  @each $element in $list {
    @if not meta.call($condition, $element) {
      $new-list: list.append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

content {
  @function contains-helvetica($string) {
    @return string.index($string, "Helvetica");
  }
  font-family: remove-where($fonts, meta.get-function("contains-helvetica"));
}

编译为 CSS 结果：

CSS

content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

Sass 教程

数字（Number）

SCSS

单位

SCSS

SCSS

SCSS

CSS

精度

SCSS

字符串（String）

SCSS

转义

SCSS

引号

SCSS

未加引号

SCSS

字符串索引

SCSS

颜色（Color）

SCSS

SCSS

列表（List）

索引

访问元素

SCSS

遍历列表（List）

SCSS

CSS

append 添加到列表

SCSS

查找元素

SCSS

SCSS

不变性

SCSS

参数列表

SCSS

CSS

映射（Map）

查找Map 值

SCSS

遍历Map

SCSS

CSS

合并Map

SCSS

SCSS

SCSS

不变性

SCSS

布尔值（Boolean）

SCSS

布尔运算符and 、or 和not

SCSS

使用布尔值

SCSS

CSS

SCSS

SCSS

null

SCSS

SCSS

CSS

SCSS

CSS

SCSS

CSS

函数

SCSS

CSS

相关推荐

分享笔记

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } 文章目录

QQ咨询

回顶部

文章目录