SASS 是一种 CSS 预处理器,可以通过变量、嵌套、函数等特性,快速编写可重用的样式代码。在 SASS 中,函数是一种非常强大和常用的工具。本文将介绍 SASS 中常用的函数,并给出应用示例。
1. Color 函数
1.1 lighten($color, $amount)
将给定的颜色变亮,$amount 参数是一个百分比值,取值范围为 0% 到 100%。
例如:
$base-color: #f00; $lighten-color: lighten($base-color, 20%);
1.2 darken($color, $amount)
将给定的颜色变暗,$amount 参数是一个百分比值,取值范围为 0% 到 100%。
例如:
$base-color: #f00; $darken-color: darken($base-color, 20%);
1.3 rgba($color, $alpha)
将给定的颜色转换为 RGBA 格式,并指定透明度 $alpha。
例如:
$base-color: #f00; $rgba-color: rgba($base-color, 0.5);
2. List 函数
2.1 nth($list, $n)
获取列表 $list 中的第 $n 个元素。
例如:
$colors: #f00 #0f0 #00f; $first-color: nth($colors, 1);
2.2 length($list)
返回列表 $list 的长度。
例如:
$colors: #f00 #0f0 #00f; $colors-length: length($colors);
3. String 函数
3.1 unquote($string)
去除字符串 $string 中的引号。
例如:
$quoted-string: "Hello, World!"; $unquoted-string: unquote($quoted-string);
3.2 quote($string)
给字符串 $string 添加引号。
例如:
$unquoted-string: Hello, World!; $quoted-string: quote($unquoted-string);
4. Math 函数
4.1 round($number)
将 $number 四舍五入为整数。
例如:
$number: 3.6; $rounded-number: round($number);
4.2 ceil($number)
将 $number 向上取整为整数。
例如:
$number: 3.2; $ceiled-number: ceil($number);
4.3 floor($number)
将 $number 向下取整为整数。
例如:
$number: 3.8; $floored-number: floor($number);
应用示例
下面是一个使用 SASS 函数的示例,演示了如何根据不同的背景颜色生成对应的前景颜色。代码中使用了 Color 和 Math 函数。
-- -------------------- ---- ------- --------- -------------------------------------------- - ----------- ---- --- ----------------------------- - ----------- - ------- ----- - ----- - ------- ----- - - ------ ------------------------ - ----------------- ------- ------ ---------------------------------- - ---------- - -------- ----------------------- -展开代码
在上面的示例中,generate-foreground-color 函数根据 $background-color 的亮度,生成对应的前景颜色,如果亮度大于给定的 $threshold,则返回黑色,否则返回白色。background-color mixin 接受一个颜色参数 $color,将其作为背景色,并使用 generate-foreground-color 函数设置对应的前景色。
最终的 CSS 代码:
.container { background-color: #f00; color: #fff; }
通过使用 SASS 函数,我们可以快速生成可重用的样式代码,提高 CSS 代码的可维护性和可读性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c4fcf86e1fc40e36e27187