您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Sass 变量

Sass 为 CSS 引入了变量这一,在实际项目中使用最普遍的除了 Sass 嵌套 就是 Sass 变量了,你可以把 CSS 的某个定义为变量,然后在项目中任何需要它的地方来使用它。本节主要讲解 Sass 变量的主要语法:变量的声明、引用、作用域等,同时还会讲解在实际项目中一般是如何来维护 Sass 变量的。

我们在 Sass 简介中提到 Sass是 CSS的扩展语言,变量是 CSS的扩展。
举个例子,假如我们项目中很多地方要设置字体颜色为红色,那么我们完全可以把这个颜色抽出来作为变量,然后在需要设置字体颜色的地方引用这个变量。这样有好处就是,假如产品大大说要所有字体颜色的时候,我们就不需要每处都去了,直接更改变量的值就 OK 了,我们用 Sass 来直观的感受下:

@H__29@$variable: red;

.title {
  color: @H__29@$variable;
}
h1 {
  color: @H__29@$variable;
}

可以看到上面的,我们定义了 $variable 这个变量,然后在多个元素的样式中使用它,那么变量的值都可以是什么呢?这个一定要记住,变量的值可以是:

下面我们将详细的讲解 Sass 变量的语法。

我们首先看下这段使用 Sass 变量的编译为 CSS 是什么样的:

@H__29@$variable: red;

.title {
  color: @H__29@$variable;
}
h1 {
  color: @H__29@$variable;
}

编译为 CSS 的是:

.title {
  color: red;
}

h1 {
  color: red;
}

下面我将从变量的声明开始,逐一讲解 Sass 变量的语法。

如果你熟悉 javascript 的话,你应该更好理解什么是变量,那么在 Sass 中也一样,我们都需要对变量进行声明!Sass 的变量声明 和 CSS 声明很像,Sass 变量以 $ 开始,例如我们声明用于字体颜色的变量:$font-color: #ffffff; 我们声明的变量是 $font-color ,它的值是 #ffffff (颜色值)。

要知道,任何 CSS 的赋值,都可以用于 Sass 变量的值,比如在 CSS 中定义 border 的值为 1px solid #000000 , 那么 1px solid #000000 这个值也可以用于 Sass 变量的值,下面举几个例子直观地看下:

@H__29@$font-family: "YaHei""Myriad Pro"; // 字体的值
@H__29@$color: red; // 颜色的值
@H__29@$width: px; // 宽度的值
@H__29@$border: px solid #000000; // border的值
@H__29@$use-flex-grow: ; // flex-grow的值

从上面的可以看出,任何 CSS 的值都可以作为 Sass 变量的值,值得一提的是,这段只是对变量进行了声明而已,并没有使用变量,只有你使用这个变量的时候它才会生效!所以接下来我们开始讲解变量的引用

小知识:旧版本的 Sass 使用 ! 来声明变量,比如 !variable ; 要知道在 CSS 中有一种提升优先级的方式是 !important ,可能 Sass 官方团队认为使用 ! 可能会导致和 CSS 语法的冲突,所以后来改为了使用 $ 来声明变量。

上面我们说了怎么去声明 Sass 变量,下面我们讲如何去引用它。只要是可以写 CSS 值的地方,就可以使用变量,所以说,你几乎可以在任何地方引用变量,编译后,变量会被替换为变量值,如果说你需要改变这个值,那么你只需要在声明变量的地方改变这个变量值,那么其余引用它的地方就都会改变。我们写一段来感受下:

@H__29@$main-bg-color: blue;
@H__29@$main-border: px solid #cccccc;
@H__29@$main-font-size: px;
@H__29@$error-text-color: red;
@H__29@$body-color: @H__29@$main-bg-color;
body {
  background-color:@H__29@$body-color;
}
.content {
  font-size:@H__29@$main-font-size;
  background-color:@H__29@$main-bg-color;
  border:@H__29@$main-border;
}
.error {
  font-size:@H__29@$main-font-size;
  color:@H__29@$error-text-color;
}

上面我们定义了几个变量字体颜色、边框、字体大小等,然后在 .content 和 .error 的样式表中引用它们,值得注意的是 $body-color 这个变量,在声明变量时,变量的值也可以引用其他变量,是不是很方便很灵活,上面的 Sass 最终将会编译为如下的 CSS :

