CSS預編譯器

sass 必須先安裝ruby,再安裝sassgem install sass

less 先安裝npmnpm install -g less

less

lessc styles.less

lessc styles.less styles.css

lessc --clean-css styles.less style.min.css 先安裝clean-css外掛程式

sass test.scss sass

test.scss test.css

sass --style nested test.sass test.css 巢狀縮排的css**，它是預設值

sass --style expanded test.sass test.css 沒有縮排的、擴充套件的css**

sass --style compact test.sass test.css 簡潔格式的css**

sass --style compressed test.sass test.css 壓縮後的css**

// watch a file

sass --watch input.scss:output.css
// watch a directory

安裝 npm install -g px2rem

px2rem src/*.css

px2rem -u [40] login.css 設定rem default:75，這裡設定成40

sass高階用法例項

less中文官網 語言特性

flex布局教程 語法篇

flex布局教程 例項篇

stylus（css預編譯器）

推薦去張鑫旭大神這裡詳細了解 安裝npm install g stylus 自動編譯 stylus w demo.styl o dist demo.styl是styl檔案，dist是要生成樣式的目錄檔名，w 是自動監視檔案 o 是將編譯後的css檔案輸出到指定檔案中 壓縮stylus compres...

less預編譯器易錯點

1.在less中只要設定了乙個樣式類，我們就可以把它稱之為乙個方法，其它地方需要用到這些樣式，直接 類名 呼叫即可 原理 把當前樣式類中的 原封不動的copy乙份過去 不加括號即是普通樣式類，也是封裝的乙個函式，編譯的時候，這個樣式類中的 依然跟著編譯 加括號僅僅是封裝的函式，編譯的時候是不編譯函式...

Vue手動整合less預編譯器

less是一門css預處理語言，簡單的說就是在css的基礎上提公升為可程式設計性的預編譯器 需要在專案中安裝 less less loader 2個外掛程式，語法為 npm i d less less loader 然後在 webpack.conf.js 檔案中進行如下配置 webpack.conf...