berylgobby 發表於 2018-12-25 10:10:42

網頁設計教學:一次讓你搞懂SASS

文、菜鳥編
https://www.lccnet.com.tw/lccnet/Upload/Article/news-1431.jpg

原文網址




Sass是什麼?簡單的說就是CSS的預處理器,可以提升編寫網頁CSS效率的程式語言。至於能提升多少,真的只能說看個人需求,假使你今天是一位剛步入網頁領域的菜鳥,可能一時間真的沒法感受到預處理器帶來的好處。但當你逐漸長大,開始負責大型的案子,相信你應該不會想要在一堆沒有整理過的code找到你要的內容。Sass簡單的說就是,「減少重複樣式的編碼撰寫」、「將樣式重複使用,降低多餘的編碼在開發環境中影響效率」。

這類的預處理器也不只有Sass,還有LESS、Stylus等…,各有其特色在,今天要介紹的Sass你也有耳聞到跟它名稱類似的Scss。這兩個是兄弟?有什麼差別?由於Sass是以縮進方式編寫,類似python,不具大括弧與分號格式,但也因如此,無法直接將大家最熟悉的CSS編寫方式直接套用,所以在初期並未受到已習慣純CSS方式的人青睞。不過在Sass 3進行了改良,引入新的語法,採用大家最習慣的CSS撰寫方式,具有大括弧與分號格式,語法完全兼容CSS3,並且繼承了Sass的強大功能。所以你曾經寫過的CSS檔案也可直接套用在SCSS上。

下面是Sass與Scss編碼上的差異:

SASS:
      #siderbar
               width :60%
               background-color :#faa
               .menu
                     width :50%



SCSS:
       #siderbar {
                width :60%;
                background-color :#faa;
                .menu {
                        width :50%;
                }
      }



CSS:
      #siderbar {
                width :60%;
                background-color :#faa;
      }      
            #siderbar.menu {
                  width :50%;
      }



大致上了解了什麼是預處理,接著就進入主題來介紹Sass,這邊的案例會以Scss編寫,由於Scss是繼承了Sass,所以不論你選擇是哪一種預處理器來使用,觀念都是一樣的。




環境的建置:

每個人習慣的開發工具不同,這邊以vscode為例,其他的使用者可以在網路上找到對應的資料。這邊會使用到的套件為「Live Sass Compiler」。

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405475.png


透過命令選擇區( Ctrl + Shift +P ),可找到相關指令,其中「Live Sass:Watch Sass」就可以將工作區內的Scss檔案編譯成CSS,並同時監聽。

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405526.png



另一個方式就是點擊vscode底部的「Watch my Sass」。

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405537.png


經過編譯後,會在專案資料中產生與scss檔案相同名稱的CSS。

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405562.png




變數:
在Sass開發中,我們可以將專案中經常會使用到的設定值以變數方式來規劃,例如、字體格式、大小、顏色等…。使用「$」來定義變數,例如下面的定義:


SCSS:
            $color-White :#fff;//定義白色
            $color-green :#50b550;//定義綠色
            $font-size :16px;//定義基本文字大小

      //樣式宣告
      .title_1 {
                background-color :$color-green;
                color :$color-White;
                font-size :$font-size * 1.6;
      }



變數的宣告並不會在編譯後的CSS中出現。


CSS:
      .title_1 {
                background-color :#50b550;
                color :#fff;
                font-size :25.6px;
      }



上面的案例可以看到font-size部分使用了乘法,在Sass中變數具有加減乘除的運算能力。但可別以為只有數字的變數可以進行運算,就連顏色都沒問題。


SCSS:
            $color-green :#50b550;//定義綠色

      .box_1 {
                background-color :$color-green;
      }

      .box_2 {
                background-color :$color-green / 2;
      }

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405661.png

做設計的都知道,不可能有一次就到位的狀況,客戶或是老闆一定會用他那專業度的美感請你修正。這時,變數的好處你馬上就能體會,僅需要修改參數設定即可,不需要再針對code逐次的修改。而運算更可以省去按計算機的時間,尤其當你要將一個寬度1000px劃分9個區塊時就相當方便。




