前端再加強!開始使用SASS加速你的專案開發吧!

作者murmur

很~久沒更新了,我知道!這段時間都在忙Vue的一些專案協作,不得不說Vue這個框架實在很有趣,但我目前的熟練度還不足以寫成教學文章,應該會在node文章告一段落後開始寫Vue的學習紀錄!敬請期待!

前言

Sass一直被譽為前端開發者必學的一個工具,今天就來介紹一下到底什麼是Sass為什麼我要用它以及一些簡單的實作! Let’s go~!

什麼是Sass/Scss?

到底什麼是Sass? 它跟Scss有什麼關係嗎?
Sass全名為( Syntactically Awesome Style Sheets),是一種CSS的擴充功能,能藉由使用變數、行間import、巢狀結構等功能幫助你快速且有條理的寫CSS, 而Scss是Sass3之後推出的新版本,不但繼承了Sass強大的功能,語法還與CSS3完全的兼容,也就是說你可以用你更為熟悉的方式學習這個強大的工具!

為什麼我需要會Sass/Scss?

我現在Css寫得好好的~突然又要我學新東西!幹嘛啊!!!

也許你心裏會這樣murmur,我們照老樣子舉個例子來看一下吧!

  你花了4天的時間好不容易完成客戶要求的切版,當你信心滿滿的提交你的作品時,客戶突然跟你說一句:「欸豆,我們突然覺得我們之前要紅色的部分不是這麼恰當,可以改成水藍色讓我看看效果嗎?」
  於是你咬著牙,在心裡跟他的18代祖宗問好之後,把專案中所有之前用紅色的地方全~部改為水藍色,一行一行的複製貼上,反覆檢查後再次向客戶提交,客戶突然跟你說......

接著的故事內容我想就不用多說了,很多時候為了確保設計的一致,在你的頁面中會有許許多多的元件都套用相同的樣式,日後若想做個小變更便會出現以上的糾結,而這些都可以透過Sass/Scss的強大功能來解決! 下面我們就介紹如何使用Sass/Scss以及一些基本的用法!

前置動作

如果你跟我一樣是用VS code寫專案的話,那首先請你到extention部分搜尋live sass compiler並安裝,live sass compiler 是一種將Sass/Scss轉為瀏覽器理解的CSS語言的小工具!

而如果你是利用codepen或是jsfiddle想體驗一下的話,只要在設定的部分選用Sass預處理就可以囉!

準備基本的index.html & style.scss檔案

在你的專案目錄下,請你新增簡單的index.html檔案,裡面你可以隨意放上一些內容。

index.html

<body>
  <header>
    <h1>hello my dear</h1>
    <button>click me</button>
  </header>
  <div class="contact">
    <h1>I'm Danny</h1>
    <p>I do nothing</p>
  </div>
</body> 

並建立一個style資料夾,裡面包含一個空白的style.scss檔案,請你先在樣式中隨意改動header的樣式。

style.scss

header {
  background: green;
} 

接著點選右下的compiler 套件,它會幫我們把Scss檔案轉為css檔案

完成後你的專案結構應該變成這樣,在style資料夾下增加了兩個css檔案。

打開compiler幫你產生的css檔案,你會發現看起來跟你剛剛寫的東西沒什麼不同!原因就像我開場說的,scss的語法上與CSS3兼容,所以你看起來會覺得非常的熟悉~!

style.css

header {
  background: green;
}
/*# sourceMappingURL=style.css.map */ 

基本用法介紹

以下我會介紹幾個sass/scss最常用到的幾個功能,基本上以程式碼為主!
基本上會是一步步往下深入,過程中可以經常回去比較scss檔案與產生的css檔案內容上的差異,你就可以比較了解scss是如何被編譯成我們熟悉的css!

變數使用

當我們今天想在scss檔案中使用變數,寫法相當的容易,請你觀察以下的程式碼應該就可以了解使用的方法。

style.scss

$backgroundColor :green ;

header {
  background: $backgroundColor;
} 

當你在使用變數時,只要在宣告以及使用時都加上$便可輕鬆的在scss檔案中使用變數。

階層/巢狀結構

回頭看一下我們的html結構,在header內有個h1、而在下方的div中也有個h1,如果你想修改header內的h1,作法應該會像是這樣。

header h1 {
   color:#fff;
}

但在scss檔案中,你只要統一寫在header內就可以了,compile出來的結果會與上方的寫法一模一樣,如下。

