less的介紹和應用

1.less的介紹
css前處理器，一種動態樣式語言
2.less的安裝
方法1：終端輸入命令

cnpm install -g less

方法2：

方法3：使用百度CDN載入

3.less的應用
style.less程式碼如下：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

在終端輸入
1.如果在終端輸入如下程式碼：

lessc style.less

結果如下：

2.如果在終端輸入如下程式碼

lessc style.less > ok.css

結果如下：

此時ok.css程式碼如下：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

此時如果在終端輸入命令如下：

cat ok.css

結果如下：

3.讓瀏覽器直接解析less，而不是通過less編譯成的css
資料夾目錄如下：

index.html程式碼如下：

<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>
<div class="test">Hello less</div>

index.less程式碼如下：

// LESS

@color: #4D926F;

.test{
  color: @color;
}

注意：chrome瀏覽器不支援此方案(自測所得結論)

4.幾個命令的小技巧：
在終端輸入如下程式碼：

ls

結果如下：

5.監視模式
監視模式是客戶端的一個功能，這個功能允許你當你改變樣式的時候，客戶端將自動重新整理。
要使用它，只要在URL後面加上’#!watch’,然後重新整理頁面就可以了。另外，你也可以通過在終端執行less.watch()來啟動監視模式。