1. 犀牛前端部落首页
  2. Sass教程
  3. Sass基础

Sass变量

如果你之前没有使用过Sass,光是Sass中的变量就足以吸引你喜欢上Sass了。

之前的文章中我们已经学习过为什么变量如此重要了,现在让我们一起来学习一下如何使用它。

定义变量的基本语法很简单:只需在变量名之前使用$并将其定义视为CSS样式:

$<variable name>:<value>;

下面的代码声明了一个名为large-font的变量。

$large-font: 50px;

一旦你声明变量后,你就可以将变量作为值在任何地方使用,例如:

$large-font: 50px;

p {
    font-size: $large-font;
}

Sass转换器将会将上面的代码转换为:

p {
    font-size: 50px;
}

在声明变量时,有一个小的注意点:由于历史原因,’-‘和’_’是可以互换的,请看下面例子:

$main-color: red;

p {
   color: $main-color; /*使用-*/
}

a {
   color: $main_color;/* 使用_等价于上面代码*/
}

上面的示例中,两个代码效果相同。

作用域

与现代的编程语言一样,Sass支持作用域的概念:变量仅在定义他们的嵌套级别中可以使用。

//Sass嵌套作用域
$main-color: red;

p {
   $main-color: blue;
   color: $main-color;
}

a {
  color: $main-color;
}

上面的代码,你能搞清楚对应的颜色吗?

a标签对应的是红色

p标签对应的是蓝色

以下是经过转换器转换后的代码:

p {
   color: blue;
}

a {
   color: red;
}

这是默认的行为,你还可以使用!global覆盖它,例如以下代码

$main-color: red;

p {
   $main-color: blue !global;
   color: $main-color;
}

a {
  color: $main-color;
}

将会转换为以下代码:

p {
   color: blue;
}

a {
   color: blue;
}

如果你希望变量是全局变量,那么就可以使用!global。

不过实际项目中我们一般将全局变量封装在一个_gloabl.scss文件中,在需要使用的时候使用@inlcude引入。

下一篇文章,我们将一起学习表达式。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2292.html

发表评论

登录后才能评论