iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
自我挑戰組

文組視角的初學前端筆記系列 第 20

Day20 CSS預處理器是什麼?

CSS preprocessor(預處理器)是什麼?

CSS 預處理器是個能透過使用預處理器語法,編譯產生純 CSS 的程式。
要使用 CSS 預處理器,必需安裝 CSS 編譯器,在開發環境透過 CSS 預處理器編譯之後,上傳編譯好的 CSS 到伺服器。

為什麼要用CSS預處理器?

CSS 預處理器有很多選擇,預處理器有著許多原生CSS沒有的功能,例如:mixin、變數、巢狀選擇器等,而這些功能可以使 CSS 結構的可讀性更高且更容易維護。

受歡迎的 CSS 預處理器有哪些?

  • Sass
  • LESS
  • Stylus

因為只用過Sass,所以就著重於整理關於使用Sass的學習筆記。/images/emoticon/emoticon33.gif

Sass/Scss簡介

建立編譯環境

  1. 在VS Code上安裝Live Sass Complier套件

  2. 新增一個資料夾 命名為styles

  3. 在styles資料夾內,新增一個檔案,副檔名.scss (如果用sass寫,副檔名會是.sass)

  4. 試著在style.scss檔案內寫一些內容

  5. 按一下下方watch sass

  6. 按完watch sass 會跳出以下畫面

    若編譯錯誤,可以在這裡查看是哪裡寫錯

也會看到styles資料夾多出了兩個檔案

  1. 點進去編譯出的style.css檔案看

會看到經過編譯的styles.css寫了一個看不懂的字-webkit
-webkit是瀏覽器內的網頁排版引擎,負責用來處理HTML和CSS頁面
會增加這個字的原因,是為了網頁都能被任何瀏覽器所使用
參考資料:What is WebKit and how is it related to CSS?

html內的css載入連結會是編譯好的css檔案路徑,不會是寫scss檔案


Sass 原理

將css都寫在scss檔案內,編譯出一個css檔案

圖片來源:六角學院

Sass寫法

有兩種寫法: scss 和sass

圖片來源:六角學院


巢狀式寫法

使用sass的好處可以將css程式碼寫成巢狀的結構
例如:
本來css的寫法是

.header{
 width:50px;
 height:50px;
 background:#000;
}

.header ul{
 width:500px;
}

.header li{
 width:30px;
}

可以用SCSS方式寫

.header{
 width:50px;
 height:50px;
 background:#000;
 ul{
   width:500px;
   li{
    height:30px;
    }
  }
 }

或是sass寫法
用縮排的方式寫(一個tab/兩個空白)

.header
  width:50px;
  height:50px;
  background:#000;
  ul
    width:500px;
   li
     height:30px;

編譯出來就會是

如果想把header名稱改掉,只需要更動header這個字就好


變數的使用

使用變數能夠減少重複寫的屬性樣式,也方便維護程式碼

變數名稱前面會放一個$ 例如: $primarycolor: red;

經常使用到的顏色可以設定成變數
例如:

.header a{
color: #ff0000;
}
.content a{
color: #ff0000;
}
.footer a{
color: #ff0000;
}

可以將color: #ff0000;設定成變數$linkcolor: #ff0000;
這樣設定當需要更改所有連結的顏色設定時,就只需要去更改變數的值,不用一個一個去改。

$linkcolor: #ff0000; 

.header a{
color: $linkcolor;
}
.content a{
color:$linkcolor;
}
.footer a{
color: $linkcolor;
}

編譯出來的css會是

將變數改成其他顏色,原本寫變數的地方也會跟著變動,非常方便


用 & 來新增偽類

例如:

.header{
  background-color:aqua; 
  h1{
    color: red;
  }
  &:hover{
    background-color: green; 
  }
 } 

編譯出來會是


使用 @import 來拆分檔案

可以新增好幾個scss檔案來管理

再用一個all.scss檔案編譯出css檔案


圖片來源:六角學院

SCSS結構參考

@import "variable";// 變數  
@import "reset";  // reset.css  
@import "layout"; // 共同框架,第一層
@import "index";     
@import "page1";     

Sass 7-1 Pattern

可以使用Sass 7-1 Pattern來區分Sass

  • base
  • components
  • layout
  • pages
  • themes
  • utils
  • vendors
    以及主要引入的檔案
    all.scss or main.scss

參考資料: 淺談 CSS 設計模式系列-Sass 7-1 Pattern 篇
,Sass Guidelines


使用@mixin客製化常用的css樣式

可以將常使用的css技巧做成@mixin,方便使用
例如:
將圖片取代文字的技巧命名成 hide-text
在要使用的地方寫 @include hide-text; 就可以套用上

@mixin可以搭配變數一起使用
例如:


參考資料: 前端中階:CSS 預處理器,CSS preprocessor, 2021網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more), 六角學院-一變應萬變的響應式網頁設計

以上為個人學習筆記整理
若有錯誤,歡迎指正


上一篇
Day19 CSS Transform
下一篇
Day21 切版筆記- 圖文滿版區塊
系列文
文組視角的初學前端筆記30

尚未有邦友留言

立即登入留言