6、SASS与Compass：打造灵活用户界面样式

SASS与Compass：打造灵活用户界面样式

1. SASS变量

SASS允许定义特定值的变量，变量名以 $ 开头，可在整个样式表中使用。例如：

$blue: #4D74C1;
$red: #800000;
$baseMargin: 10px;
$basePadding: 5px;

这些变量可用于标准CSS声明：

.box1 {
  border: 1px solid $blue;
  padding: $basePadding;
  margin: $baseMargin;
}

还能使用基本数学函数：

.box2 {
  border: 1px solid $blue;
  padding: $basePadding * 2;
  margin: $baseMargin / 2;
}

SASS有许多内置颜色调整函数，如下表所示：
| 函数名 | 功能 |
| ---- | ---- |
| darken | 按百分比使颜色变暗 |
| lighten | 按百分比使颜色变亮 |
| complement | 返回互补色 |
| invert | 返回反色 |
| saturate | 按数值使颜色饱和 |
| desaturate | 按数值使颜色不饱和 |