第七节：sass 常见函数的基本使用

sass 常见函数的基本使用

常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modules

Color(颜色函数)

sass包含很多操作颜色的函数。例如：lighten() 与 darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色。

p {
    height: 30px;
}

.p0 {
    background-color: #5c7a29;
}

.p1 {
    /* 
        让颜色变亮
        lighten($color, $amount)
        $amount 的取值在0% - 100% 之间
     */
    background-color: lighten(#5c7a29, 30%);
}

.p2 {
    // 让颜色变暗  通常使用color.scale()代替该方案
    background-color: darken(#5c7a29, 15%);
}

.p3 {
    // 降低颜色透明度  通常使用color.scale()代替该方案
    // background-color: opacify(#5c7a29,0.5);
    background-color: opacify(rgba(#5c7a29, 0.1), 0.5);
}

使用

<p></p>
<p class="p0"></p>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>

String（字符串函数）

Sass有许多处理字符串的函数，比如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()。

例

p {
    &:after {
        content: quote(这是里面的内容);
    }
    background-color: unquote($string: "#F00");
    z-index:str-length("sass学习");
}

Math(数值函数)

数值函数处理数值计算，例如：percentage()将无单元的数值转换为百分比，round()将数字四舍五入为最接近的整数，min()和max()获取几个数字中的最小值或最大值，random()返回一个随机数。

例如

p {
    z-index: abs($number: -15); // 15
    z-index: ceil(5.8); //6
    z-index: max(5, 1, 6, 8, 3); //8
    opacity: random(); // 随机 0-1
}

List函数

List函数操作List，length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起，append()在列表末尾添加一个值。

例如：

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); // 10px 20px 30px
    color: nth($list: red blue green, $n: 2); // blue
}

Map函数

Map函数操作Map，map-get()根据键值获取map中的对应值，map-merge()来将两个map合并成一个新的map，map-values()映射中的所有值。

创建一个Map

你可以使用 map 函数来创建一个键值对的集合：

$colors: (color1: red, color2: blue, color3: green);

类似对象，但是使用括号包裹

访问Map中的值

使用 map-get 函数可以获取Map中的值：map-get第一个参数是map对象，第二个参数是map对象的键

.color1 {
  background-color: map-get($colors, color1);
}

检查键是否存在

使用 map-has-key 函数来检查Map中是否存在某个键：

@if map-has-key($colors, color1) {
  // color1 存在
}

添加键值对

使用 map-merge 函数可以将新的键值对添加到现有的Map中：

$new-colors: map-merge($colors, (color4: yellow));

移除键值对

使用 map-remove 函数可以从Map中移除一个或多个键值对：

$filtered-colors: map-remove($colors, color1);

遍历Map

使用 @each 指令可以遍历Map中的所有键值对：

@each $key, $value in $colors {
  .#{$key} {
    background-color: $value;
  }
}

其他Map函数

• map-keys($map): 返回Map中所有的键。
• map-values($map): 返回Map中所有的值。

示例

以下是一个使用Map的完整示例：

$theme-colors: (
  'primary': #007bff,
  'secondary': #6c757d,
  'success': #28a745,
  'info': #17a2b8,
  'warning': #ffc107,
  'danger': #dc3545,
  'light': #f8f9fa,
  'dark': #343a40
);
// 使用map-get获取值
.primary-bg {
  background-color: map-get($theme-colors, 'primary');
}
// 遍历map
@each $name, $color in $theme-colors {
  .bg-#{$name} {
    background-color: $color;
  }
}

通过这些函数和指令，你可以非常灵活地管理和使用SCSS中的Map，这对于组织大型的样式表和维护主题配置特别有用。

selector选择器函数

​ 选择符相关函数可对CSS选择进行一些相应的操作，例如：selector-append()可以把一个选择符附加到另一个选择符，selector-unify()将两组选择器合成一个复合选择器。

例如

.header {
    background-color: #000;
    content: selector-append(".a", ".b", ".c") + '';
    content: selector-unify("a", ".disabled") + '';
}

自检函数

​ 自检相关函数，例如：feature-exists()检查当前Sass版本是否存在某个特性，variable-exists()检查当前作用域中是否存在某个变量，mixin-exists()检查某个mixin是否存在。

例如：

$color:#F00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
    padding: $top $right $bottom $left;
}

.container {
    @if variable-exists(color) {
        color: $color;
    }
    @else {
        content: "$color不存在";
    }
    @if mixin-exists(padding) {
        @include padding($left: 10px, $right: 10px);
    }
}

自检函数通常用在代码的调试上