天天看點

好程式員web前端教育訓練分享JavaScript學習筆記SASS安裝全局 sass 環境把 index.scss 編譯,輸出成 index.css$ sass index.scss index.css實時監控 index.scss 檔案,隻要發生修改就自動編譯,并放在 index.css 檔案裡面實時監控 sass 這個目錄,隻要有變化,就會實時響應在 css 檔案夾下

  好程式員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;

繼續閱讀