header {
  background: $backgroundColor;
  h1 {
    color: #fff;
  }
} 

這樣的階層寫法讓人更清楚每個元素間的關係,在後續維護上也較為方便!

偽元素/偽類的使用(pseudo)

在scss中使用偽元素/偽類也非常簡單,假設我今天想對header中的按鈕做簡單的hover效果,並在按鈕的後方加入幾行字,程式碼就可以這樣寫。

style.scss

$backgroundColor :green ;

header {
  background: $backgroundColor;

  h1 {
    color: #fff;
  }
  
  button {
    &:hover {
      background: #df21fa;
    }

    &::after {
      content: 'clickkkkkkkkk'
    }
  }
} 

當你想加上偽類/偽元素時,只要在想套用的元素上加上&便可輕鬆的在scss檔案中使用偽類/偽元素。

集中管理變數/元件

聰明的你應該想到了,當專案結構變大時,宣告的變數、不同的元件如果都放在同一個檔案中那怎麼稱得上維護容易? 要將變數/元件獨立出來的做法也相當容易,基本的觀念就是把相關的元件集中成一個scss檔案,日後在修改時就可以快速找到要修改的地方。

我們先來處理變數,首先我們在style資料夾下建立一個_variables.scss檔案(_底線只是習慣,並不影響執行),然後把我們放在style.scss的變數放進來。

_variables.scss

$backgroundColor :green ; 

當你只做到這步的時候,你會發現下方的終端機跳出了錯誤。

原因相當的單純,在不同檔案間的變數或樣式需要透過引入(import)來使用,所以請你回到style.scss檔案,在最上方進行變數檔案的引入

style.scss

@import "./variables"; 加入這行 注意一下你這邊並不需要打_variables

header {
  background: $backgroundColor;

  h1 {
    color: #fff;
  }
  
  button {
    &:hover {
      background: #df21fa;
    }

    &::after {
      content: 'clickkkkkkkkk'
    }
  }
} 

同樣的作法你也可以用在元件的管理上,獨立出一個_header.scss檔案來管理header吧!最後別忘了回到style.scss引入,這時候你會發現原本的檔案變得超~乾淨的!

style.scss

@import "./variables"; 這邊務必注意引入的順序,由於我們在header中有使用變數 所以變數的檔案需要先引入 
@import "./header" ;

Mixin

Mixin的概念也許你會比較陌生,不過你可以把它想成一組你常用的樣式,比方說今天你在處理h1的時候你有固定一套樣式,但你只想在部分的區塊套用這樣的樣式,那mixin就派上用場囉!
一樣我們先觀察一下程式碼,用法跟宣告變數時相當類似。

_header.scss

@mixin h1Text {
  font-weight: 400;
  text-align: center;
  font-size: 28px;
} 
 header {
  background: $backgroundColor;

  h1 {
    @include h1Text();
    color: #fff;
  }
  
  button {
    &:hover {
      background: #df21fa;
    }

    &::after {
      content: 'clickkkkkkkkk'
    }
  }
} 

在上方的程式碼中,我們宣告了一個名為h1Text的樣式組合,之後在h1元素中利用include語法來引入,注意一下mixin是個可以傳入參數的函式在使用時務必加上括號!加入參數的用法之後再提,文章的長度已經超出我預期了XD

extend

最後一個要提到的功能便是 extend,從字面上的意思你就能了解它是用在某個樣式的延伸,也就是重複使用樣式的概念,聽到這邊我想敏銳的你已經發現一些問題了,我們等等一起做說明,先看一下用法。

今天我想在下方的div套用我在header的所有樣式,我便可以利用extend達成這樣的效果。

style.scss

@import "./variables";
@import "./header";

.contact {
  @extend header;
} 

基本用法相信你也看出來了, " @extend “你想繼承的元素" " 使用上相當的方便。

但你可能會好奇,欸?這個mixin不是也做得到相同的事情嗎? 沒錯!兩者經常被拿出來做比較,比較顯著的差異在於mixin可以傳述參數做出不同的樣式,舉個例子來說:「今天你想在不同的區塊呈現樣式相同,但內容不同的錯誤訊息」,這種情境下mixin很明顯會比extend來得好用一些!

結語

這篇文章我們介紹了Sass/Scss與它的一些基本用法,即便只是介紹了幾個常用的手法,依然可以看出為什麼sass被譽為必學的技能之一!未來應該會多開一篇文章講一些進階用法,同時介紹一下如何在前端框架中使用Sass/Scss!

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s