花了兩天時間學習了 sass, less, stylus的基本語法和簡單使用, 談談感覺.

花了兩天時間學習了 sass, less, stylus的基本語法和簡單使用, 談談感覺.

1. 變量的問題

 1.1變量的表示

sass有個$var, less有@var, stylus 的var直接就是var=值, 也可使用$var

1.2 變量的賦值

sass, $var: value, 

less: @var: value

stylus: var=10

 

2. 縮進的問題

sass, less均不須要縮進, 縮進無關

stylus也能夠不用縮進, 使用默認的css花括號, 也可使用縮進, 若是縮進不匹配就麻煩了

 

3. 宿主的問題

sass, 原來是用在ruby界的, 是haml的衍生品.

less,卻是原生的nodejs貨

stylus, 也是nodejs的東西, 可是語法明顯抄襲Python的感受.

 

4. if條件判斷的問題

sass的if和stylus的if引入很早了

可是less的if就沒出現過, 渣同樣的when, 讓人蛋疼

stylus的if 相似與python的語法, if a is 'unit'

 

5.學習的難度

sass和less估計sass最好用了, less稍差, 也不是不能用, 就是感受差了一點點, 連條件控制都沒有

stylus的縮進, 開始給人耳目一新的感受, 連 width: 100px; 這種, 冒號和分號均可以省略, 感受, 哇哦, 還能這麼省啊!

時間一長, 就以爲坑爹了, 我之前寫的幾十K的css, 難道都要按照你這個語法從新寫一遍嗎? 因此以爲, 這種省略花括號({}括號), 冒號(:號)甚至分號(;號), 只是一個噱頭, 其實是很坑爹的作法. 好在stylus及時彌補了, 支持原生的css寫法. 那回過頭來講, 你縮進個毛啊, 該不是嫌的蛋疼吧.

我以爲學習的難度, sass<less<stylus

功能上 sass不是最強的, stylus應該是最強的, 我看好stylus, 可是stylus這個名字很差拼寫. 只能說less還有潛力可挖.

 

6. 關於函數

sass, less, stylus各自都有內置的函數, 尤爲是關於顏色方面的函數, 都是很豐富的.

 

值得一提的是stylus的函數能夠本身定義, 能夠有一些數學運算啥的. 另外還支持python的列表同樣的索引, 好比a=[1,2,3]  a[0]是1, a[-1]是3

我以爲能夠自定義函數是stylus的優勢, 比sass和less都強.

 

7. 在自由度上

我以爲less最不自由了, 沒有if判斷, 函數又不能本身定義, 只能反覆寫mixin了, 想要less更好, 只能期待官方添加了, 但是都發展了這麼久了, 到現在還不是那麼使人滿意, 真不知道啥時候能爽.

sass的if比less強多了.

stylus的if有點python風格. 若是純粹前端用, 仍是不太好, 沒js的好.

 

8. 周邊工具

sass是ruby界的, gem啥的我不懂, 就不瞎扯了

less, 和grunt, cssmin, contat?配合仍是很好的

stylus也是nodejs的, 周邊工具和less想當, 不佔優點

 

9. 集成方案

現有的一個集成方案是 fireshell, 看我寫的文章:  Fireshell的使用說明 http://blog.csdn.NET/huyoo/article/details/41013989

做者是toddmotto, 這個FireShell主要是集成了sass, 項目地址在 https://github.com/toddmotto/fireshell
主要的工做就是你編寫sass格式的scss文件, 而後搭配grunt-contrib-sass(要求安裝ruby和sass 的gem包), 就能夠實現自動編譯sass/scss爲css文件, 並最後合成而且壓縮成一個style.min.css文件. 

同時在http://localhost:9000端口開啓了一個web服務, 能夠方便的在本地查看你的網頁的效果(在你的網頁中引用這個style.min.css便可).

因爲sass是分散的, 按照功能或者模塊來分解一個網站所須要的css, 具備模塊化的思惟, 是很好的開發方式, fireshell就提供 了這個集成的方案. 

 

這個集成方案中能夠被替換的就是 sass 編譯scss 替換成 less編譯less文件, 或者stylus編譯*.styl文件, 最後仍是組合壓縮.

所以, 一個fireshell中是能夠實現集成sass, less, stylus的.

 

固然, 不少人可能只須要一個, 那麼, 在fireshell的基礎上, 作個分支就是很好方式了.

我就把sass替換爲less了, 怎麼替換的, 以及最終的代碼, 請看:

把Fireshell中的sass模塊替換爲less編譯css  http://blog.csdn.net/huyoo/article/details/41016175

 

過幾天再整 stylus的分支.

 

10. 對這種模塊化, 編譯型的css來講, 我但願的有

1. 支持原生css的解析, 別在搞啥花花腸子了, 若是不是比現有方式更方便的東西, 就不要弄了, 好比縮進

2. 變量的問題, 目前爲止, 我比較認同變量有個標記, 不論是$var仍是@var, 直接var, 我有時候分不清究竟是css的內置tag, 仍是變量.

3. if條件控制, less太不給力了

4. 代碼替換的問題, 一個要求, 好用

5. 自有特性, 別太饒, 簡單點

6. 仍是期待nodejs的版的編譯型css, 由於周邊工具不少, 尤爲是grunt, 光是這三個東西grunt-contrib-sass, grunt-contrib-less, grunt-contrib-stylus, 就讓我以爲很好了, 知足了

另外, nodejs裏的 autoprefixer 更是一個讓人以爲很爽的東西. https://github.com/nDmitry/grunt-autoprefixer

就是你能不能在某個瀏覽器上使用某個css特性 在這裏有個很全的數據庫 http://caniuse.com/ 

autoprefixer 就是基於這個數據庫來給你的css代碼自動添加 -webkit-  -moz-  -ms- -o-等前綴, 是結合grunt的task, 就是一個全自動化的工具, 真的是很方便.