css 預處理工具,可以將其編譯爲 css
基本介紹
sass/scss
- SASS 2007年誕生,最早也是最成熟的CSS預處理器,擁有ruby社區的支持和compass這一最強大的css框架
- Sass的縮排語法,對於寫慣css前端的web開發者來說很不直觀,sass 不兼容 css 代碼
- Sass3 就變成了Scss(sassy css) 與原來的語法兼容,只是用{}取代了原來的縮進
- sass 的運行 依賴於 ruby 環境(
compass 將 sass 編譯爲 css
) -
現在可用
node-sass
來編譯sass/scss
文件- node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具
- 原始的sass 是用 ruby 編寫的,所以需要 ruby 環境,libSass 是原始sass引擎的一個 c/c++ 接口,使用它編譯sass不依賴於ruby,可以使用其他語言使用libSass
- node-sass
- ruby-sass與libsass的區別
- 安裝
node-sass
時,會去GitHub 下載一個.node
的文件而這個文件託管在牆外的服務器上,所以失敗了 node-sass安裝失敗解決方案
- 以
.sass
或.scss
爲文件後綴名稱(現在一般都是用 scss)
less
- less 2009年出現,受sass的影響較大,但又使用CSS的語法,讓大部分開發者和設計師更容易上手,在ruby社區之外支持者遠超過SASS,其缺點是比起SASS來,可編程功能不夠,不過優點是簡單和兼容CSS,反過來也影響了sass演變到了scss的時代,著名的Twitter Bootstrap就是採用LESS做底層語言的。
- less 可以使用
less.js
在瀏覽器運行時中解析 less 代碼 - 也可以在 node環境中 安裝 less,提前編譯 less 文件 `npm install -g less &
lessc styles.less styles.css` (可以加參數控制編譯後的css排版及壓縮) - 以
.less
爲文件後綴名稱
stylus
- Stylus,2010年產生,來自Node.js社區,主要用來給Node項目進行CSS預處理支持,由 TJ 大神開發
- 安裝及編譯
npm install stylus -g & stylus src/
(可以加參數控制編譯後的css排版及壓縮) - 以
.styl
爲文件後綴
使用現狀
- 現在一般都是配合webpack使用這幾種預處理語言,需要先
安裝 編譯器、對應 loader
,然後再module.rules 配置其具體規則
基本語法
- less 基本語法屬於 css 風格,而 sass,stylus 利用縮進,空格,換行來減少需要輸入的 字符
-
目前 scss, stylus 也可以支持 css 風格,用大括號 來書寫
-
變量符
@ $ 無變量符號直接變量名
less @size: 10px; .box { width: @size; } scss $red: #c00; strong { color: $red; } stylus red = #c00 strong color: red css 的變量規範 /* global scope */ :root { --red: #c00; } strong { color: var(--red); }
- 變量作用域:less 惰性加載,sass,stylus 就近加載
-
嵌套語法一致,用
& 引用父集
-- 嵌套不建議超過 4 層- less 不支持跳出嵌套
- sass
@at-root
@at-root 支持參數,跳出不同的嵌套 without: all,表示所有 without: rule,表示常規css,rule是默認值 without: media,表示media without: support,@support現在使用還不廣泛 // child1 將跳出 parent 的嵌套 .parent1{ color:#f00; @at-root .child1 { width:200px; } } }
-
插值
less @prefix: ui; .@{prefix}-button { color: #333; } sass $prefix: ui .#{$prefix}-button { color: #333; } stylus prefix = ui .{prefix}-button color #333
- 混入(mixin):預處理器最精髓的功能,樣式層面上的抽象(相當於copy代碼片段)
- less 直接引入
- scss 要先聲明
@mixin
,使用時@include
- 繼承
- 函數
- 邏輯控制:sass, stylus 支持
if else for each while
, less 使用mixin when 處理
-
- 具體語法看官方文檔
總結:
- sass 大而全,出現時間最久,但依賴於 ruby (compass)
- less 可以平滑的從 css 過度而來,可以在運行時解析,邏輯功能有些缺失
- stylus 起源 nodejs 社區,語法靈活, 有一個官方開發的樣式庫 nib,同樣提供了不少好用的 mixin
Postcss 是什麼樣的一種存在?
- PostCSS 既不是預處理器也不是後處理器,而是一個平臺,其本身並不處理任何具體任務,只有當我們爲其附加各種插件之後,他才具有實用性
- PostCSS 就像是一個使能器(enabler),他可以不用完全替代現有的預處理器或後處理器,而只是作爲他們的補充工具。PostCSS的工作機制主要包含解析代碼、執行插件、渲染結果三部分:
- PostCSS 會將css代碼解析成包含一系列節點的抽象語法樹(AST, Abtract Syntax Tree)。
-
PostCSS常用插件 (用這些插件集合其實已經可以代替 三大 css 預處理器)
- cssnext, 未來語法,顏色函數...
- postcss-import, 導入文件
- autoprefixer, 自動前綴
- precss, 集成sass預處理器,功能強大包括 autoprefixer mixins
- postcss-mixins, 混合宏,是用類似sass的混合宏,不可與 precss 混用
- postcss-conditions 邏輯判斷
- ...
-
目前 Postcss 在一般項目中的用途
- 使用其
autoprefixer
插件,爲css 屬性增加前綴 - 創建
postcss.config.js
// webpack.config.js { test: /\.less$/, loader: ExtractTextWebpackPlugin.extract([ {loader: 'css-loader', options: { minimize: true }}, 'postcss-loader', // 要在預處理器處理完之後,在使用 postcss-loader 'less-loader', ]), } // postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ 'browsers': ['> 1%', 'last 2 versions'] }) ] }
- 使用其