巢狀:
巢狀用來明確定義階層,省去編碼重複的填寫與可讀性提升外,在管理與維護上都會方便許多。

以下是我們很常看到的項目清單CSS內容


CSS:
      ul {
                list-style :none;
      }

      ulli {
                display :inline-block;
                padding :10px;
      }

      ullia {
                color :#888;
                font-size :16px;
      }



使用Sass巢狀方式,就可以簡化如下,在編譯成CSS代碼時,巢狀就如同父級與子元素的關係。


SCSS:
      ul {
                list-style :none;
                li {
                        display :inline-block;
                        padding :10px;
                        a {
                              color :#888;
                              font-size :16px;
                        }
                }
      }



另外有一種狀況並非是父子關係而是同層關係,例如選擇器,以下面hover的案例,就會加上「&」符號來代表與父級為同層。所以當使用「>、~、+ …」等的選擇器就可以用這方式來表達。


SCSS:
      .box_3 {
                background-color :$color-green;
                &:hover {
                        background-color :#888;
                }
      }


CSS:
      .box_3 {
                background-color :#50b550;
      }

      .box_3:hover {
                background-color :#888;
      }




Mixin:
可以把Mixin想成是一堆值的群組,以下面的code來說,使用@mixin定義了名稱為「circle」的mixin涵式。在circle上宣告了$w、$r兩個變數,並分別給予預設值100px、20%。

SCSS:
      @mixincircle ($w :100px, $r :20%) {
                width :$w;
                height :$w;
                border-radius :$r;
                background-color :$color-green;
      }


涵式宣告完成後,引入方式則是透過@include,下方code「.box_4」直接引用circle涵式,「.box_5」另外給三個變數新的值。



SCSS:
      .box_4{
                @include circle;
      }   


      .box_5{
                @include circle(150px, 50%);
      }      


完成後的結果如下,在沒有給變數定義新的值時,就會以預設的值來編譯。
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405704.png

※Sass中的mixin函數引用也可使用「+」。


SASS:
      .box
                +circleSass


Mixin的使用可以省去重複相同CSS樣式的編寫,例如最常使用的垂直置中就可利用mixin引入的方式,適應不同的區塊大小。





Import:
一個比較大型的網站開發,如果將所有樣式都放在同一個CSS檔案不是一個很好的方式,程式碼動則幾千行,非負責的開發人員,要馬上了解樣式的內容可就不是一件簡單的事情。所以在開發中會將CSS程式碼切成好幾份來做管理,最後再編譯合併成一個CSS檔案。

透過import就可以將相關檔案載入。以下圖來說,將專案切分成三個檔案來管理,最後再將三個檔案彙整在main.css裡。

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405727.png

在main.scss上加上這3行。


SCSS:
      @import"base/head ";
      @import"base/body ";
      @import"base/footer ";


不曉得你有沒有發現檔案名稱前面都有加上「_ 」?其實目的是要在編譯的過程中,將這些檔案排除掉,不會轉換成CSS格式。而加上下底線就是方便讓編譯的程式判別,最後僅需對main.scss編譯成main.css。




Extend:
CSS重複的代碼越多,除了造成檔案變大外,相對的在網頁讀取時就會影響到SEO的品質分數了。因此在開發過程中會將相同樣式的的內容合併起來方便管理,例如下圖中的「.box」。


CSS​

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405854.png

在純CSS狀況下,就必須要在html中將對應的元素的class加上box。當編碼很多的狀況下,就必須不斷的切換檔案,影響到專注度。而Sass中的繼承(extend)就可以解決這問題。

以上面案例來說,將.box改為「%boxAll」,其中boxAll為合併樣式的名稱。

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405887.png

在後續編寫中,遇到要使用相同格式的,就不需要在切換到HTML中添加class名稱,直接在目前編寫的樣式中加入「@extend %boxALl」。


Scss

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405901.png

編譯後,就會將code中繼承的合併在一起。


CSS

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405927.png

有些人可能會感覺跟@mixin很像,到底要怎麼用比較適合?就以代碼是否需要修改來判定吧!假使今天的樣式是固定不需要修改,也就你不需要以@mixin中變數的來修改外觀。那使用@extend會比較適合。




