SCSS颜色变量

SCSS为CSS带来了很多强大的功能选择，在维持整个网页设计的一致性上，变量是其中帮助作用是最大的其中一种。设定颜色变量使得重复使用与原型相同的颜色变得简单，也可使您轻松建立自己的网站，无需记住每一个Hex颜色代码或HTML颜色名称。

设置您的SCSS颜色变量

如果您对SCSS变量不熟悉，可查看这个指南快速了解一下（但老实说，它们是相当简单的）。SCSS变量前缀为'$'符号，可以依照您的喜好随意命名。这里我们会建立一些基础的颜色变量，后续在我们的样式表中会用到。

SCSS
$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;

请记住，为了使用变量，或体验任何SCSS这一方面的优点，样式表必须以'.scss'为扩展名，而且您的网站建立系统必须包括预处理器。更多入门信息请查看我们的如何安装Sass。

现在我们已经定义了一些颜色变量，是时候让它们开始工作了。使用SCSS变量与任何CSS属性中的正常值一样，要确保包括了'$'符号前缀以表明变量状态。

SCSS
h1 { color: $color-red; }
p { color: $color-green; }
a { color: $color-blue; }

这里会输出CSS以及您初始定义的任何变量值，在我们的示例中，输出会是这样：

CSS
h1 { color: #FF0000; }
p { color: #00FF00; }
a { color: #0000FF; }

SCSS变量非常强大，而且使用它们可以完成很多颜色以外的事情。尝试用它们来设置字体风格和系列、不同断点或过渡时机。大胆尝试吧！