SASS 中常用的函数有哪些？

SASS 是一种强大的 CSS 预处理器，它能让我们更高效地编写和维护 CSS。除了常规的变量、嵌套和 mixin，SASS 还提供了大量的内置函数，可以方便地进行数学计算、颜色操作、字符串处理等。在本文中，我们将探讨 SASS 中常用的一些函数。

1. 数学计算

SASS 中有很多内置的数学函数，可以用于各种计算，例如加、减、乘、除、取余等。下面是一些常用的数学函数及其用法：

1.1. 加法 add(a, b)

$width: 100px;
$padding: 20px;
.container {
  width: add($width, $padding);
}

1.2. 减法 subtract(a, b)

$font-size: 16px;
$line-height: 1.5;
.title {
  font-size: $font-size;
  line-height: subtract($line-height, 0.2);
}

1.3. 乘法 multiply(a, b)

$column-width: 80px;
$column-count: 3;
.container {
  width: multiply($column-width, $column-count);
}

1.4. 除法 divide(a, b)

$font-size: 16px;
$line-height: 1.5;
.title {
  font-size: $font-size;
  line-height: divide($line-height, 2);
}

1.5. 取余 mod(a, b)

$total-columns: 12;
$grid-gutter: 20px;
.col {
  width: mod($total-columns, 2) == 0 ? ($grid-gutter * 2) : $grid-gutter;
}

2. 颜色操作

SASS 中还有很多内置的颜色函数，可以用于调整颜色的亮度、饱和度、透明度等。下面是一些常用的颜色函数及其用法：

2.1. 调整亮度 lighten(color, amount)

$bg-color: #333;
.light-bg {
  background-color: lighten($bg-color, 10%);
}

2.2. 调整暗度 darken(color, amount)

$bg-color: #ccc;
.dark-bg {
  background-color: darken($bg-color, 10%);
}

2.3. 调整饱和度 saturate(color, amount)

$text-color: #666;
.saturated {
  color: saturate($text-color, 50%);
}

2.4. 调整透明度 alpha(color, alpha)

$bg-color: rgba(255, 255, 255, 0.8);
.opaque-bg {
  background-color: alpha($bg-color, 1);
}

3. 字符串处理

SASS 还提供了很多内置的字符串函数，可以用于字符串处理和转换。下面是一些常用的字符串函数及其用法：

3.1. 字符串拼接 str-insert(string, insert, index)

$name: 'John Doe';
$screen: 'home';
.page-header {
  background-image: url(#{str-insert($screen, '-', 1)}.jpg);
  h1 {
    content: 'Welcome to #{str-insert($name, ' ', 5)}!';
  }
}

3.2. 字符串截取 str-slice(string, start-at, end-at)

$link: 'https://www.example.com/blog';
$domain: str-slice($link, 9, -5);
.blog-link {
  background-image: url(https://#{str-slice($domain, 4)});
}

3.3. 字符串替换 str-replace(string, search, replace)

$text: 'The quick brown fox jumps over the lazy dog.';
$replaced-text: str-replace($text, 'brown', 'red');
.heading {
  content: $replaced-text;
}

总结

SASS 中的函数可以用于各种应用场景，例如数学计算、颜色操作、字符串处理等。熟练掌握常用的函数，可以帮助我们更高效地编写和维护 CSS。在实际开发中，我们可以结合自己的需求来灵活使用函数，提高开发效率。

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