Sass 高级特性

今日聚焦于 Sass 高级特性的深度钻研，学习了 Sass 丰富的内置函数，涵盖颜色函数、数学函数、字符串函数等。例如，使用 lighten() 和 darken() 颜色函数对基础颜色进行亮度调整，实现按钮悬停时的颜色变化效果，比如：$primary-color: #007bff;
.button {
background-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
}
}
以及掌握了自定义函数的编写方法，借助 @function 定义函数，在需要时进行调用。比如，创建一个计算元素宽度百分比的函数：
scss
@function calculate-width($total-width, $part-width) {
@return ($part-width / $total-width) * 100%;
}

$container-width: 1200px;
$column-width: 300px;
.column {
width: calculate-width($container-width, $column-width);
}