body {
  background-color: blue;
}

.content {
  font-size: px;
  background-color: blue;
  border: px solid #cccccc;
}

.error {
  font-size: px;
  color: red;
}

从 Sass 3.4.x 版本开始,Sass 中开始有作用域的概念。和 javascript 中的变量类似,Sass 的变量也是有作用域这个概念的,也有全局作用域和局部作用域之分,我们举个例子来看下:

@H__29@$main-color: red;
h1 {
  @H__29@$main-color: green; // 局部变量
  color:@H__29@$main-color;
}
h2 {
  color:@H__29@$main-color;
}

我们看到在第一行我们声明了 $main-color ,在 h1 的样式中我们又声明了和同名的 $main-color ,在 h1 样式中声明的这个 $main-color 就是局部变量,在 h1 的样式中会引用局部变量而不是,最终转换为 CSS 的如下:

h1 {
  color: green;
}

h2 {
  color: red;
}

上面我们讲解了局部变量和,那么如果我想用局部变量去改变呢? Sass 允许使用 !global 标识符来设置局部变量为全局,以此来改变局部变量的作用范围,我们还是用上面的,来改变局部变量的作用域为全局:

@H__29@$main-color: red;
h1 {
  @H__29@$main-color: green!global;
  color:@H__29@$main-color;
}
h2 {
  color:@H__29@$main-color;
}

我们来看下,上面这段转换为 CSS 是这样的:

h1 {
  color: green;
}

h2 {
  color: green;
}

可以看到我们覆盖掉了 $main-color 的值 red ,不过请你记住,在大型项目中尽量不要使用这种方式去改变,这可能会影响到其他的样式改变!

一般来说我们反复的声明重名变量,那么最后声明的变量值会覆盖上面所有的,比如像下面这样:

@H__29@$main-color: red;
@H__29@$main-color: green;
h1 {
  color:@H__29@$main-color;
}

那么最后编译的时候会使用最后一次声明的变量值,也就是 green ,我们看下编译后的:

h1 {
  color: green;
}

这样就有问题,在实际的项目开发中,假如需要你来写一段公共的 Sass 给者使用,那么如果你的中声明了 $main-color 这个变量,那么者在自己也声明了 $main-color 这个变量,并且他是在导入你的这段之前声明的,那么他的就会被覆盖掉,这是不行的!

所以这里你需要使用 !default 标识符,顾名思义,就是认值,如果这个变量被声明并赋值了,那么就使用声明的值,否则就使用认值。我们还是用上面的例子来看下:

@H__29@$main-color: red; // 假如这个是者自己声明的
@H__29@$main-color: green!default; // 假如这个是你的片段声明的
h1 {
  color:@H__29@$main-color;
}

那么在最后编译的时候会使用 red 这个变量值,如果者没有声明这个变量,就会使用 green 这个变量值,我们来看下编译后的:

h1 {
  color: red;
}

上面我们演示了 !default 标识符的作用,这个在你使用 Sass 开发独立的模块的时候,或者使用 Sass 开发库来供他人使用的时候,!default 标识符石非常有用的!

上面我们已经讲解了 Sass 变量的语法和使用,那在企业的实际项目中是怎么应用 Sass 变量的呢?这里以使用 webpack 搭建的前端项目为例,一般我们都会抽离出 1~n 个来专门声明 Sass 变量(抽离出几个视项目大小而定),如下图所示:

如上图所示,我们一般会在 styles 目录下新建 variables.scss 来管理声明的,我们接着来看下个中是怎么写的:

我们可以看到,个中不但声明了很多变量,还对其做了注释,这样就很易于后期的管理,尤其是在多人开发的大型项目中,对整个项目的样式出一些是很有必要的!

本节教程我们主要讲了 Sass 变量的使用及语法,主要:

我们还是通过下图来回忆一下本节的:

在实际的项目中,Sass 变量的使用频率也是非常高的,不亚于 Sass 嵌套,所以一定要好好掌握这一节的,变量的应用会让你更加顺手的去管理项目中的样式!


联系我
置顶