众所周知,CSS 是静态语言,虽功能强大,但用起来还是略微不爽,于是便有了动态样式语言,sass 和 less。动态样式语言的精髓就在于其有了变量,其中的诸多功能都是建立在变量之上的。因此,彻底弄懂 sass 和 less 中变量的异同之处,是学好它们的关键!
本文由浅至深,逐步展开介绍,并从大家所熟知的 JS 变量的角度,讲述 sass 和 less 变量作用域。
sass 和 less 都允许使用变量,且对变量的类型没有限制,这一点和 js 极为相似,非常灵活。但两者的不同都有哪些呢?
sass 中规定,以美元符号
开头的即表示变量,而 less 中以符号
- $
开头表示变量。这点很容易理解,不再多说。
- @
在两种语言中,变量都可以以一定的方式插入到字符串中去,这个特性极为有用,但两种语言的插入方式不同,具体请看下例:
- //sass 中
- $direction: left;.myPadding {
- padding - # {
- $direction
- }: 20px;
- }
- //less中
- @direction: left;.myPadding {
- padding - @ {
- direction
- }: 20px;
- }
- //编译后的css代码是相同的,如下:
- .myPadding {
- padding - left: 20px;
- }
在 sass 3.4.0 之前,sass 可以说是没有局部变量和全局变量之分的,即后声明的同名变量总是会覆盖之前的同名变量,不管后声明的变量是位于何处。
此时,less 和 sass 的变量作用域有很大的不同之处。先看一段熟悉的 js 代码:
- //代码块A
- var a = 1;
- (function (){
- a = 5;
- alert(a); //a = 5;
- })();
- alert(a); //a = 5;
由于闭包的作用,匿名函数内部可以引用到外部的变量 a, 因此上面的代码可以正常运行。再来看下面这个:
- //代码块B
- var a = 1;
- (function (){
- var a = 5;
- alert(a); //a = 5;
- })();
- alert(a); //a = 1;
了解 js 链式作用域的朋友一定秒懂了上面的代码。
在匿名函数的内部声明了一个局部变量,局部变量并不会影响全部变量,所以代码最后输出的仍然是 1。
那么回到正题,sass 3.4.0 之前 的变量设计思想是类似于代码块 A 的,即不带关键字
的局部变量声明,而 less 的思想类似代码块 B,带关键字
- var
的局部变量声明。
- var
看到这,很多人估计就想开始吐槽 sass 不人性化的设计了,万一我一不小心声明了一个局部变量,它和某个全局变量同名了,那不岂不是要酿成大祸!
大家先别急着吐槽,人家 sass 这不是也改进了嘛~ 而且 sass 不仅改了,还附送了彩蛋
- !global
上 3.4.0 版本的 Backwards Incompatibilities – Must Read! 中有这样一条:
翻译过来便是:没有位于第一层(全局)的变量声明现在都被默认为是局部的。如果存在一个同名的全局变量,这个全局变量也不会被重写,除非同名的局部变量被声明时使用关键字
。
- !default
举例说明:
- $color: blue;
- a{
- $color: red;
- color: $color; //red
- }
- p{
- color: $color; //blue
- }
- //但是,若使用 !global
- span{
- $color: yellow !global;
- color: $color; //yellow
- }
- div{
- color: $color; //yellow
- }
上面的代码没有什么实际意义,但作为例子,简洁明了便好。
有一点需要说明的是,sass 3.4.0 是在 14 年 8 月份发布的,但现在网上的关于 sass 变量的文章对作用域的说明,大多仍旧停留在 3.4.0 之前。希望大家能注意 sass 这个重要的改进,以免在开发过程中带来不便。在此也得出一个血泪教训,尽量看英文官方文档啊啊啊啊
sass 和 less 两种动态样式语言的诞生,赋予了 css 更大的灵活性,在学习使用的过程中,一定要注意区分两者的不同,灵活运用。
参考:
以上仅我个人见解,如有错误之处,欢迎指正。如您觉得我的文章对您有帮助,请点击下方 "推荐",让更多的人看到。
来源: http://www.cnblogs.com/nuannuan7362/p/6432981.html