less學習日記

less

是一種基于JavaScript的動態樣式語言。它包含了一套自定義的語法以及一個編譯器，我們可以根據語法定義自己記得樣式規則，最終用編譯器生成對應的css文件！

使用方法：

客戶端使用

客戶端使用的方法非常簡單，直接將LESS的源文件引入網頁即可，但是需要引入less.js的編譯文件。如下：

<link rel="stylesheet/less" type="text/css" href="style.less">

<script type="text/javascript" src="less.js"></script>

這里有兩個注意點：

（1）less.js一定要在LESS源文件后面引入，否則無法正確的識別。

（2）LESS的link里面的rel屬性值是stylesheet/less，CSS卻是stylesheet。

服務端使用

LESS 在服務器端的使用主要是借助于 LESS 的編譯器，將 LESS 源文件編譯生成最終的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安裝 LESS，安裝成功后就可以在 node 環境中對 LESS 源文件進行編譯。

npm install -g less

//執行將index.less 編譯
lessc index.less > index.css

開發的時候 可以結合gulp就不是手動的一次次的生成，可以用gulp-watch監視less文件！！

語法

變量

變量是一個極其方便的東西，像js一樣，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡單。LESS 中的變量和其他編程語言一樣，可以實現值的復用，既然是變量，就有局部變量和全局變量之分。局部變量和全局變量的區別，跟js中的局部變量和全局變量的區別是類似的。

less 文件：

// LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

生成的css文件

/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

LESS 中的變量和其他編程語言一樣，可以實現值的復用，同樣它也有生命周期，也就是 Scope（變量范圍，開發人員慣稱之為作用域），簡單的講就是局部變量還是全局變量的概念，查找變量的順序是先在局部定義中找，如果找不到，則查找上級定義，直至全局。下面我們通過一個簡單的例子來解釋 :

less 文件:

@width : 20px;

#homeDiv {

@width : 30px;

#centerDiv{

width : @width;// 此處應該取最近定義的變量 width 的值 30px

}

}

#leftDiv {

width : @width; // 此處應該取最上面定義的變量 width 的值 20px

}

生成的CSS 文件：


#homeDiv #centerDiv {

width: 30px;

}

#leftDiv {

width: 20px;

}

像 JavaScript 中 arguments一樣，Mixins 也有這樣一個變量：@arguments。@arguments 在 Mixins 中具是一個很特別的參數，當 Mixins 引用這個參數時，該參數表示所有的變量，很多情況下，這個參數可以省去你很多代碼。

less:

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
-moz-box-shadow: @arguments; 
-webkit-box-shadow: @arguments; 
box-shadow: @arguments; 
} 
#header { 
.boxShadow(2px,2px,3px,#f36); 
}

CSS 文件:

#header { 
-moz-box-shadow: 2px 2px 3px #FF36; 
-webkit-box-shadow: 2px 2px 3px #FF36; 
box-shadow: 2px 2px 3px #FF36; 
}

混合

混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。

less:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

css:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
 border-radius: 5px;
  -webkit-border-radius:5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius:10px;
  -moz-border-radius: 10px;
}

Mixins 其實是一種嵌套，它允許將一個類嵌入到另外一個類中使用，被嵌入的類也可以稱作變量，簡單的講，Mixins 其實是規則級別的復用。

嵌套規則

我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。
less:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover {//有 & 時解析的是同一個元素或此元素的偽類，沒有 & 解析是后代元素
      border-width: 1px 
          
      }
    }
  }
}

css:

#header h1{
    font-size: 26px;
    font-weight: bold;
}
#header p{
 font-size: 12px;
}
#header p a{
text-decoration: none;
} 
#header p a:hover{
 border-width: 1px 
}

函數 & 運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。

LESS:


// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

css:

/* 生成的 CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

上面的例子中使用 LESS 的 operation 是 特性，其實簡單的講，就是對數值型的 value（數字、顏色、變量等）進行加減乘除四則運算。同時 LESS 還有一個專門針對 color 的操作提供一組函數。下面是 LESS 提供的針對顏色操作的函數列表：

lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
darken(@color, 10%); // return a color which is 10% *darker* than @color 
saturate(@color, 10%); // return a color 10% *more* saturated than @color 
desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
fadein(@color, 10%); // return a color 10% *less* transparent than @color 
fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
spin(@color, -10); // return a color with a 10 degree smaller hue than @color

less:

init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

css:

#body { 
background-color: #f04615; 
}

less:

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch, #888);
}

css:

.class {
  color: #a2a2a2;
  display: block;
}

如上，.mixin就會得到傳入顏色的淺色。如果@switch設為dark，就會得到深色。

具體實現如下：

第一個混合定義并未被匹配，因為它只接受dark做為首參

第二個混合定義被成功匹配，因為它只接受light

第三個混合定義被成功匹配，因為它接受任意值

注釋

CSS 形式的注釋在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同樣也支持雙斜線的注釋, 但是編譯成 CSS 的時候自動過濾掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

Importing

你可以在main文件中通過下面的形勢引入 .less 文件, .less 后綴可帶可不帶:

@import "lib.less";
@import "lib";

如果你想導入一個CSS文件而且不想LESS對它進行處理，只需要使用.css后綴LESS就會跳過它不去處理它.:

@import "lib.css";

字符串插值

變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免編譯

有時候我們需要輸出一些不正確的CSS語法或者使用一些 LESS不認識的專有語法.

要輸出這樣的值我們可以在字符串前加上一個 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

我們可以將要避免編譯的值用" "包含起來，輸出結果為:：

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript 表達式

JavaScript 表達式也可以在.less 文件中使用. 可以通過反引號的方式使用:

@var: `"hello".toUpperCase() + '!'`;

輸出:

@var: "HELLO!";

它也可以訪問JavaScript環境:

@height: `document.body.clientHeight`;

如果你想將一個JavaScript字符串解析成16進制的顏色值, 你可以使用 color 函數:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容