• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

3.1 Sass变量

我们都知道,JavaScript可以有变量、数据类型、函数等语法。而作为一门“编程式”的语言,Sass同样也具备这些语法。在接下来Sass的学习中,大家别忘了多多将Sass的语法与JavaScript的语法对比,这样更能加深理解和记忆。

这一节,我们先来介绍一下Sass中的变量。

一、Sass变量简介

在JavaScript中,声明变量都是用var。但是在Sass中,我们声明变量使用的是“$”(美元符号)开头。

语法:

Sass变量

说明:

我们可以看出,Sass的变量包括3部分:声明符、变量名、值。Sass变量定义的方式,跟CSS语法很相似,这个我们很容易理解。此外我们需要注意一下,定义一个Sass变量必须用“$”开头,不然编译的时候是无法识别的。

在Sass中,对于变量的取值有2种方式:(1)一般值;(2)默认值。

1、一般值

在Sass中,变量的一般值,指的是我们常见的变量值,这个值可以是数字、字符串等。

举例1:

 
$width:10px;
div
{
    font-size:$width;
}

编译出来的CSS代码如下:

 
div
{
    font-size:10px;
}

举例2:

 
$color:white;
$bgColor:red;
body
{
    color:$color;
    background-color:$bgColor;
}

编译出来的CSS代码如下:

 
body
{
    color:white;
    background-color:red;
}

2、默认值

在Sass中,变量还有一种取值方式,那就是默认值。所谓的默认值,指的是给变量初始化一个默认值,这个值在后面可以根据开发的需要,使用一个“同名变量”的值覆盖掉。定义变量的默认值很简单,我们只需要在“变量值”后面加上“!default”就可以了。

举例:

 
$width:10px !default;
.div1
{
    width:$width;
}
.div2
{
    $width:20px;
    width:$width;
}
.div3
{
    $width:30px;
    width:$width;
}

编译出来的CSS代码如下:

 
.div1
{
    width:10px;
}
.div2
{
    width:20px;
}
.div3
{
    width:30px;
}

分析:

想要覆盖变量的默认值很简单,我们只需要在该变量被调用之前重新定义该变量的值就可以了。变量的默认值,在实际开发特别是组件化开发中是非常有用的。当然,这里我们只需要简单了解一下即可。

二、变量的作用域

跟JavaScript的变量一样,Sass的变量也有作用域。在Sass中,变量根据作用域可以分为2种:(1)全局变量;(2)局部变量。

其中,Sass中的作用域跟JavaScript中的作用域是非常相似的。

1、全局变量

在Sass中,全局变量一般指的是在“选择器、混合宏、继承等”外部定义的变量。全局变量从定义开始,一直到整个程序结束都起作用。对于混合宏、继承这些,我们在后续章节会详细介绍。

举例:

 
$color:red;        //定义全局变量
body
{
    color:$color;  //调用全局变量
}

编译出来的CSS代码如下:

 
body
{
    color:red;
}

2、局部变量

在Sass中,局部变量一般指的是在“选择器、混合宏、继承等”内部定义的变量。局部变量只能在这些的内部起作用,在这些的外部是不起作用的。

举例:

 
$color:red;             //定义全局变量
body
{
    $color:green;       //定义局部变量
    div
    {
        color:$color;   //调用局部变量
    }
}

编译出来的CSS代码如下:

 
body
{
    color:green;
}

分析:

在这个例子中,局部变量“$color:green;”会把全局变量“$color:red;”的值覆盖,因此最终$color的值是green。对于这个,我们联系一下JavaScript中的局部变量和全局变量就不难理解了。

疑问

1、像下面这个例子,我们直接用纯CSS写不就得了,搞毛线还用变量定义一遍那么麻烦呢?

 
$width:10px;
div
{
    font-size:$width;
}

这个简单例子,只是让小伙伴们认识一下Sass变量的用法罢了。在实际开发中,就拿绿叶学习网来说,整个网站大量地方需要用到相同的颜色值、字体大小等。如果我们只用纯CSS的方式,一旦这些颜色值等以后需要改动,我们有多少处相同地方就得手动改多少次,甚至还可能出现遗漏。但是如果我们使用变量的方式,每次改动我们只需要改变变量的值就可以了,这样极大地加快我们的开发效率和提高了网站的可维护性。

此外给小伙伴们一个实用的建议:对于需要重复使用的就定义成一个变量,对于不需要重复使用的直接用数值就行了。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部