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

1. 變量的問題

1.1變量的表示

sass有個$var, [email protected], 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. 變量的問題, 目前為止, 我比較認同變量有個標記, [email protected], 直接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, 就是一個全自動化的工具, 真的是很方便.

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