SASS 是一款强大的 CSS 预处理器，它提供了许多方便快捷的函数可以帮助我们更加轻松地编写 CSS 样式。在这篇文章中，我们将介绍 SASS 常用函数的应用，并提供示例代码及学习指导，希望能为读者们提供帮助。
基础函数
RGB 和 RGBA
使用 rgb($red, $green, $blue) 或 rgba($red, $green, $blue, $alpha) 函数可以快速地生成 RGB 或 RGBA 颜色值。
$primary-color: rgb(0, 128, 255);
$secondary-color: rgba(0, 128, 255, 0.5);
a {
color: $primary-color;
background-color: $secondary-color;
}HSL 和 HSLA
使用 hsl($hue, $saturation, $lightness) 或 hsla($hue, $saturation, $lightness, $alpha) 函数可以快速地生成 HSL 或 HSLA 颜色值。
$primary-color: hsl(210, 100%, 50%);
$secondary-color: hsla(210, 100%, 50%, 0.5);
a {
color: $primary-color;
background-color: $secondary-color;
}lighten 和 darken
使用 lighten($color, $amount) 或 darken($color, $amount) 函数可以让颜色变亮或变暗，其中 $color 是需要调整的颜色，$amount 是调整的程度，取值范围为 0% 到 100%。
$primary-color: #007aff;
a {
color: lighten($primary-color, 20%);
background-color: darken($primary-color, 20%);
}saturate 和 desaturate
使用 saturate($color, $amount) 或 desaturate($color, $amount) 函数可以让颜色饱和度变强或变弱，其中 $color 是需要调整的颜色，$amount 是调整的程度，取值范围为 0% 到 100%。
$primary-color: #007aff;
a {
color: saturate($primary-color, 20%);
background-color: desaturate($primary-color, 20%);
}grayscale
使用 grayscale($color) 函数可以将颜色转换为灰度色调。
$primary-color: #007aff;
a {
color: grayscale($primary-color);
}高级函数
Mixin
使用 @mixin 可以创建一个重复使用的代码块，类似于函数，可以在需要的地方调用。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(5px);
}占位符选择器
使用 % 开头的选择器可以创建一个占位符选择器，在需要的地方通过 @extend 来继承该选择器的属性。
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ---------- ----- ------ ----- ----------------- -------- - ------- - ------- -------- - ----------- - ------- -------- ----------------- ----- -
自定义函数
使用 @function 可以创建一个自定义的函数，接收参数并返回计算结果。
@function rem($px) {
$base-font-size: 16px;
@return ($px / $base-font-size) * 1rem;
}
h1 {
font-size: rem(24px);
}总结
以上就是 SASS 常用函数的应用，我们介绍了基础函数和高级函数的使用方法及示例代码，希望对读者们有所启发。在实际项目中，我们可以根据具体需求灵活运用这些函数来提高编写 CSS 样式的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483a4a148841e98942f79ae