Sass 学习笔记（三）

值

数字

数字可以带单位也可以不带单位，当带单位的数字进行计算时，单位也会随之计算。

列表

你可以这样取列表的值。

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

map

必须使用括号，使用带引号的键值而不是不带引号的。

获得键值

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

map-merge() 函数执合并两个 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，这通常用于函数和 mixin 。

$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));
}
@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)

布尔值

该 if() 函数选择返回一个值，如果它的参数是 true 与另一个如果它的参数是 false 。

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

空字符串、空列表在 sass 中都是 true。

null

@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);
}

function

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

@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list-separator($list);
  @each $element in $list {
    @if not call($condition, $element) {
      $new-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 str-index($string, "Helvetica");
  }
  font-family: remove-where($fonts, get-function("contains-helvetica"));
}

参考

【1】Sass 官网文档