Sass 运算
Sass 数学运算完全指南 · 难度：入门 · +10XP
Sass 数学运算完全指南
Sass（SCSS）作为CSS预处理器，支持数学运算符（+、-、*、/、%）进行数值计算，让你能够动态计算样式值。这比纯CSS的calc()更强大灵活，可以在编译时完成计算，减少浏览器运行时的开销。
基本算术运算符
| 运算符 | 作用 | 示例 | 结果 |
|---|---|---|---|
+ | 加法 | 10px + 5px | 15px |
- | 减法 | 100% - 30px | 编译为 calc(100%-30px) |
* | 乘法 | 10px * 3 | 30px |
/ | 除法（需满足条件） | (100px / 2) | 50px |
% | 取模（求余数） | 10px % 3 | 1px |
运算规则详解
// 加法：同单位直接相加
.container {
width: 200px + 50px; // 250px
margin: 20px + 5%; // 错误！不同单位不能加法
}
// 减法
.sidebar {
width: 300px - 60px; // 240px
margin-left: 100% - 300px; // calc(100% - 300px)，编译后保留
}
// 乘法（一个不带单位即可）
.col {
width: 100px * 3; // 300px
padding: 1.5em * 2; // 3em
// margin: 10px * 2px; // 错误！两个都带单位
}
// 除法：需满足三个条件之一
// 条件1：值被括号包裹
.element {
width: (600px / 3); // 200px
}
// 条件2：表达式中还有其他运算
.element {
width: 100px + 600px / 3; // 300px
}
// 条件3：值存储在变量中或由函数返回
.element {
$width: 600px;
width: $width / 3; // 200px
}
变量与运算结合
// 定义基础变量
$base-font: 16px;
$gutter: 20px;
$columns: 12;
$container: 1200px;
// 用运算计算布局
.container {
max-width: $container;
padding: 0 $gutter;
}
// 计算列宽（经典12列网格系统）
@for $i from 1 through $columns {
.col-#{$i} {
width: ($container / $columns) * $i;
}
}
// 生成 .col-1 { width: 100px; } ... .col-12 { width: 1200px; }
// 动态间距
.card {
padding: $gutter / 2; // 10px
margin-bottom: $gutter; // 20px
font-size: $base-font * 0.875; // 14px
}
颜色运算
// Sass支持对颜色值进行数学运算
$primary: #3498db;
.button {
background: $primary;
border: 1px solid $primary - #222; // 比主色更深的边框
&:hover {
background: $primary + #222; // 比主色更亮的背景
}
}
// 使用内置颜色函数（更推荐）
.button {
background: $primary;
&:hover {
background: darken($primary, 10%); // 变暗10%
}
&:active {
background: lighten($primary, 10%); // 变亮10%
}
}
数学函数速查
| 函数 | 作用 | 示例 | 结果 |
|---|---|---|---|
round($n) | 四舍五入 | round(3.6) | 4 |
ceil($n) | 向上取整 | ceil(3.1) | 4 |
floor($n) | 向下取整 | floor(3.9) | 3 |
abs($n) | 绝对值 | abs(-10) | 10 |
min($a,$b,...) | 最小值 | min(3,7,1) | 1 |
max($a,$b,...) | 最大值 | max(3,7,1) | 7 |
percentage($n) | 转百分比 | percentage(0.25) | 25% |
实战练习
- 定义变量 $grid-columns:12, $gap:24px，计算每列宽度
- 用运算实现一个基于变量的间距系统（xs/sm/md/lg/xl）
- 使用数学函数创建圆形的宽高计算（width=100px, border-radius=width/2）
- 用颜色运算为按钮创建hover/active状态的深浅变化