随着前端开发的不断发展，CSS 作为前端三大基石之一，也在不断地被优化和升级。其中，SASS 的出现给 CSS 带来了很多便利，尤其是在单位转换方面，SASS 提供了一套十分灵活和强大的解决方案，让我们在编写样式时更加高效和舒适。
本文将介绍 SASS 中常用的单位转换技巧，包括 px 到 rem 的转换、数字类型与带单位字符串类型的转换、颜色值转换等，在实际项目中可以帮助你更好地掌握 SASS 的灵活性。
Px 到 Rem 的转换
我们都知道，rem 单位是相对于根元素（即 html 标签）字体大小的单位，使用 rem 单位可以让页面布局更加灵活，便于自适应各种屏幕。
在 SASS 中，我们可以利用函数 rem() 实现 px 到 rem 的转换，示例代码如下：
-- -------------------- ---- ------- ---------------- ----- -- -------- --------- -------- - ------- ---- - ---------------- - ----- - ---------- - ---------- ---------- -- - ---- --- --- -- -
上面的代码中，我们定义了一个基准字体大小 $base-font-size，然后使用函数 rem() 将 px 值转换为 rem 值。在 .container 样式中，我们将 24px 转换为 rem 单位，即设置 font-size: 1.5rem。
如果你想让函数 rem() 更加通用，可以将基准字体大小作为参数传递进去：
@function rem($px, $base-font-size: 16px) {
@return ($px / $base-font-size) * 1rem;
}
.container {
font-size: rem(24px); // 使用默认基准字体大小
margin-top: rem(20px, 20px); // 使用自定义的基准字体大小 20px
}数字类型与带单位字符串类型的转换
在写样式时，经常需要处理数字和带单位的字符串类型之间的转换，比如将字符串类型的宽度值转换为数值类型进行计算，或者将数值类型的透明度转换为 rgba 格式的颜色值。
在 SASS 中，我们可以使用 unit() 函数和四则运算符来实现这些转换。unit() 函数可以提取带单位的字符串类型的单位，示例代码如下：
$width: 80px;
$height: 100%;
.container {
width: $width; // 直接使用带单位的字符串类型
width: unit($width) * 2; // 将字符串类型的宽度值乘以 2
height: unit($height); // 提取百分比单位
}在上面的代码中，我们定义了变量 $width 和 $height，分别是宽度值和高度值。在 .container 样式中，我们使用 unit() 函数将 $width 提取出宽度值的单位，并将宽度值乘以 2。
另外一个常用的技巧是将数值类型转换为带单位的字符串类型，比如将透明度值转换为 rgba 格式的颜色值。在 SASS 中，我们可以用四则运算符来实现这个转换，示例代码如下：
$opacity: 0.8;
.container {
background-color: rgba(255, 0, 0, $opacity); // 直接使用数值类型的透明度
background-color: rgba(255, 0, 0, $opacity * 100%); // 将透明度值转换为百分比类型
}在上面的代码中，我们定义了变量 $opacity，表示透明度值。在 .container 样式中，我们将透明度值直接用于 rgba 格式的颜色值中，或者将透明度值乘以 100% 转换为百分比类型。
颜色值转换
在 SASS 中，我们可以通过内置的函数来进行颜色值的转换和计算，比如调整颜色的亮度、对比度、混合等。下面介绍几种常用的颜色值转换技巧。
调整颜色的亮度和对比度
SASS 中提供了两个函数来调整颜色的亮度和对比度，分别是 lighten() 和 darken() 函数。这两个函数接受两个参数，第一个参数是要调整的颜色值，第二个参数是调整的百分比值。
$color: #f00;
.container {
background-color: lighten($color, 20%); // 使颜色变亮 20%
background-color: darken($color, 20%); // 使颜色变暗 20%
}在上面的代码中，我们定义了变量 $color，表示红色的颜色值。在 .container 样式中，我们分别将红色的颜色值使用 lighten() 和 darken() 函数调整了 20%。
颜色混合
颜色混合是 SASS 中非常实用的一个特性，它可以将两个颜色混合为一个新的颜色。具体实现是使用 mix() 函数，该函数接受两个参数，第一个参数是第一个颜色值，第二个参数是第二个颜色值和混合的百分比值。示例代码如下：
$color1: #f00;
$color2: #00f;
.container {
background-color: mix($color1, $color2, 50%); // 将红色和蓝色混合为紫色
}在上面的代码中，我们定义了两个变量 $color1 和 $color2，分别表示红色和蓝色的颜色值，在 .container 样式中，我们使用 mix() 函数将红色和蓝色两个颜色混合为紫色。其中，混合的百分比值为 50%，即红色和蓝色的比例相等。如果将混合的百分比值设置为 0%，表示只取第一个颜色值；设置为 100%，表示只取第二个颜色值。
总结
本文介绍了 SASS 中常用的单位转换技巧，包括 px 到 rem 的转换、数字类型与带单位字符串类型的转换、颜色值转换等。这些技巧在实际项目中经常用到，可以帮助你更加高效地编写样式。如果你还没有使用 SASS，建议你尝试一下，它会给你带来很多便利和惊喜。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a23bc9add4f0e0ffa50616