CSS預編譯器

零.CSS預編譯器

CSS預處理器是指對生成CSS前的某一語法的處理。CSS預處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，供項目使用

CSS預處理器為CSS增加一些編程的特性，如增加了規則、變數、混入、選擇器、繼承等等特性，無需考慮遊覽器的兼容性問題

 有助於更好地組織管理樣式文件，以及更高效地開發項目

下面介紹主流的CSS預編譯器三劍客：

一. CSS預編譯器三劍客（Sass、Less、Stylus)

　　Sass：Sass包括兩套語法。最開始的語法叫做”縮進語法”，使用縮進來區分程式碼塊，並且用回車將不同規則分隔開（不使用{}和；）。

　　而新的語法叫做「SCSS」，使用和CSS類似的塊語法，使用大括弧將不同的規則分開，分號將具體的樣式分開。這兩套語法通過.sass和.scss兩個文件擴展名區分開

　　1.使用：

　　　　通過VSCode安裝Live Sass Compiler插件等方法…

　　2.CSS功能擴展：

2.1：嵌套規則

Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器，例如：

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

嵌套功能避免了重複輸入父選擇器，而且令複雜的 CSS 結構更易於管理，編譯後：

#main {
  width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
      font-weight: bold; 
}
#main pre {
    font-size: 3em; 
}

2.2：父選擇器&

在使用2.1嵌套規則時，有時也需要使用嵌套外層的父選擇器，例如，給某個元素設定hover樣式時

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

編譯後：CSS 文件中&將被替換成嵌套外層的父選擇器，如果含有多層嵌套，最外層的父選擇器會一層一層向下傳遞

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
    text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

#main {
  color: black; 
}
#main a {
    font-weight: bold; 
}
#main a:hover {
      color: red; 
}

2.3：屬性嵌套

個別 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。

為了便於管理這樣的屬性，同時也為了避免了重複輸入，Sass 允許將屬性嵌套在命名空間中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

　　編譯為：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

2.4：變數$

Sass最普遍的用法就是變數，以$開頭，複製與css屬性寫法一樣，直接調用即可 

$width: 100px


#main {
  width: $width;
}

變數支援塊級作用域，嵌套規則內定義的變數只能在嵌套規則內使用（局部變數），不在嵌套規則內定義的變數則可在任何地方使用

（全局變數）

將局部變數轉換為全局變數可以添加 !global 聲明：

#main {
  $width: 5em !global;//局部變數轉全局變數
  width: $width;
}

#sidebar {
  width: $width;
}

編譯為:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

2.5：運算

所有數據類型均支援 == 或 != ,此外，每種數據類型也有各自支援的運算方式

目前感覺這個運算用處不大，但今後遇到某個項目也可能會用到

2.6：@-Rules與指令

2.6.1：Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件，被導入的文件將合併編譯到同一個 CSS 文件中，

另外，被導入的文件中所包含的變數或者混合指令 (mixin) 都可以在導入的文件中使用。

@import "foo.scss";

@import "foo";

都會導入文件foo.scss

如果需要導入SCSS或者Sass文件，但不希望編譯成CSS文件，在文件名前添加下劃線即可

例如，將文件命名為 _colors.scss，便不會編譯成_colors.css 文件。

2.6.2：Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點額外的功能：允許其在 CSS 規則中嵌套

如果 @media 嵌套在 CSS 規則內，編譯時， @media 將被編譯到文件的最外層，包含嵌套的父選擇器

這個功能讓 @media 用起來更方便，不需要重複使用選擇器，也不會打亂 CSS 的書寫流程

@media 可以使用 Sass（比如變數，函數，以及運算符）代替條件的名稱或者值：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯為：

.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    } 
}

2.6.3：@extend ，告訴 Sass 將一個選擇器下的所有樣式繼承給另一個選擇器。 

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

2.7：Mixin

Mixin用於定義可重複使用的樣式，避免了使用無語意的 class，比如.float-left

混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變數，輸出多樣化的樣式

混合樣式中也可以包含其他混合樣式

2.7.1：定義Mixin 

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

2.7.2：引用Mixin

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

編譯為：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

2.7.3：Mixin參數 

@mixin sexy-border($color, $width：10px) { //默認值
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

編譯後

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

@Mixin 可以用 = 表示，而 @include 可以用 + 表示

2.8：函數

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
#sidebar {width: 240px; } //編譯結果

Less：Less是一門向後兼容的CSS擴展語言，語法上和Sass有很大的共性，它受Sass的影響，但對後來引入的SCSS格式有影響

Stylus：在 stylus 中同樣可以使用變數、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，使用時需要Node.js

基本使用：

$background-color = lightblue
add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

編譯後

.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

PostCSS：一個用 JavaScript 工具和插件轉換 CSS 程式碼的工具

特點：

    • 增加程式碼的可讀性：可自動添加屬性前綴
    • 可使用最新的CSS語法，如變數定義
    • 可模組化CSS，CSS Modules
    • 可檢查CSS語法錯誤，避免出錯
    • 強大的格子系統LostGrid

二.異同點

Less與Sass的異同：

　　異：

    • 混入(Mixins)——class中的class
    • 參數混入——可以傳遞參數的class，就像函數一樣
    • 嵌套規則——Class中嵌套class，從而減少重複的程式碼
    • 運算——CSS中用上數學
    • 顏色功能——可以編輯顏色
    • 名字空間(namespace)——分組樣式，從而可以被調用
    • 作用域——局部修改樣式
    • JavaScript 賦值——在CSS中使用JavaScript表達式賦值

同：

    • Less是基於JavaScript，是在客戶端處理的；Sass是基於Ruby(一種簡單快捷的面向對象的腳本語言)，是在伺服器端處理的
    • 關於變數在Less和Sass中的唯一區別就是Less用@，Sass用$
    • 輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded
    • Sass支援條件語句，可以使用if{}else{},for{}循環等等，而Less不支援

 三.總結

為CSS增加一些編程的特性，如規則、變數、混入、選擇器、繼承等等特性，上手都很簡單

(CSS的調試，需要編譯，文件過大都是預處理器的缺點)

 

參考：

　　Stylus的基本使用

　　Less與Sass的異同？

　　什麼是CSS預處理器？

　　Sass中文網

VirMach 便宜 VPS

QNews

QNews