SASS 中常用的函数及用法解析

SASS 是一种 CSS 预处理器，它给 CSS 提供了许多增强和扩展功能，使得前端开发更加高效和灵活。在 SASS 中，函数是一个重要的概念，可以让我们编写更加复杂和动态的样式。下面是一些常用的 SASS 函数及其用法解析。

1. color 相关函数

1.1 darken($color, $amount)

darken 函数可以让颜色变暗，第一个参数是要变暗的颜色，第二个参数是变暗的程度，以百分比为单位。

$color: #3498db;
$dark-color: darken($color, 20%);

1.2 lighten($color, $amount)

lighten 函数可以让颜色变亮，用法与 darken 函数类似。

$color: #2ecc71;
$light-color: lighten($color, 30%);

1.3 rgba($color, $alpha)

rgba 函数可以将一个颜色转化为 rgba 格式，第一个参数是要转换的颜色，第二个参数是 alpha 值，以百分比为单位。

$color: #c0392b;
$rgba-color: rgba($color, 50%);

2. 数字相关函数

2.1 round($number)

round 函数可以将一个数值四舍五入。

$number: 3.1415926;
$round-number: round($number);

2.2 ceil($number)

ceil 函数可以将一个数值向上取整。

$number: 3.1415926;
$ceil-number: ceil($number);

2.3 floor($number)

floor 函数可以将一个数值向下取整。

$number: 3.1415926;
$floor-number: floor($number);

3. 字符串相关函数

3.1 unquote($string)

unquote 函数可以将一个带引号的字符串去掉引号。

$quoted-string: "Hello, world!";
$unquoted-string: unquote($quoted-string);

3.2 quote($string)

quote 函数可以将一个字符串加上引号。

$unquoted-string: Hello, world!;
$quoted-string: quote($unquoted-string);

4. 列表相关函数

4.1 nth($list, $n)

nth 函数可以获取列表中第 n 个元素。

$list: 1 2 3 4 5;
$third-element: nth($list, 3);

4.2 length($list)

length 函数可以获取列表的长度。

$list: 1 2 3 4 5;
$list-length: length($list);

4.3 join($list1, $list2, $separator)

join 函数可以将两个列表合并成一个列表，第三个参数是分隔符，可以省略，默认为一个空格。

$list1: 1 2 3;
$list2: 4 5 6;
$joined-list: join($list1, $list2, ",");

5. 控制语句相关函数

5.1 if($condition, $if-true, $if-false)

if 函数可以用于条件判断，如果条件成立，返回第二个参数，否则返回第三个参数。

$condition: true;
$value-if-true: "It's true";
$value-if-false: "It's false";
$result: if($condition, $value-if-true, $value-if-false);

5.2 for($var from $start through $end)

for 函数可以用于循环遍历，从 $start 到 $end，包括 $end。

@for $i from 1 through 5 {
    .item:nth-child(#{$i}) {
        font-size: 10px * $i;
    }
}

上面的代码会生成 5 个元素，分别设置不同的字体大小，从 10px 到 50px。

总结

SASS 中有许多其他的函数，使用这些函数可以让样式更加灵活和复杂。但是在使用函数时，也要注意样式的性能问题，过多的函数调用会降低页面的性能。建议在开发中选择合适的函数使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648198cf48841e989411243f