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

wslongchen 发布于2019-08-29 13:08 / 840人阅读

摘要：如果存在一个同名的全局变量，这个全局变量也不会被重写，除非同名的局部变量被声明时使用关键字。

博客原文地址：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更大的灵活性，在学习使用的过程中，一定要注意区分两者的不同，灵活运用。

参考：

http://www.w3cplus.com/preprocessor/sass-basic-variable.html

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112389.html

前端入门23-CSS预处理器（Less&Sass）

摘要：声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候，预处理器就出现了，其实应该是说和这类语言出现了。声明本篇内容梳理自以下几个来源： Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网感谢大佬们的分享。正文-CSS预处理（less&Sass） CSS预处理什么是 CSS 预处理？为什么要有 CSS 预处理？这...

freecode 2019-04-23 13:07 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 评论0 收藏0
SASS

摘要：编译之后结果混合作用继承复用定义使用传参可以对混合进行传递参数，和设置默认值。占用中的位置，使用其样式内容。在模式下，进行色彩运算时，要求通明度必须保持一致，否则无法进行运算。 Sass 是一个CSS 的扩展，在语法CSS语法的基础上，增加变量，嵌套规则, 混合,导入，函数等功能对CSS进行预处理的中间语言文件格式 .sass ，.scssscss是对css的一种拓展，跟...

chanthuang 2019-08-29 11:01 评论0 收藏0