1，函數?

　　color 顏色運算，常用的兩個函數 lighten（亮度）和?darken（變暗）；

　　如: ?.class{ ?color: lighten(red,10%); ? }可使紅色變亮10%。

2，變量 Variables

　　URLs的使用，

　　@images: ? "../img";

　　body{ ? ? background: url("@{images}/white-sand.png");? ?}

　　這樣使用的好處是可以當圖片路徑改變后，可通過改變@images的值，統一改變路徑。

3，Extend 擴展

　　如：

　　.class1{ ? ?color: red; ? ? }

　　.class2{ ? &:extend(.class1); ? background: white; ? ? }

?　　CSS輸出為：

　　.class1，.class2{ ? ?color: red; ? ? }

　　.class2{ ? ? background: white; ? ? }

　　可見，extend會將.class2加到.class1的后面；該方法可與mixins屬性區別在于只調用到.class1的樣式，而.class子標簽的樣式不調用，mixins如：

　　.class1{

　　　　color: red;

　　　　p{

　　　　　　color: blue;

　　　　}

　　}

　　.class2{

　　　　.class1;

　　}

　　這樣.class2 p的color也會為blue；

　　extend的用處可使我們再調用其它class的樣式時，不用顧忌到被調用class內部標簽的樣式。它可以包含多個要擴展的類，使用逗號分割即可。

　　經典用例：

　　如果你想有一個animal子類型，并且要重寫背景顏色。那么你有兩個選擇，首先改變你的HTML

　　<a class="animal bear">Bear</a> 　　.animal {background-color: black; 　　color: white; 　　} 　　.bear { 　　background-color: brown; 　　}

　　或者簡化HTML，然后在你的less中使用extend，比如：

　　<a class="bear">Bear</a> 　　.animal {background-color: black;color: white; 　　} 　　.bear { 　　&:extend(.animal); 　　background-color: brown; 　　}

4，Mixins

　　如果你想要創建一個混合集，但是卻不想讓它輸出到你的樣式中，你可以在混合集的名字后面加上一個括號。

　　如：.class(){}，調用是可正常調用。

　　@arguments變量：

　　.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {

　　　　-webkit-box-shadow: @arguments;

　　　　-moz-box-shadow: @arguments;

　　　　box-shadow: @arguments;

　　}

　　可讓你不用寫多個參數。

　　為了避免樣式干擾或者被別的樣式干擾，我們將一些公用的樣式創建分組，然后在使用的時候直接調用。例如，如果我們創建了一個名為“default”的樣式分組，我們就可以在使用到的時候直接從該組中調用。　　

#defaults {.nav_list () {list-style: none;margin: 0; padding: 0;}.button () { … }.quote () { … } }
調用：
.class{
　　#defaults .nav_list;
}

　　

5，媒體查詢

　　.desktop-and-old-ie{

　　　　@media screen and (min-width: 1200) { background-color: red;?}

　　}

　　對應的CSS為：

　　@media?screen?and (min-width:?1200){

　　　　.desktop-and-old-ie{

　　　　　　background-color: red;?

　　　　}　　

　　}

　　這樣，可不用再返回來多寫一遍.desktop-and-old-ie。

6，匹配表達式

　　為了盡可能的保持CSS聲明的本質，Less選擇實現了guarded mixins，而不是if/else語句，也就是說并不是一脈相承的實現@media查詢的規范。

　　例子：

　　.mixin (@a) when (lightness(@a) >= 50%) {

　　　　background-color: black;

　　}

　　.mixin (@a) when (lightness(@a) < 50%) {

　　　　background-color: white;

　　}

　　.mixin (@a) {

　　　　color: @a;

　　}

　　我們可以通過這樣的表達式，來判斷<a>的樣式，如：

　　.color (@a) when (@a = @linkColor){

　　　　&:hover{

　　　　　　background-color:white;

　　　　}

　　}　　

　　.color (@a) when (@a = @linkColorHover){

　　　　&:hover{

　　　　　　text-decoration: underline;

　　　　}

　　}

　　a{

　　　　.color(參數);

　　}

7，遞歸循環

　　在Less中，混合可以調用它自身。這樣，當一個混合遞歸調用自己，再結合Guard表達式和模式匹配這兩個特性，就可以寫出循環結構。

　　使用遞歸循環最常見的情況就是生成柵格系統的CSS：

　　.generate-columns(4);

　　.generate-columns(@n, @i: 1) when (@i =< @n) {

　　　　 .column-@{i} {

　　　　　　width: (@i * 100% / @n);

　　　　}

　　 .generate-columns(@n, (@i + 1));

　　}

　　生成的CSS：

　　.column-1 { width: 25%; }

　　.column-2 { width: 50%; }

　　.column-3 { width: 75%; }

　　.column-4 { width: 100%; }

8，&運算符

　　&運算符表示它的父元素的class名，P.S： 不是最親近的父元素，而是全部的父元素

　　&可以這么運用：

　　.button {

　　　　&-ok { background-image: url("ok.png"); }

　　　　&-cancel { background-image: url("cancel.png"); }

　　　　&-custom { background-image: url("custom.png"); }

　　}

　　輸出：

　　.button-ok { background-image: url("ok.png"); }

　　.button-cancel { background-image: url("cancel.png"); }

　　.button-custom { background-image: url("custom.png"); }

　　這樣可以少寫些相同前綴的class名，使代碼簡潔。

轉載于:https://www.cnblogs.com/damade/p/3853801.html

總結

以上是生活随笔為你收集整理的Less 文档查看心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。