滴,sass的第一次打卡。
SASS - Syntactically Awesome StyleSheets,直译过来就是语法上令人惊叹的样式表。的确,SASS是对CSS的扩展,拥有 变量、mixin、导入、嵌套、自定义函数 等出色的功能。为了更快速高效、模块化的组织我的CSS代码,所以我要开始学习sass。
今天,就要谈谈 sass 变量。
sass 变量
基本用法
sass中的变量定义特别容易,使用 $
+ variableName
,比如:
// 定义一个sass变量,并使用
$gray-base: #000;
body {
color: $gray-base;
}
另外,sass变量可以使用 #{}
嵌套在字符串中:
$side: top;
.container {
margin-#{$side}: 20px;
}
好了,这是我学到的基本用法。
于是,我试着打开了Bootstrap 4.0源码下的scss文件,找到 _variables.scss
文件。那好,问题来啦,见下图:
这个 !default
应该是格外显眼了,“顺藤摸瓜”学到了一些关于sass变量的进阶用法。
看官,您接着往下看 :)
进阶用法
首先,我们知道在JavaScript中变量有全局变量和局部变量之分,区分这两种变量是根据其所在的作用域。而sass变量也可分为全局变量和局部变量,不过它们的规则却有点不同。我们先来看一段代码:
$color: red;
p {
$color: blue;
color: $color; // blue
}
div {
color: $color; // blue
}
很奇怪吧!这段代码中我们首先定义了一个 $color
变量为 red
,然后在 p
元素选择器中又定义了一个 $color
变量为 blue
。我们很容易能接受 p
元素的字体颜色显示为蓝色,奇怪的是在 div
元素中,字体颜色也显示为蓝色。
而如果仅在 p
元素中定义一个 $color
变量,这时 div
元素就再也无法使用 p
中定义的变量。
来,看下图:
你会发现,这和JavaScript中“局部变量不使用 var
声明 ”有类似的地方。
var a = 1;
(function fn() {
a = 2;
}());
console.log(a); // 2
好,下面我们再来说一种情况 - 嵌套中的sass变量。这种情况和JavaScript中的作用域链也类似。
div {
$color: red;
color: $color; // red
p {
color: $color; // red
}
}
p
元素作为 div
的子元素,这样 p
也能访问在 div
中定义的变量。
呼~好了,高潮来了,前方高能,看官继续 :)
扯了这么多,现在终于说到 !default
这个问题上。
!default 变量默认值
是这样的,正是因为sass变量的奇怪之处,所以 !default
也就应运而生了。
我们先来看看有没有这玩意儿解析出来的css有什么区别:
无 !default
$color: red;
$color: blue;
p {
color: $color; // blue
}
有 !default
$color: red;
$color: blue; !default
p {
color: $color; // red
}
结果已经很明显了,!default
的出现打破了“后来居上”的规则。它的具体规则是这样的:假如定义了一个变量且在之前没有定义过同名变量,为这个变量添加 !default
后,则使用这个值;如果之前已经声明过同名变量,则使用之前的值。
Bootstrap作为一个通用的CSS框架,用户在使用的时候难免会重写某些样式。
首先,我们编写一个 _variables.scss
的文件:
然后,在 style.scss
中导入,并重写样式:
结果,编译出来的 style.css
如下:
产生了重复的代码。
现在,就该是 !default
显身手的时候了。
在 style.scss
中这样修改:
结果,在编译出来的 style.css
文件中就没有重复的代码:
这就是 !default
的魅力。