sass揭秘之变量

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

刚开始sass的人,也许其最大的抱怨就是sass的变量了,尤其是那些了解less变量的,更是会说sass的变量做得不如less的变量好,less中有明显的全局变量和局部变量之分,但是到sass这边来,好像有点乱了,分不清了。其实不管sass的变量还是less变量都是有其设计的原理的,有着不一样的科学性,下面我们简单来了解下。

全局变量和局部变量

要了解sass或less的变量,有必要先了解下js的变量定义,先来一段js的代码:

var a = 1;
(function(){
    a = 5;
})();
console.log(a);//5

上面这段代码,匿名函数里面的a因为没有使用var关键字来定义,所以当我们在函数外打印a的时候,得到的是5,改变了一开始定义的1

var a = 1;
(function(){
    var a = 5;
})();
console.log(a);//1

而这段代码,匿名函数里面的a使用了var关键字来定义,所以当我们在函数外打印a的时候,得到的是1,一开始定义的值。

如果你明白了上面两个的区别,那下面就好办了,如果你还没有明白,那么建议先去看下js的变量申明。 也许你现在已经看出眉目了,其实sass的变量设计用的是上面两段代码中的第一段思想,即在局部不使用var来申明,而less用的是第二段思想,即局部使用var来申明,这就是很多人所说的为什么sass没有局部变量。我们来两段代码测试下:

sass版

$color:red;
p{
    $color:blue;
    color:$color;//blue
}
a{
    color:$color;//blue
}

less版

@color:red;
p{
    @color:blue;
    color:@color;//blue
}
a{
    color:@color;//red
}

简单总结下:如果全局申明了一个变量a,sass中如果使用到局部中是属于改变a的值,所以后来所有的都是改变之后的值;而less中使用到局部变量则属于在局部重新定义a的值,不影响其他地方。说到底,其实sass和less的变量其实都是js变量的表现形式,两者都有其科学性,只是设计思路不同而已。

当然说到这里,可能有人会说了,那sass就没有局部变量喽。其实不然,正确的说法应该是:在有全局变量的情况下,sass是没有局部变量的。意思是如果要看到sass的局部变量,请不要设置全局变量。代码为证:

p{
    $color:blue;
    color:$color;//blue
}
a{
    color:$color;//$color未定义
}

这是一个没有定义全局变量$color的例子,上面的p元素的color为blue,

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-basic-variable.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部