Sass 变量的声明与使用

Stella981
• 阅读 787

本节我们学习 Sass 中的变量,那么什么是变量呢? Sass 中的变量可以用来存储一些信息,并且重复使用。变量可以存储的信息包括字符串、数字、布尔值、颜色值等等。

声明变量

Sass 中声明变量需要用到 $ 符号,格式为:

$变量名: 变量值;
示例:

例如下面我们定义一个变量,并给这个变量赋了一个颜色值:

$color:red;
.xkd{
    color: $color;
    a{
        background-color: $color;
    }
}

执行编译命令,编译后的 CSS 代码如下所示:

.xkd {
  color: red;
}
.xkd a {
  background-color: red;
}

定义好变量后,在需要使用到 red 颜色时,就可以直接使用变量名来代替这个颜色值。当然,现在这样看我们还是不太清楚为什么要使用变量,没有看出变量的优势。但是如果我们在一个大型项目中,定义变量会很有用,例如我们可能会在多个地方使用同一个颜色值,如果后期需要对这个颜色值进行修改,那么一个一个去找会很麻烦,而如果定义了变量,就只需要修改变量的值即可。

默认变量

Sass 的默认变量需要在值的后面加上 !default 。默认变量一般用来设置默认值,也就是说当某个变量定义了一个默认值,但是又出现另外一个值时,无论谁先被定义,默认值都会被覆盖。

示例:

看下面这段代码:

$fsize: 14px;
.xkd{
    $fsize: 12px!default;
    font-size: $fsize;
}

编译成 CSS 代码后:

.xkd {
  font-size: 14px;
}

上述代码中,我们先定义了一个全局变量 $fsize 并赋值为 14px ,然后在 .xkd 选择器中给 $fsize 变量赋了一个 12px 的值,按理来说会优先使用 12px,但是因为在 12px 后面加了一个 !default,变成了一个默认值,最后输出的 CSS 代码中,使用的是 14px

变量的作用域

Sass 中支持两种类型的变量,即局部变量和全局变量。默认情况下定义在选择器之外的为全局变量,全局变量的作用域为全局,可以被所有的选择器访问。定义在选择器内的为局部变量,局部变量的作用域只能在当前层级上有效果。下面我们通过一个例子来看一下局部变量和全局变量的使用。

示例:
$color: #ccc;  // 全局变量
.one{
    $color: #eee;  // 局部变量
    background-color: $color;
}
.two{
    background-color: $color;
}

编译成 CSS 代码:

.one {
  background-color: #eee;
}
.two {
  background-color: #ccc;
}

上述代码中,可以看到我们定义了一个全局变量 $color,然后又在 .one 中定义了一个局部变量 $color。此时.one.two 同时引用 $color ,编译成 CSS 代码后,.one 中使用的是局部变量的值,而 .two 中使用的是全局变量的值。

可以看出,局部变量的作用域就只在声明这个变量的当前代码块中,而全局变量的作用域则在全局。当使用了某个变量时,首先会在当前代码块中查找,如果找不到则向上一层代码块中查找,一直到找到为止。

!global 关键字

我们可以通过关键字 !global 来设置全局变量,也就是说我们只要在一个变量后面使用这个关键字,那么这个变量就为全局变量。

示例:

我们来看一个例子:

.one{
    $num: 14px !global;  
    font-size: $num;
}
.two{
    font-size: $num;
}

编译成 CSS 代码:

.one {
  font-size: 14px;
}

.two {
  font-size: 14px;
}

在上述代码中,原本在.two 选择器中是不能访问 .one 选择器中的变量的,但是因为变量 $num 使用了 !global 关键字,所以 $num 变成了一个全局变量,这样就可以 .two 选择器访问啦。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
似梦清欢 似梦清欢
3年前
Linux shell(2)
1.变量以固定名称存放的可能变化的值,可以提高脚本的适应能力,方便脚本执行中重复使用某个值。定义/赋值变量格式为:变量名变量值注意事项:若指定变量已存在,则相当于重新给变量赋值;等号两边无空格;变量名区分大小写;变量名不能以数字开头,不使用关键字和特殊字符。root@localhostX1//定义变量
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
SASS基础
特点:1.在css基础上增加特性:变量、嵌套(nesting)、混合(@mixin)、继承(@extend);2.通过函数进行颜色值与属性值的运算;3.提供控制指令等高级功能;4.自定义输出指令;数据类型:Sass和JavaScript语言类似,也具有自己的数据类型,在Sass中包含以下几种数据类型:1\
Stella981 Stella981
3年前
Sass
变量可以让整个网站保持一致性。你可以定义一个变量,然后在其他地方引用它,而不必再重复相同的值。要改这些值,只需在定义变量的那一个地方修改。下面的Sass代码包含两个变量:$primarycolor,$secondarycolor$primarycolor:orange;$secondarycolor:gold;
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Stella981 Stella981
3年前
Sass的运算
本节我们学习Sass中的运算,一般的编程语法中都支持使用运算,Sass中同样可以做各种数学运算,包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。本节我们主要讲一下Sass中最基本的数学运算。加法运算加法运算是Sass中基本运算之一,在变量或者属性中都可以做加法运算。示例:$num
Stella981 Stella981
3年前
GO开发[二]:golang语言基础
一.变量1.声明变量变量相当于是对一块数据存储空间的命名,程序可以通过定义一个变量来申请一块数据存储空间,之后可以通过引用变量名来使用这块存储空间。Go语言引入了关键字var,而类型信息放在变量名之后,变量声明语句不需要使用分号作为结束符,示例如下:varv1intvarv2string
Stella981 Stella981
3年前
Sass 带参混合
本节我们来学习带参混合,Sass中混合可以接受参数,我们可以通过使用@include调用混合时给混合传参,来定义混合生成的精确样式。给混合传参混合可以用SassScript值作为参数,给定的参数被包括在混合中并且作为为变量提供给混合,既然是作为变量,那么定义参数时,参数名前面需要加一个$符号。当我们定义一个带参