前端库-Sass框架：「02] 用 Sass 变量存储数据

Posted 2021-07-26 路条编程

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>

运行效果图如下所示：