细谈sass和less中的变量及其作用域

博客原文地址:Claiyre的个人博客 https://claiyre.github.io/
博客园地址:http://www.cnblogs.com/nuannuan7362/
如需转载,请在文章开头注明原文地址
————————————————————————“如果我将来是个普通人,就要做不普通的事”

前言

众所周知,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的,即不带关键字var的局部变量声明,而less的思想类似代码块B,带关键字var的局部变量声明。

看到这,很多人估计就想开始吐槽sass不人性化的设计了,万一我一不小心声明了一个局部变量,它和某个全局变量同名了,那不岂不是要酿成大祸!
大家先别急着吐槽,人家sass这不是也改进了嘛~ 而且sass不仅改了,还附送了彩蛋 !global

sass官网上 3.4.0版本的 Backwards Incompatibilities – Must Read! 中有这样一条:

All variable assignments not at the top level of the document are now local by default. If there’s a global variable with the same name, it won’t be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally. This behavior can be detected using feature-exists(global-variable-shadowing).

翻译过来便是:没有位于第一层(全局)的变量声明现在都被默认为是局部的。如果存在一个同名的全局变量,这个全局变量也不会被重写,除非同名的局部变量被声明时使用关键字!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更大的灵活性,在学习使用的过程中,一定要注意区分两者的不同,灵活运用。

参考:

以上仅我个人见解,如有错误之处,欢迎指正。如您觉得我的文章对您有帮助,请点击下方“推荐”,让更多的人看到。

    原文作者:Claiyre
    原文地址: https://segmentfault.com/a/1190000010549760
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