談談css中的3種預處理器

這篇文章跟大家介紹一下三種css預處理器的，以及比較一下，了解他們之間的差異。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

一、介紹

CSS預處理器定義了一種新的語言，基本的想法是用一種專門的程式語言，開發者只需要使用這種語言進行程式設計工作，減少枯燥無味的CSS程式碼的編寫過程的同時，它能讓你的CSS具備更加簡潔、適應性更強、可讀性更加、層級關係更加明顯、更易於程式碼的維護等諸多好處。

css預處理器種類繁多，三種主流css預處理器是Less、Sass（Scss）及Stylus；它們各自的背景如下:

Sass：2007年誕生，最早也是最成熟的CSS預處理器，擁有ruby社群的支援和compass這個最強大的css框架。

目前受LESS影響，已經進化到了全面相容CSS的SCSS（SCSS 需要使用分號和花括號而不是換行和縮排）。

Less：2009年出現，受SASS的影響較大，但使用CSS的語法，讓大部分開發者和設計師更容易上手，在ruby社群之外支持者遠超過SASS。

其缺點是比起SASS來，可程式功能不夠。

不過優點是簡單和相容CSS，反過來也影響了SASS演變到了SCSS的時代，而著名的Twitter Bootstrap就是採用LESS做底層語言的。

Stylus：2010年產生，來自Node.js社群。

主要用來給Node專案進行CSS預處理支持，在此社群之內有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS。

二、比較

在使用CSS 預處理器之前最重要的是理解文法，幸運的是基本上大多數預處理器的語法跟CSS 都差不多。

首先Sass 和Less 都使用的是標準的CSS 語法，因此如果可以很方便的將已有的CSS 程式碼轉為預處理器程式碼，預設Sass 使用.sass 副檔名，而Less 使用. less 副檔名。

h1 {
  color: #0982C1;
}

這是一個再普通不過的，不過Sass 同時也支援老的語法，就是不包含花括號和分號的方式：

h1
  color: #0982c1

而Stylus 支援的語法要更多樣性一點，它預設使用.styl 的檔案副檔名，下面是Stylus 支援的語法：

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

可以在同一個樣式單中使用不同的變量，例如下面的寫法也不會報錯：

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請造訪：程式設計入門！ ！

以上是談談css中的3種預處理器的詳細內容。更多資訊請關注PHP中文網其他相關文章！