less 是一門 css 預處理語言，它擴充套件了 css 語言，增加了變數、mixin、函式等特性，使 css 更易維護和擴充套件。
less 可以執行在 node 或瀏覽器端。
作用：將less型別的檔案轉換為css型別的檔案。
常見的less編譯工具有： winless、******ss、koala
使用@來申明乙個變數：@pink:pink
作為普通屬性值來使用：直接用@pink
作為選擇器和屬性名：#@
作為url：@
變數的延遲載入
例如：less：
@color
:deeppink;
@m:margin;
@selector
:#wrap;
*: 0;
@}}
less:
//css是塊級作用域
@var
:0;.class
one:
@var
;}
.
class
.class
.brass
基本巢狀規則
&的使用
例如：less:
*}}
}
* #wrap .inner:hover
簡單來說：我們可以定義一些通用的屬性集為乙個class，然後在另乙個class中去呼叫這些屬性。
有如下幾種混合方式：
普通混合
不帶輸出的混合
帶引數的混合
帶引數且有預設值的混合
命名引數
匹配模式
arguments
1. 普通混合
less轉成css時公共部分還會保留。
less:
/*普通混合*/
/*.innerstyle是乙個屬性集*/
.innerstyle
#wrap
.inner2
}
/* .innerstyle被保留了！ */
.innerstyle
#wrap
#wrap .inner
#wrap .inner2
less轉成css時公共部分不保留
less:
.innerstyle()
#wrap
.inner2
}
/* 注意：此時的css檔案中沒有 .innerstyle */
#wrap
#wrap .inner
#wrap .inner2
less:
.innerstyle
(@w,@h,@c
)#wrap
.inner2
}
#wrap
#wrap .inner
#wrap .inner2
.innerstyle(@w
:10px,@h
:10px,@c
:pink)
#wrap
.inner2
}
#wrap
#wrap .inner
#wrap .inner2
給實參指定對應形參名，在引數有預設的時候以便匹配到對應的形參。
less:
.innerstyle(@w
:10px,@h
:10px,@c
:pink)
#wrap
.inner2
}
.innerstyle(@w
:10px,@h
:10px,@c
:pink)
#wrap
.inner2
}
********.less:
/*第乙個引數是_@,不管下面哪個樣式被執行都會自動呼叫這個樣式*/
.********
(@_,@w,@c
)/*三角形朝左*/
.********
(l,@w,@c
)/*三角形朝右*/
.********
(r,@w,@c
)/*三角形朝上*/
.********
(t,@w,@c
)/*三角形朝下*/
.********
(b,@w,@c
)
@import
"./********.less"
;#wrap > .sjx
/*第乙個引數是_@,不管下面哪個樣式被執行都會自動呼叫這個樣式*/
/*三角形朝左*/
/*三角形朝右*/
/*三角形朝上*/
/*三角形朝下*/
#wrap > .sjx
less:
.border
(@1,@2,@3
)#wrap > .sjx
less:
#wrap .inner
#wrap .inner
juzhong.less
.juzhong
(@w,@h,@c
)
@import
"mixin/juzhong.less";*
&:nth-child(2)}}
}
*
* #wrap
* #wrap .inner:nth-child(1)
* #wrap .inner:nth-child(2)
.juzhong
.juzhong:hover
@import
"mixin/juzhong-extend.less";*
&:nth-child(2):extend(.juzhong)}}
}
/*這裡是繼承部分*/
.juzhong,
* #wrap .inner:nth-child(1),
* #wrap .inner:nth-child(2)
.juzhong:hover,
* #wrap .inner:nth-child(1):hover
** #wrap
* #wrap .inner
* #wrap .inner:nth-child(1)
* #wrap .inner:nth-child(2)
less:
*
*
Less 語法快速入門
less 是一門 css 預處理語言其可以執行在 node 或瀏覽器端。它將傳統的 css 樣式結構單一的排版順序進行了優化，讓我們可以通過層級巢狀的方式將 css 類名與html結構一一對應起來。這樣的好處不僅僅使得 css 樣式排版更清楚，也可以讓我們在後期的修改中快速查詢，同時減少了 量，一定...
less快速入門官方文件
less 是一門 css 預處理語言，它擴充了 css 語言，增加了諸如變數 混合 mixin 函式等功能，讓 css 更易維護 方便製作主題 擴充。less 可以執行在 node 瀏覽器和 rhino 平台上。網上有很多第三方工具幫助你編譯 less 原始碼。官方例項 base f938ab bo...
less快速學習
type less style import test.less 我在編譯之後仍然顯示 我在編譯之後不顯示 color pink m margin selector wrap 0 在使用的時候也要加大括號 image image div div z index 屬性值為 3 father fathe...