前端库-Sass框架：「02] 用 Sass 变量存储数据
Sass，世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言。它添加了使用基本 CSS 语法无法使用的特性。Sass 使开发人员更容易简化和维护项目的样式表。主专题主要介绍变量、嵌套 CSS、条件语句及多种循环语句等。
用 Sass 变量存储数据
Sass 不同于 CSS 的一个特点是它允许使用变量。我们可以在 Sass 中声明变量，并为它赋值，就像我们在 JavaScript 中一样。
在 JavaScript 中，变量是使用let和const关键字定义的。在 Sass 中，变量以$开头的，后跟变量名。
这里有几个例子：
$main-fonts: Arial, sans-serif;$headings-color: green;//To use variables:h1 {font-family: $main-fonts;color: $headings-color;}
当需要把多个元素设置成相同颜色时，变量就会很有用。一旦我们需要更改颜色，只需要改变这个变量的值就好。
我们做一个练习，创建一个变量$text-color并将其设置为红色。然后更改.blog-post和h2的color属性的值为$text-color变量。
完成后的完整代码如下所示：
<style type='text/scss'>$text-color:red;.header{text-align: center;}.blog-post, h2 {color: $text-color;}</style><h1 class="header">Learn Sass</h1><div class="blog-post"><h2>Some random title</h2><p>This is a paragraph with some random text in it</p></div><div class="blog-post"><h2>Header #2</h2><p>Here is some more random text.</p></div><div class="blog-post"><h2>Here is another header</h2><p>Even more random text within a paragraph</p></div>
运行效果图如下所示：