進階應用:
前面我們有提到變數的應用,不過變數可並不是只能存放單一資料,也可存放多個資料型態中,也就是接下來會提到的「陣列」與「物件」。舉個例子,在開發過程中,我們一定會針對某項設定定義多個變數,例如,網頁視覺色、字體、尺寸…等,就可以將同類型的變數透過「List」或是「Map」來歸納整理。




List(陣列):
下面的例子宣告了一個名為color的變數,並使用陣列方式宣告了三個顏色。


SCSS:
      $color :#fff, #7d3a3a, #f67070;


透過nth(變數,索引) 來引用List中的資料,例如下方「.p1」使用了變數$color中的第2個索引值,也就是「#7d3a3a」。


SCSS:
      .p1 {
                color :nth($color, 2);
      }

      .p2 {
                color :nth($color, 3);
      }


HTML:
                <p class ="p1">這是使用nth($color,2)</p>
                <p class ="p2">這是使用nth($color,3)</p>




結果如下:

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405955.png


Map(物件):
物件與陣列不一樣的地方在於Map可自訂每個資料的鍵名,以下面來說,定一了一個名為btnColorChange的變數,用來設定按鈕在滑鼠hover時的顏色變化。其中Default與hover就是鍵名,#afd5e6與#7f99a5就是對應的鍵值。


SCSS:
      $btnColorChange :(
                default :#afd5e6,
                hover :#7f99a5,
      );





引用方式透過map-get(變數,鍵名) 來取得


SCSS:
      .btn {
                background-color :map-get($btnColorChange, default);
                &:hover {
                        background-color :map-get($btnColorChange, hover );
                }
      }



完成如下:

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1545405972.gif




Function(涵式):
如果有javascript或是其他程式語言背景的人,看到上面的List與Map是不是非常熟悉?其實Sass本身還提供了一些好用的函式,也可自訂函式使用,靈活度相當大,以上面的例子來說,也可透過if的判斷涵式可以將code修改如下:

將按鈕有關的變數以名稱為btnColor的map編寫,並在@mixin引用if判斷式來完成按鈕hover前後背景與文字的顏色變化。


SCSS:
      $btnColor :(
                bgDefault :#afd5e6,
                bgHover :#7f99a5,
                textColorDefault :#000,
                textColorHover :#fff,
      );

      @mixinbtnColorChange ($status) {
                @if$status == default {
                        background-color :map-get($btnColor, bgDefault );
                        color :map-get($btnColor, textColorDefault );
                }@else{
                        background-color :map-get($btnColor, bgHover );
                        color :map-get($btnColor, textColorHover );
                }
            }


原本按鈕的編碼就省略了許多,在開發中就可省去許多重複編碼的出現,執行中如果要修改顏色,也僅需要調整$btnColor變數內的鍵值就可以。


SCSS:
      .btn {
                @include btnColorChange(default);
                &:hover {
                        @include btnColorChange(hover);
                }
      }





這篇文章的介紹也只是Sass的功能一部分,如果想要深入了解函式的功能可以參考這裡。

前端設計人員要學習的內容很多,但重點不是要會,而是要能幫助你提升開發效率才是重點,如同文章一開始所提的,如果只是寫寫個小網頁,你可能會覺得光學習與習慣sass就需要不少時間成本,可能划不來。但如果是站在整個專案維護的角度來看,Sass就是一個不錯的選擇,可在修改內容時,不用在一堆碼海中找到目標,對於其他人來了解你的內容也會比較快速。

如果你覺得這篇文章很實用,也別忘了分享給你的親友們,相信對他們一定很有幫助!




延伸閱讀聯成電腦網頁設計教學:一次就讓你搞懂Flexbox聯成電腦網頁設計教學:CSS置中的6個方法聯成電腦網頁設計教學:推薦給前端設計的10個Chrome外掛聯成電腦網頁設計教學:免P圖就有濾鏡效果聯成電腦網頁設計教學:檢視不同裝置畫面的好工具

官方網站:http://www.lccnet.com.twFB粉絲團:https://www.facebook.com/lccnetzone菜鳥救星:https://www.facebook.com/greensn0w

頁: [1]
查看完整版本: 網頁設計教學:一次讓你搞懂SASS