1. 定义变量
使用 $ 符号定义变量，并在其后添加变量名：
$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;
$base-padding: 10px;
在这个例子中，我们定义了三个变量：$primary-color 用于存储主色彩值，$font-stack 用于存储字体栈，$base-padding 用于存储基本边距值。
2. 使用变量
一旦定义了变量，你可以在整个样式表中使用它们：
body {
font: $font-stack;
padding: $base-padding;
}
header {
background-color: $primary-color;
}
在这个例子中，我们在 body 元素中使用了 $font-stack 变量和 $base-padding 变量，而在 header 元素中使用了 $primary-color 变量。
3. 更新变量值
如果需要更改全局样式，只需更新变量的值。这将在整个样式表中自动更新：
$primary-color: #e74c3c;
body {
font: $font-stack;
padding: $base-padding;
}
header {
background-color: $primary-color;
}
现在，$primary-color 的值已更改为 #e74c3c，这会自动反映在所有使用此变量的地方。
4. 嵌套中的变量
在 Sass 中，你还可以在选择器的嵌套中使用变量：
$base-margin: 20px;
section {
margin-top: $base-margin;
p {
margin-bottom: $base-margin;
}
}
这个例子中，$base-margin 变量在 section 元素的 margin-top 属性和 p 元素的 margin-bottom 属性中都得到了使用。
使用 Sass 变量可以使你的样式表更具可维护性，因为你可以轻松更新全局样式而无需逐个查找和替换。这是 Sass 中使用变量的基础知识，有助于更好地组织和管理你的样式代码。
转载请注明出处：http://www.zyzy.cn/article/detail/4320/sass