sass变量详解——你不知道的sass。

写在前面:

现在一直使用sass写css,当初入门的时候,看的很多教程,当时看的云里雾里的,现在看来还是蛮详细的,就是一点,不够小白。本人文章类型一直比较偏小白的,想要更好的为不会用sass提供一点学习的资料,相信本文对想要学习sass的人,还是有极大的参考价值的。里面有些细节,也许对已经学会使用sass的大手子也有一定的参考价值。

变量是什么?

w3c关于JavaScript 变量的介绍:

可以去搜一下js 变量

上面一大堆巴拉巴拉的东西,可以先这么理解,把变量看作一个存放东西的盒子,可以将钥匙、手机、饮料等物品存放在这个盒子中,也可以在需要的时候换成我们想存放的新物品,那里面的旧的东西就存不了,只能存一个东西。

建议

这里有个很好的网站,可以在线把sass文件编译成css文件,大家可以跟着栗子,一边看,一边动手做做demo,看看最后输出css是什么样子的。


sass变量的格式:

sass变量格式:$var:value; 栗子:$color:red;

1.必须是$开头

解析:这是sass变量的符号

2.$后面紧跟变量名

解析:变量名首字母必须为字母(a-z A-Z),下划线(_)开头。

3.变量的值

解析:变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)。

sass变量的用法:

1
2
$color:red;/*1.这就是声明变量*/
p{color:$color;}/*P标签的颜色被改为red————这是变量的使用*/

1.变量使用之前要先声明变量

解析:声明在变量这个盒子里面要放什么东西,那里面就有东西了

2.第二步使用变量。

解析:现在变量里面有东西了,要把里面的东西拿出来用,就要先找到变量这个盒子,找到盒子才能使用里面的东西。变量的变量名,就是这个盒子在的地方,把他放在你所要用的地方,就是把盒子里面的东西取出来用了。

多值变量:

多值变量格式:
$var:value,value,value;

实例:

1
2
3
4
5
6
$back:#fff,green,red;/*1.多个变量一起声明*/
p{
color: nth($back,1);/*2.输出green*/
}
span{
color: nth($back,3);/*3.输出red*/

解析:

所谓的多值变量就是字面上的意思,把多个相关的值写在一个变量里,然后通过nth($var,index)来获取第几个值。通常可以用于在写页面的时候声明多个颜色,然后再样式里面直接使用就可以了。

关于变量的作用域:

sass里面的代码片段

解析:

以上是我在sass文件里面做的一个demo,里面分成了三个部分,下面分别给大家解析一下。

1.第一部分,变量要提前声明才能使用。这里我上面没有声明$text1这个变量,直接使用,导致文件报错。

sass文件编译是从上往下的,所以使用的时候,变量要声明在上面,当上面没有声明的时候,使用这个变量就会报错,文件编译错误,导致css文件无法使用。

2.第二部分,sass的全局属性,详见demo,里面注释的很清楚了。

因为sass文件是从上往下解析的,同一个sass变量在外界声明的时候,会有一个覆盖的作用,即上面已经声明过的变量,会被下面声明的给覆盖

3.第三部分,sass也有局部变量。局部被包裹的变量,将不会影响到外界的变量,只在自己的一亩三分田里面起作用,外界要引用这个变量也是不行的。如果这里我没有定义外界的变量,局部被包裹起来的那部分$text:blue;还是会生效的。

变量的默认值default:

刚才说了,sass文件是从上往下渲染的,后面声明的变量会覆盖前面的变量,default这里的作用就是使后面的变量变成声明在第一个的变量(就是开始声明这个变量的地方,默认是第一个。)

变量格式:

$var:value!default; 栗子:$color:red!default;

代码示例。

default代码示例1

解析:

1.这里把注释弄掉之后,sass编译会出错,因为上面没有声明这个变量,说明加上default之后,刚才关于变量的作用域的介绍也是不变的,下面还有一个局部作用域的栗子。

2和3.在代码注释里面,已经很详细了,不赘述了。

4.说明连续声明两个default也是有效的,第一个default会被第二个default覆盖。第二个default会被没有声明default的变量覆盖,所以最终输出的是没有声明default的变量red。

default代码示例2

1.这里不解析了,详见注释。

变量用#{}包裹

这是一个格式,用在属性或者选择器上面里。大家看一下栗子就懂了。

1
2
3
4
5
$ipt:input;
$btm:bottom;
.#{$ipt}{ /*这里输出.input{}*/
padding-#{$btm}:5rem;/*这里输出padding-bottom: 5rem;*/
}

后话:

断断续续写了三天,每天都有在写,今天算是差不多写完了。这篇是面向对sass变量概念不太熟悉的朋友,写的较为详细,在短短的一篇文章里面肯定无法保证阅读本文的人对sass有多熟悉,但我希望通过这篇文章,让你知道sass变量的一些用法,概念。能够不再那么一头雾水,那么我这篇文章的目的也就达到了。

最后:因为我经常看不懂别人写的分享,所以个人写文比较偏小白,写的不好之处,欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我,现在这阶段基本上每个月都不会少于十五篇文章(看到干货我也会进行分享)。码字不易,感谢支持!
ps:目前待业,坐标北京,求推荐工作。然后希望我写哪方面的文章可以在底下评论,或者是私信我,虽然写的不好,但我就当这是记录自己成长的一种方式咯。(前提是我会了,如果不会我也会记下来,等会了的时候再更出来。)
掘金个人主页简书主页链接csdn博客主页链接github

参考文献:

sass揭秘之变量

以上。2017.4.22

听说,打赏我的人最后都找到了真爱。