好程式員web前端教育訓練分享JavaScript學習筆記SASS,世界上最成熟、最穩定、最強大的專業級CSS擴充語言!
sass 是一個 css 的預編譯工具
也就是能夠 更優雅 的書寫 css
sass 寫出來的東西 浏覽器不認識
依舊是要轉換成 css 在浏覽器中運作
這個時候就需要一個工具來幫我們做
安裝 sass 環境
以前的 sass 需要依賴一個 ruby 的環境
現在的 sass 需要依賴一個 python 的環境
但是我們的 node 強大了以後,我們隻需要依賴 node 環境也可以
需要我們使用 npm 安裝一個全局的 sass 環境就可以了
安裝全局 sass 環境
$ npm install sass -g
編譯 sass
有了全局的 sass 環境以後
我們就可以對 sass 的檔案進行編譯了
sass 的檔案字尾有兩種,一種是 .sass 一種是 .scss
他們兩個的差別就是有沒有 {} 和 ;
.scss 檔案
h1 {
width: 100px;
height: 200px;}
.sass 檔案
h1 width: 100px height: 200px
.scss 檔案
h1 { width: 100px; height: 200px;}
我們比較常用的還是 .scss 檔案
因為 .sass 我們寫不習慣,當然,如果你能寫習慣也比較好用
我們先不管裡面的的什麼内容,至少這個 .scss 或者 .sass 檔案浏覽器就不認識
我們就要用指令把 這兩種 檔案變成 css 檔案
把 index.scss 編譯,輸出成 index.css$ sass index.scss index.css
這樣我們就能得到一個 css 檔案,在頁面裡面也是引入一個 css 檔案就可以了
實時編譯
我們剛才的編譯方式隻能編譯一次
當你修改了檔案以後要從新執行一遍指令才可以
實時編譯就是随着你檔案的修改,自動從新編譯成 css 檔案
也是使用指令來完成
實時監控 index.scss 檔案,隻要發生修改就自動編譯,并放在 index.css 檔案裡面
$ sass --watch index.scss:index.css
然後你隻要修改 index.scss 檔案的内容,index.css 檔案中的内容會自動更新
實時監控目錄
之前的實時監控隻能監控一個檔案
但是我們有可能要寫很多的檔案
是以我們要準備一個檔案夾,裡面放的全部都是 sass 檔案
實時的把裡面的每一個檔案都編譯到 css 檔案夾裡面
依舊是使用指令的形式來完成
實時監控 sass 這個目錄,隻要有變化,就會實時響應在 css 檔案夾下
$ sass --watch sass:css
這樣,隻要你修改 sass 檔案夾下的内容,就會實時的相應在 css 檔案夾中
你新添加一個檔案也會實時響應
但是你删除一個檔案,css 檔案夾中不會自動删除,需要我們自己手動删除
sass 文法
我們能編譯 sass 檔案了,接下來我們就該學習一下 sass 的文法了
為什麼他這麼強大,這麼好用,都是靠強大的文法
.sass 和 .scss 檔案的文法是一樣的,隻不過差別就是 {} 和 ;
變量
定義一個變量,在後面的代碼中使用
使用 $ 來定義變量
// 定義一個 $c 作為變量,值是 紅色
$c: red;h1 {
// 在使用 $c 這個變量 color: $c;}
上面定義的變量全局都可以使用
我們也可以在規則塊内定義私有變量
// 這個 $w 變量隻能在 h1 這個規則塊中使用 $w: 100px; width: $w;}
嵌套
sass 裡面我們最長用到的就是嵌套了
而且相當的好用
div {
width: 200px;
}}// 編譯結果h1 {
width: 100px;}h1 div {
width: 200px;}
這個就是嵌套,理論上可以無限嵌套下去
ul {
width: 100px;
li {
width: 90px;
div {
width: 80px;
p {
width: 70px;
span: {
color: red;
}
}
}
}}
嵌套中的 &
在嵌套中還有一個辨別符是 & 我們可以使用
先來看一個例子
div { width: 100px; height: 100px;
:hover { width: 200px;
}}// 我想的是 div 被滑鼠懸停的時候 width 變成 200// 但是編譯結果卻是div { width: 100px; height: 100px;}div :hover { width: 200px;}
和預想的結果不一樣了
這個時候就要用到 & 來連接配接了
div { width: 100px; height: 100px;
&:hover { width: 200px;
}}// 編譯結果div { width: 100px; height: 100px;}div:hover { width: 200px;}
這個時候就和我需要的一樣了
群組嵌套
群組嵌套就是多個标簽同時嵌套
.box1, .box2, .box3 {
color: red;
}}// 編譯結果div {
width: 100px;}div .box1, div .box2, div .box3 {
color: red;}
還有一種就是多個标簽同時嵌套一個标簽
h1, h2, h3 { width: 100px;
.box { color: red;
}}// 編譯結果h1, h2, h3 { width: 100px;}h1 .box, h2 .box, h3 .box { color: red;}
嵌套屬性
在 scss 裡面還有一種特殊的嵌套
叫做 屬性嵌套
和選擇器嵌套不一樣,是寫屬性的時候使用的
div { border: { style: solid; width: 10px; color: pink;
}}// 編譯結果div { border-style: solid; border-width: 10px; border-color: pink;}
這個屬性嵌套還可以有一些特殊使用
div { border: 1px solid #333 { bottom: none;
}}// 編譯結果div { border: 1px solid #333; border-bottom: none;}
混入
也叫 混合器
其實就是定義一個 “函數” 在 scss 檔案中使用
// 定義一個混合器使用 @mixin 關鍵字@mixin radius { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
上面是定義好的一個混合器
他是不會被編譯的,隻有當你使用了他以後,才會被編譯
// 使用混合器使用 @include 關鍵字div { width: 100px; height: 100px;
@include radius;}
這個就是吧剛才定義的混合器拿過來使用
編譯結果
div { width: 100px; height: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
混合器傳參
我們既然說了,混合器就像一個 “函數” 一樣,那麼就一定可以像 “函數” 一樣傳遞參數
和 “函數” 的使用方式一樣,在定時的時候是 “形參”,在調用的時候是 “實參”
// 定義混合器@mixin my_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;}
使用這個混合器的時候傳遞 “實參”
@include my_transition(all, 1s, 0s, linear);}
height: 100px;
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;}
寫了多少個 “形參”,那麼調用的時候就要傳遞多少個 “實參”
不然會報錯的
參數預設值
我們在定義混合器的時候,也可以給一些參數寫一些預設值
這樣一來,就可以不傳遞 “實參” 了
// 設定一些帶有預設值的參數@mixin my_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;}
使用的時候,如果你不傳遞,那麼就是使用預設值
// 使用的時候,隻傳遞一個,剩下的使用預設值
@include my_transition(2s);}
-webkit-transition: 2s all 0s linear;
-moz-transition: 2s all 0s linear;
-ms-transition: 2s all 0s linear;
-o-transition: 2s all 0s linear;
transition: 2s all 0s linear;}
繼承
在 sass 裡面使用繼承可以大大的提高開發效率
其實繼承很簡單,就是把之前寫過的選擇器裡面的内容直接拿過來一份
background-color: pink;}
這個是之前寫過的一個規則樣式表
接下來我要寫另外一個樣式了,發現我要寫的一些内容和之前這個 div 一樣,并且還有一些我自己的内容
那麼我就可以把這個樣式表先繼承下來,再寫我自己的内容就好了
p {
@extend div;
font-size: 20px;
color: red;}
div, p {
background-color: pink;}p {
注釋
在 scss 檔案中的注釋分為幾種
1、編譯的時候不會被編譯的注釋
// 我是一個普通注釋,在編譯的時候,我就被過濾了
2、編譯的時候會被編譯的注釋
/ 我在編譯的時候,會被一起編譯過去 /
3、強力注釋
/! 我是一個強力注釋,不光編譯的時候會被編譯過去,将來壓縮檔案的時候也會存在 /
導入檔案
我們剛才學過了定義變量,定義混合器
而這兩個内容在定義過以後,如果沒有使用,是不會被編譯出内容的
是以我們可以把變量單獨寫一個檔案,混合器單獨寫一個檔案,然後直接導入後使用
// 我是 variable.scss$w: 100px;$h: 200px;$c: pink;// 我是 mixin.scss@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
transition: $dur $pro $delay $tim;}@mixin radius {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;}
然後在我們的主要檔案中把這個兩個檔案導入進來就行了
// 我是 index.scss@import './variable.scss';@import './mixin.scss';div {
width: $w;
height: $h;
background-color: $c;
@include radius;}h1 {
@include my_transition;}
height: 200px;
background-color: pink;
border-radius: 10px;
}
-webkit-transition: 1s all 0s linear;
-moz-transition: 1s all 0s linear;
-ms-transition: 1s all 0s linear;
-o-transition: 1s all 0s linear;
transition: 1s all 0s linear;