1. less嵌套
這個(gè)不多說寞埠，大家比較常用
2. 變量
@white:#fff;
3. 導(dǎo)入
@import 路徑 //比較常用
@import './style.less';
1摩骨、@import (reference)
用于導(dǎo)入外部文件贝室，但不會將導(dǎo)入的樣式添加到編譯的CSS文件中。 這是在版本1.5.0 中發(fā)布的仿吞。
@import (reference) './style.less';
2滑频、@import (inline)
@import(inline)會將CSS復(fù)制到輸出CSS文件中，而不進(jìn)行處理唤冈。 當(dāng)CSS文件不是LESS兼容時(shí)峡迷，這是有用的。 雖然LESS支持大多數(shù)標(biāo)準(zhǔn)CSS你虹，但在某些地方不支持注釋绘搞，并且不修改CSS，它不會支持所有已知的CSS黑客傅物。 即使 @import(inline)不會處理CSS夯辖，它將確保所有的CSS將在一個(gè)文件中。
3董饰、@import (less)
@import(less)會將文件導(dǎo)入為LESS文件蒿褂，而不管文件擴(kuò)展名是什么圆米。
@import (less) "http://demosource/less.txt";
.para_1 {
color: red;
.style;
}
.para_2 {
color: blue;
}
demosource/less.txt
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
.para_1 {
color: red;
font-family: "Comic Sans MS";
font-size: 20px;
}
.para_2 {
color: blue;
}
4、@import(css)會將文件導(dǎo)入為常規(guī)CSS啄栓，而不管文件擴(kuò)展名娄帖。 這是在版本1.4.0 中發(fā)布的。與（3）類似效果
5昙楚、@import(once)
@import(once)確保文件只導(dǎo)入一次近速，并且對該文件將忽略任何以下import語句。 這是 @import statments的默認(rèn)行為堪旧。
6削葱、 @import(multiple)
您可以導(dǎo)入具有相同名稱的多個(gè)文件。 這與一次完全相反淳梦。
7析砸、@import (optional)
可選允許您在文件不存在時(shí)導(dǎo)入文件。則文件不存在也不會報(bào)錯(cuò)谭跨。
允許在 @import 語句中使用多個(gè)關(guān)鍵字干厚，但必須使用逗號分隔關(guān)鍵字李滴。
@import (less, optional) "custom.css";
4. less操作
LESS支持一些算術(shù)運(yùn)算螃宙，例如加號(+)，減號( - )所坯，乘法(*)和除法(/)谆扎，它們可以對任何數(shù)字，顏色或變量進(jìn)行操作芹助。 操作節(jié)省了大量的時(shí)間堂湖，當(dāng)你使用變量，讓感到就像是簡單的數(shù)學(xué)工作状土。
@fontSize:10px;
.class{
font-size:@fontSize*10;
}
5. less內(nèi)置函數(shù)
js里面很多內(nèi)置函數(shù)less都可以用无蜂，比如什么ceil,round等等。
函數(shù)地址： http://less.bootcss.com/functions/ 用的比較少蒙谓，不做詳細(xì)介紹斥季。
e.g.:
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width); //100%
}
6. 擴(kuò)展（很有用卻很少被用）
Extend是一個(gè)LESS偽類，它通過使用:extend 選擇器在一個(gè)選擇器中擴(kuò)展其他選擇器樣式累驮。
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
編譯之后
h2 {
font-style: italic;
}
.style,
h2 {
background: green;
}
7. 混合（Mixins酣倾，很有用）
混合類似于編程語言中的函數(shù)。 Mixins是一組CSS屬性谤专，允許您將一個(gè)類的屬性用于另一個(gè)類躁锡，并且包含類名作為其屬性。 在LESS中置侍，可以使用類或id選擇器以與CSS樣式相同的方式聲明mixin映之。 它可以存儲多個(gè)值拦焚，并且可以在必要時(shí)在代碼中重復(fù)使用。 1,2,5情況比較常用詳細(xì)說明
1惕医、 不輸出mixin
.a(){
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}
.myclass {
background: #64d9c0;
padding-left: 100px;
}
//可以看到?jīng)]有a輸出
2耕漱、 輸出mixin
.a{
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a; //.a() //一樣的效果
}
.a{
padding-left: 100px;
}
.myclass {
background: #64d9c0;
padding-left: 100px;
}
//可以看到有a輸出
3、Mixins中的選擇器
.mixin() {
&:hover {
background: #FFC0CB;
}
}
a {
.mixin();
}
a:hover {
background: #FFC0CB;
}
4抬伺、 !important
.mixin(){
color: #900;
background: #F7BE81;
}
.para1{
.mixin();
}
.para2{
.mixin() !important;
}
.para1 {
color: #900;
background: #F7BE81;
}
.para2 {
color: #900 !important;
background: #F7BE81 !important;
}
8. 混合參數(shù)
1螟够、參數(shù)可以使用逗號或分號分隔
.mixin(@color) {
color: @color;
}
.mixin(@color; @padding: 2px) {
color: @color;
padding: @padding;
}
.myclass {
color: #FE9A2E;
padding: 2px;
}
. myheader{
border:2px dashed green;
}
2、命名參數(shù)
通過使用它們的名稱提供參數(shù)值而不是位置峡钓。
.mixin(@color: black; @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81; @fontSize: 20px);
}
.class1 {
color: #F5A9D0;
font-size: 20px;
}
.class2 {
color: #F79F81;
font-size: 20px;
}
9. 循環(huán)(很有用）
.mloop(@n,@i:5) when (@i <= @n) {
.mt@{i}{
margin-top: @i * 1px;
}
.mr@{i}{
margin-right: @i * 1px;
}
.mb@{i}{
margin-bottom: @i * 1px;
}
.pb@{i}{
padding-bottom: @i * 1px;
}
.pl@{i}{
padding-left: @i * 1px;
}
.mloop(@n,(@i + 5));//遞歸調(diào)用
}妓笙；
.mloop(80); //執(zhí)行 以5為梯度 執(zhí)行到80
10. 父選擇器
這個(gè)比較常用 &
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
