SASS
世界上最成熟、最穩(wěn)定、最強大的專業(yè)級CSS擴展語言！
sass 是一個 css 的預(yù)編譯工具
也就是能夠 更優(yōu)雅 的書寫 css
sass 寫出來的東西 瀏覽器不認(rèn)識
依舊要轉(zhuǎn)換成 css 在瀏覽器中運行
這個時候就需要一個工具來幫我們做
安裝 sass 環(huán)境
以前的 sass 需要依賴一個 ruby 的環(huán)境
現(xiàn)在的 sass 需要依賴一個 python 的環(huán)境
但是我們的 node 強大了以后，我們只需要依賴 node 環(huán)境也可以
需要我們使用 npm 安裝一個全局的 sass 環(huán)境就可以了
# 安裝全局 sass 環(huán)境
$ npminstall sass-g
編譯 sass
有了全局的 sass 環(huán)境以后
我們就可以對 sass 的文件進行編譯了
sass 的文件后綴有兩種，一種是 .sass 一種是 .scss
他們兩個的區(qū)別就是有沒有 {} 和 ;
.scss 文件
h1{
width:100px;
height:200px;
}
.sass 文件
h1
? ? width: 100px
? ? height: 200px
我們比較常用的還是 .scss 文件
因為 .sass 我們寫不習(xí)慣，當(dāng)然，如果你能寫習(xí)慣也比較好用
我們先不管里面的內(nèi)容是什么，至少這個 .scss 或者 .sass 文件瀏覽器就不認(rèn)識
我們要用指令把 這兩種 文件變成 css 文件
# 把 index.scss 編譯，輸出成 index.css
$ sassindex.scss index.css
這樣我們就能得到一個 css 文件，在頁面里面引入一個 css 文件就可以了
實時編譯
我們剛才的編譯方式只能編譯一次
當(dāng)你修改了文件以后要從新執(zhí)行一遍指令才可以
實時編譯就是隨著你文件的修改，自動從新編譯成 css 文件
也是使用指令來完成
# 實時監(jiān)控 index.scss 文件，只要發(fā)生修改就自動編譯，并放在 index.css 文件里面
$ sass--watchindex.scss:index.css
然后你只要修改 index.scss 文件的內(nèi)容，index.css 文件中的內(nèi)容會自動更新
實時監(jiān)控目錄
之前的實時監(jiān)控只能監(jiān)控一個文件
但是我們有可能要寫很多的文件
所以我們要準(zhǔn)備一個文件夾，里面放的全部都是 sass 文件
實時的把里面的每一個文件都編譯到 css 文件夾里面
依舊是使用指令的形式來完成
# 實時監(jiān)控 sass 這個目錄，只要有變化，就會實時響應(yīng)在 css 文件夾下
$ sass--watchsass:css
這樣，只要你修改 sass 文件夾下的內(nèi)容，就會實時的相應(yīng)在 css 文件夾中
你新添加一個文件也會實時響應(yīng)
但是你刪除一個文件，css 文件夾中不會自動刪除，需要我們自己手動刪除
sass 語法
我們能編譯 sass 文件了，接下來我們就該學(xué)習(xí)一下 sass 的語法了
為什么他這么強大，這么好用，都是靠強大的語法
.sass 和 .scss 文件的語法是一樣的，只不過區(qū)別就是 {} 和 ;
變量
定義一個變量，在后面的代碼中使用
使用 $ 來定義變量
// 定義一個 $c 作為變量，值是 紅色
$c:red;
h1{
// 在使用 $c 這個變量
color:$c;
}
上面定義的變量全局都可以使用
我們也可以在規(guī)則塊內(nèi)定義私有變量
h1{
// 這個 $w 變量只能在 h1 這個規(guī)則塊中使用
$w:100px;
width:$w;
}
嵌套
sass 里面我們最常用到的就是嵌套了
而且相當(dāng)?shù)暮糜?/p>
h1{
width:100px;
div{
width:200px;
?? }
}
// 編譯結(jié)果
h1{
width:100px;
}
h1div{
width:200px;
}
這個就是嵌套，理論上可以無限嵌套下去
ul{
width:100px;
li{
width:90px;
div{
width:80px;
p{
width:70px;
span: {
color:red;
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? }
?? }
}
嵌套中的 &
在嵌套中還有一個標(biāo)識符是 & 我們可以使用
先來看一個例子
div{
width:100px;
height:100px;
:hover{
width:200px;
?? }
}
// 我想的是 div 被鼠標(biāo)懸停的時候 width 變成 200
// 但是編譯結(jié)果卻是
div{
width:100px;
height:100px;
}
div:hover{
? width:200px;
}
和預(yù)想的結(jié)果不一樣了
這個時候就要用到 & 來連接了
div{
width:100px;
height:100px;
&:hover{
width:200px;
?? }
}
// 編譯結(jié)果
div{
width:100px;
height:100px;
}
div:hover{
? width:200px;
}
這個時候就和我需要的一樣了
群組嵌套
群組嵌套就是多個標(biāo)簽同時嵌套
div{
width:100px;
.box1,.box2,.box3{
color:red;
?? }
}
// 編譯結(jié)果
div{
? width:100px;
}
div.box1,div.box2,div.box3{
? color:red;
}
還有一種就是多個標(biāo)簽同時嵌套一個標(biāo)簽
h1,h2,h3{
width:100px;
.box{
color:red;
?? }
}
// 編譯結(jié)果
h1,h2,h3{
? width:100px;
}
h1.box,h2.box,h3.box{
? color:red;
}
嵌套屬性
在 scss 里面還有一種特殊的嵌套
叫做 屬性嵌套
和選擇器嵌套不一樣，是寫屬性的時候使用的
div{
border: {
style:solid;
width:10px;
color:pink;
?? }
}
// 編譯結(jié)果
div{
border-style:solid;
border-width:10px;
border-color:pink;
}
這個屬性嵌套還可以有一些特殊使用
div{
border:1pxsolid#333{
bottom:none;
?? }
}
// 編譯結(jié)果
div{
border:1pxsolid#333;
border-bottom:none;
}
混入
也叫 混合器
其實就是定義一個 “函數(shù)” 在 scss 文件中使用
// 定義一個混合器使用? @mixin 關(guān)鍵字
@mixinradius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
上面是定義好的一個混合器
他是不會被編譯的，只有當(dāng)你使用了他以后，才會被編譯
// 使用混合器使用 @include 關(guān)鍵字
div{
width:100px;
height:100px;
@includeradius;
}
這個就是把剛才定義的混合器拿過來使用
編譯結(jié)果
div{
width:100px;
height:100px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
混合器傳參
我們既然說了，混合器就像一個 “函數(shù)” 一樣，那么就一定可以像 “函數(shù)” 一樣傳遞參數(shù)
和 “函數(shù)” 的使用方式一樣，在定時的時候是 “形參”，在調(diào)用的時候是 “實參”
// 定義混合器
@mixinmy_transition($pro,$dur,$delay,$tim) {
-webkit-transition:$pro$dur$delay$tim;
-moz-transition:$pro$dur$delay$tim;
-ms-transition:$pro$dur$delay$tim;
-o-transition:$pro$dur$delay$tim;
transition:$pro$dur$delay$tim;
}
使用這個混合器的時候傳遞 “實參”
div{
width:100px;
height:100px;
@includemy_transition(all,1s,0s,linear);
}
編譯結(jié)果
div{
width:100px;
height:100px;
-webkit-transition:all1s0slinear;
-moz-transition:all1s0slinear;
-ms-transition:all1s0slinear;
-o-transition:all1s0slinear;
transition:all1s0slinear;
}
寫了多少個 “形參”，那么調(diào)用的時候就要傳遞多少個 “實參”
不然會報錯的
參數(shù)默認(rèn)值
我們在定義混合器的時候，也可以給一些參數(shù)寫一些默認(rèn)值
這樣一來，就可以不傳遞 “實參” 了
// 設(shè)置一些帶有默認(rèn)值的參數(shù)
@mixinmy_transition($dur:1s,$pro:all,$delay:0s,$tim:linear) {
-webkit-transition:$dur$pro$delay$tim;
-moz-transition:$dur$pro$delay$tim;
-ms-transition:$dur$pro$delay$tim;
-o-transition:$dur$pro$delay$tim;
transition:$dur$pro$delay$tim;
}
使用的時候，如果你不傳遞，那么就是使用默認(rèn)值
div{
width:100px;
height:100px;
// 使用的時候，只傳遞一個，剩下的使用默認(rèn)值
@includemy_transition(2s);
}
編譯結(jié)果
div{
width:100px;
height:100px;
-webkit-transition:2sall0slinear;
-moz-transition:2sall0slinear;
-ms-transition:2sall0slinear;
-o-transition:2sall0slinear;
transition:2sall0slinear;
}
繼承
在 sass 里面使用繼承可以大大的提高開發(fā)效率
其實繼承很簡單，就是把之前寫過的選擇器里面的內(nèi)容直接拿過來一份
div{
width:100px;
height:100px;
background-color:pink;
}
這個是之前寫過的一個規(guī)則樣式表
接下來我要寫另外一個樣式了，發(fā)現(xiàn)我要寫的一些內(nèi)容和之前這個 div 一樣，并且還有一些我自己的內(nèi)容
那么我就可以把這個樣式表先繼承下來，再寫我自己的內(nèi)容就好了
p{
@extenddiv;
font-size:20px;
color:red;
}
編譯結(jié)果
div,p{
width:100px;
height:100px;
background-color:pink;
}
p{
font-size:20px;
color:red;
}
注釋
在 scss 文件中的注釋分為幾種
編譯的時候不會被編譯的注釋
// 我是一個普通注釋，在編譯的時候，我就被過濾了
編譯的時候會被編譯的注釋
/* 我在編譯的時候，會被一起編譯過去 */
強力注釋
/*! 我是一個強力注釋，不光編譯的時候會被編譯過去，將來壓縮文件的時候也會存在 */
導(dǎo)入文件
我們剛才學(xué)過了定義變量，定義混合器
而這兩個內(nèi)容在定義過以后，如果沒有使用，是不會被編譯出內(nèi)容的
所以我們可以把變量單獨寫一個文件，混合器單獨寫一個文件，然后直接導(dǎo)入后使用
// 我是 variable.scss
$w:100px;
$h:200px;
$c:pink;
// 我是 mixin.scss
@mixinmy_transition($dur:1s,$pro:all,$delay:0s,$tim:linear) {
-webkit-transition:$dur$pro$delay$tim;
-moz-transition:$dur$pro$delay$tim;
-ms-transition:$dur$pro$delay$tim;
-o-transition:$dur$pro$delay$tim;
transition:$dur$pro$delay$tim;
}
@mixinradius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
然后在我們的主要文件中把這個兩個文件導(dǎo)入進來就行了
// 我是 index.scss
@import'./variable.scss';
@import'./mixin.scss';
div{
width:$w;
height:$h;
background-color:$c;
@includeradius;
}
h1{
@includemy_transition;
}
編譯結(jié)果
div{
width:100px;
height:200px;
background-color:pink;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
h1{
-webkit-transition:1sall0slinear;
-moz-transition:1sall0slinear;
-ms-transition:1sall0slinear;
-o-transition:1sall0slinear;
transition:1sall0slinear;
}
