好程序員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;}
上面定義的變量全局都可以使用
我們也可以在規則塊內定義私有變量
h1 {
// 這個 $w 變量只能在 h1 這個規則塊中使用 $w: 100px; width: $w;}
嵌套
sass 裏面我們最長用到的就是嵌套了
而且相當的好用
h1 {
width: 100px;
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;}這個時候就和我需要的一樣了
羣組嵌套
羣組嵌套就是多個標籤同時嵌套
div {
width: 100px;
.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;}
使用這個混合器的時候傳遞 “實參”
div { width: 100px; height: 100px;
@include my_transition(all, 1s, 0s, linear);}
編譯結果
div {
width: 100px;
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;}
使用的時候，如果你不傳遞，那麼就是使用默認值
div { width: 100px; height: 100px;
// 使用的時候，只傳遞一個，剩下的使用默認值
@include my_transition(2s);}
編譯結果
div {
width: 100px;
height: 100px;
-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 裏面使用繼承可以大大的提高開發效率
其實繼承很簡單，就是把之前寫過的選擇器裏面的內容直接拿過來一份
div {
width: 100px;
height: 100px;
background-color: pink;}
這個是之前寫過的一個規則樣式表
接下來我要寫另外一個樣式了，發現我要寫的一些內容和之前這個 div 一樣，並且還有一些我自己的內容
那麼我就可以把這個樣式表先繼承下來，再寫我自己的內容就好了
p {
@extend div;
font-size: 20px;
color: red;}
編譯結果
div, p {
width: 100px;
height: 100px;
background-color: pink;}p {
font-size: 20px;
color: red;}
註釋
在 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) {
-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;}@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;}
編譯結果
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: 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;
}