写在前面:
现在一直使用sass写css,当初入门的时候,看的很多教程,当时看的云里雾里的,现在看来还是蛮详细的,就是一点,不够小白。本人文章类型一直比较偏小白的,想要更好的为不会用sass提供一点学习的资料,相信本文对想要学习sass的人,还是有极大的参考价值的。里面有些细节,也许对已经学会使用sass的大手子也有一定的参考价值。
变量是什么?
w3c关于JavaScript 变量的介绍:
上面一大堆巴拉巴拉的东西,可以先这么理解,把变量看作一个存放东西的盒子,可以将钥匙、手机、饮料等物品存放在这个盒子中,也可以在需要的时候换成我们想存放的新物品,那里面的旧的东西就存不了,只能存一个东西。
建议
这里有个很好的网站,可以在线把sass文件编译成css文件,大家可以跟着栗子,一边看,一边动手做做demo,看看最后输出css是什么样子的。
sass变量的格式:
sass变量格式:$var:value;
栗子:$color:red;
1.必须是$开头
解析:这是sass变量的符号
2.$后面紧跟变量名
解析:变量名首字母必须为字母(a-z A-Z),下划线(_)开头。
3.变量的值
解析:变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)。
sass变量的用法:
1 | $color:red;/*1.这就是声明变量*/ |
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文件里面做的一个demo,里面分成了三个部分,下面分别给大家解析一下。
1.第一部分,变量要提前声明才能使用。这里我上面没有声明$text1这个变量,直接使用,导致文件报错。
sass文件编译是从上往下的,所以使用的时候,变量要声明在上面,当上面没有声明的时候,使用这个变量就会报错,文件编译错误,导致css文件无法使用。
2.第二部分,sass的全局属性,详见demo,里面注释的很清楚了。
因为sass文件是从上往下解析的,同一个sass变量在外界声明的时候,会有一个覆盖的作用,即上面已经声明过的变量,会被下面声明的给覆盖。
3.第三部分,sass也有局部变量。局部被包裹的变量,将不会影响到外界的变量,只在自己的一亩三分田里面起作用,外界要引用这个变量也是不行的。如果这里我没有定义外界的变量,局部被包裹起来的那部分$text:blue;还是会生效的。
变量的默认值default:
刚才说了,sass文件是从上往下渲染的,后面声明的变量会覆盖前面的变量,default这里的作用就是使后面的变量变成声明在第一个的变量(就是开始声明这个变量的地方,默认是第一个。)
变量格式:
$var:value!default;
栗子:$color:red!default;
代码示例。
解析:
1.这里把注释弄掉之后,sass编译会出错,因为上面没有声明这个变量,说明加上default之后,刚才关于变量的作用域的介绍也是不变的,下面还有一个局部作用域的栗子。
2和3.在代码注释里面,已经很详细了,不赘述了。
4.说明连续声明两个default也是有效的,第一个default会被第二个default覆盖。第二个default会被没有声明default的变量覆盖,所以最终输出的是没有声明default的变量red。
1.这里不解析了,详见注释。
变量用#{}包裹
这是一个格式,用在属性或者选择器上面里。大家看一下栗子就懂了。
1 | $ipt:input; |
后话:
断断续续写了三天,每天都有在写,今天算是差不多写完了。这篇是面向对sass变量概念不太熟悉的朋友,写的较为详细,在短短的一篇文章里面肯定无法保证阅读本文的人对sass有多熟悉,但我希望通过这篇文章,让你知道sass变量的一些用法,概念。能够不再那么一头雾水,那么我这篇文章的目的也就达到了。
最后:因为我经常看不懂别人写的分享,所以个人写文比较偏小白,写的不好之处,欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我,现在这阶段基本上每个月都不会少于十五篇文章(看到干货我也会进行分享)。码字不易,感谢支持!
ps:目前待业,坐标北京,求推荐工作。然后希望我写哪方面的文章可以在底下评论,或者是私信我,虽然写的不好,但我就当这是记录自己成长的一种方式咯。(前提是我会了,如果不会我也会记下来,等会了的时候再更出来。)
掘金个人主页 ,简书主页链接,csdn博客主页链接 ,github 。
参考文献:
以上。2017.4.22