點點網是出於什麼目的選擇使用 LESS？LESS 相對於傳統的 CSS 的優勢是什麼？

01-08

雖然後綴名是 .less, 但是目前看到內容是正確的 css, 看起來是伺服器端解析的

我覺得無論是less還是sass，只是為了開發更高級的CSS3特性而誕生的，比如你要一個高級的css3漸變：

#hue { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(2.778%, #ff2b00), color-stop(5.556%, #ff5500), color-stop(8.333%, #ff8000), color-stop(11.111%, #ffaa00), color-stop(13.889%, #ffd500), color-stop(16.667%, #ffff00), color-stop(19.444%, #d4ff00), color-stop(22.222%, #aaff00), color-stop(25.0%, #80ff00), color-stop(27.778%, #55ff00), color-stop(30.556%, #2bff00), color-stop(33.333%, #00ff00), color-stop(36.111%, #00ff2b), color-stop(38.889%, #00ff55), color-stop(41.667%, #00ff80), color-stop(44.444%, #00ffaa), color-stop(47.222%, #00ffd5), color-stop(50.0%, #00ffff), color-stop(52.778%, #00d4ff), color-stop(55.556%, #00aaff), color-stop(58.333%, #007fff), color-stop(61.111%, #0055ff), color-stop(63.889%, #002bff), color-stop(66.667%, #0000ff), color-stop(69.444%, #2a00ff), color-stop(72.222%, #5500ff), color-stop(75%, #7f00ff), color-stop(77.778%, #aa00ff), color-stop(80.556%, #d400ff), color-stop(83.333%, #ff00ff), color-stop(86.111%, #ff00d4), color-stop(88.889%, #ff00aa), color-stop(91.667%, #ff0080), color-stop(94.444%, #ff0055), color-stop(97.222%, #ff002b), color-stop(100%, #ff0000)); background-image: -moz-linear-gradient(left, #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, #ffff00, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, #00ffff, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, #0000ff, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, #ff00ff, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, #ff0000); background-image: linear-gradient(left, #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, #ffff00, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, #00ffff, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, #0000ff, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, #ff00ff, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, #ff0000); }

這樣手寫肯定不靠譜，而用sass則只需要定義一個函數：

@function hues(){

$hues: compact();

@for $i from 0 through 36 {

$hues: append($hues, color_stop(hsl($i*10, 100, 50)));

}

@return $hues;

}

再引用就好了，一句代碼搞定上面那一片代碼：

#hue { @include background-image(linear-gradient(left, hues())); }

而至於選less還是sass，則是因人而異，這裡有一篇對比：

https://gist.github.com/820035

less用js編譯，可以直接引入less實時查看效果，sass則通過ruby編譯，每次更改都需要重新編譯，不過guru們說：「Using javascript compiler is a bad thing」...

另外google的 paulirish 說：「richer css3 support via compass.

also less has too much ambiguity about clientside vs serverside.」

LESS 開發，的確很方便，代碼寫起來和讀起來，是另外一種感覺和心境，不管是不是點點網，只要你想，也可以這樣做

用LESS，你可以：

1、設置變數

如：@mainWidth: 940px;

2、引用

如：

.common-class { width: 940px; }

.my-class { .common-class }

3、嵌套

如：

#header {

width: 940px;

.logo {

background: url("logo.png") no-repeat;

}

4、運算

如：

@commonBorderWidth: 1px;

.my-class {

border-left-width: @commonBorderWidth * 2;

}

優勢很明顯

這種與時俱進設計思想，非常棒

你除了可以快速開發和很好的維護CSS之外，你還可以昂首挺胸的把妹。。

接下來的，就是解析的問題了，在此非常不建議客戶端解析，主要考慮阻塞、資源和性能等問題，所以，這個問題交給服務端，生成好，前面直接調用即是完美。。

我們在開發的過程中使用過less，sass，但現在全部使用stylus（http://learnboost.github.com/stylus/）。幾個優點：

1.首先是健壯：一方面，由於結構清晰，質量更易於保障以tab確定結，構，不像瀏覽器css那麼容易混亂，幾乎不會出現需要！important的地方；另一方面，對於團隊協作而言，傳統的css是個悲劇，成天merge誰也受不了。而stylus因為全部用tab來確定結構，對於git和hg都是非常友好的，多人協作只要各自負責的部分不同就沒有大問題。

2.自建方法豐富，可以很輕鬆的做更多事

3.sublime下的bundle可以讓stylus文件的高亮非常漂亮＝p

我個人挺抵觸這東西的，頁面產生過程中，PS測量尺寸和切圖佔用的時間比寫代碼要長很多，而且寫一會去F5下也很耗時間。

CSS自身的繼承機制就擁有了一部分變數，混合的方式。

比如顏色定義，尺寸定義，都可以用多個class組合的方式做。

比如：

border:1px #ccc solid;

border-width:1px 2px 3px 4px;

使用這些機制會讓coder有點混亂。

如果有按照CSS3的一些新語法進行編譯的我倒是比較支持。