寫更少的代碼，做更多的事情
1.LESS 原理及使用方式
本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 文件。LESS 並沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，為 CSS 加入程序式語言的特性。
2. 語法
變量 Mixin混入 嵌套 Import 函數（內置函數 運算）
2.1變量
LESS 允許開發者自定義變量，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡單。
/*-----------注釋-----------*/
1.使用“/**/”注釋，在編譯后會在同時css文件生成
2.使用“//”注釋，只在less文件，不會在css生成
/*-----------------變量-----------------*/
變量的命名：必須以@為前綴+名字：值；@color：red；必須分號結束
@charset"UTF-8"設置編碼字符集（建議）
@mainColor:#E93223;
body{
color: @mainColor;
}
@className:box; //聲明類名變量
.@{className}{ //使用變量字符拼接的方法
color:@mainColor;
}
2.2 Mixin混入
Mixin（混入）功能對用開發者來說並不陌生，很多動態語言都支持 Mixin（混入）特性，它是多重繼承的一種實現，在 LESS 中，混入是指在一個 CLASS 中引入另外一個已經定義的 CLASS，就像在當前 CLASS 中增加一個屬性一樣。
/*-----------------mixin 混入----------------*/
1.組合樣式的混入
@mainColor:red;
@h100:100px;
@w50:50px;
.red{
color: @mainColor;
}
.box{
width:@50px;
}
.redBox{ //把上面的兩個類樣式組合到一起，生成一個新的類樣式=》"類的混入"
.red();
.box();
heigth:@h100;
}
2.函數的混入
2.1函數的定義
.w50(){
width:50px;
}
.f_left(){
float:left;
}
.w50-f_left{
.w50();//調用函數
.f_left();
}
3.定義帶參數的函數：定義了參數函數，參數沒有默認值時，在調用的時候必須傳參數，設置了默認值，調用時可帶參數，也可不帶參數
.f(@direction:left){
float:@direction;
}
.r(@direction){
float:@direction;
}
.f-r{
.f();//有默認值的函數，可不傳參數，也可傳參數
.r(right)//沒有默認值的函數，必須傳參數
}
例子：css3=》border-radius圓角兼容性處理的函數
.borderRadius（@direction:30px）{
border-radius:@direction；
-webkit-border-radius;@direction;
-o-border-radius:@direction;
-moz-bordius:@direction;
-ms-boreder-radius:@direction;
}
.box{
.borderRadius(20px);
}
總結：樣式組合的方式混入，在css文件也能全生成，造成了less的代碼冗余，函數的方式，函數是不會編譯在css文件里。
2.3嵌套
在我們書寫標准 CSS 的時候，遇到多層的元素嵌套這種情況時，我們要么采用從外到內的選擇器嵌套定義，要么采用給特定元素加 CLASS 或 ID 的方式
/*------------------嵌套------------------*/
.text{
.test-one{ //.test的下第一級第一個子元素
樣式
.test-tow{ //.test-one的第一級子元素
樣式
}
}
.test-ones{ //.test的下第一級第二個子元素
樣式
}
}
使用偽類的時候需要連接的情況：&
#w_banner{
.carousel-inner{
> div.item{
a.img_box{
background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
height: 410px;
/*調用redBorder mixin*/
display: block;
.redBorder();
/*調用@mainColor 變量*/
&:hover{
color: @mainColor;
img{
display:block;
position:absolute;
left:0;
}
&::before{
content:"";
}
}
}
a.img_mobile{
width: 100%;
display: block;
img{
width: 100%;
display: block;
}
}
}
}
}
2.4Import 導入
/*---------------------Import 引入------------------------*/
nav.less、banner.less、topBar.less三個模塊less文件，組合到index.less中。會把這三個樣式導入index.less
index.less=》
@charset "UTF-8";
@import "nav";
@import "banner";
@import "topBar";
@import "base";
.f_left{
float: @right;
}
2.5運算及函數
在我們的 CSS 中充斥着大量的數值型的 value，比如 color、padding、margin 等，這些數值之間在某些情況下是有着一定關系的，那么我們怎樣利用 LESS 來組織我們這些數值之間的關系呢？
http://www.1024i.com/demo/less/reference.html
escape(@string); // 通過 URL-encoding 編碼字符串
e(@string); // 對字符串轉義
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替換屬性值的單位
color(@string); // 將字符串解析為顏色值
data-uri([mimetype,] url); // * 將資源內嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 將數字轉換為百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 計算數字的平方根
abs(number); // * 數字的絕對值
sin(number); // * sin函數
asin(number); // * arcsin函數
cos(number); // * cos函數
acos(number); // * arccos函數
tan(number); // * tan函數
atan(number); // * arctan函數
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一個參數對第二個參數取余
convert(number, units); // * 在數字之間轉換
unit(number, units); // * 不轉換的情況下替換數字的單位
color(string); // 將字符串或者轉義后的值轉換成顏色
rgb(@r, @g, @b); // 轉換為顏色值
rgba(@r, @g, @b, @a); // 轉換為顏色值
argb(@color); // 創建 #AARRGGBB 格式的顏色值
hsl(@hue, @saturation, @lightness); // 創建顏色值
hsla(@hue, @saturation, @lightness, @alpha); // 創建顏色值
hsv(@hue, @saturation, @value); // 創建顏色值
hsva(@hue, @saturation, @value, @alpha); // 創建顏色值
hue(@color); // 從顏色值中提取 hue 值（色相）
saturation(@color); // 從顏色值中提取 saturation 值（飽和度）
lightness(@color); // 從顏色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 從顏色中提取 hue 值，以HSV色彩空間表示（色相）
hsvsaturation(@color); // * 從顏色中提取 saturation 值，以HSV色彩空間表示（飽和度）
hsvvalue(@color); // * 從顏色中提取 value 值，以HSV色彩空間表示（色調）
red(@color); // 從顏色值中提取 'red' 值（紅色）
green(@color); // 從顏色值中提取 'green' 值（綠色）
blue(@color); // 從顏色值中提取 'blue' 值（藍色）
alpha(@color); // 從顏色值中提取 'alpha' 值（透明度）
luma(@color); // 從顏色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 飽和度增加 10%
desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合兩種顏色
greyscale(@color); // 完全移除飽和度，輸出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 輸出 @darkcolor，否則輸出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判斷一個值是否是顏色
isnumber(@numberOrAnything); // 判斷一個值是否是數字（可含單位）
isstring(@stringOrAnything); // 判斷一個值是否是字符串
iskeyword(@keywordOrAnything); // 判斷一個值是否是關鍵字
isurl(@urlOrAnything); // 判斷一個值是否是url
ispixel(@pixelOrAnything); // 判斷一個值是否是以px為單位的數值
ispercentage(@percentageOrAnything); // 判斷一個值是否是百分數
isem(@emOrAnything); // 判斷一個值是否是以em為單位的數值
isunit(@numberOrAnything, "rem"); // * 判斷一個值是否是指定單位的數值
例子
/*-------------------運算和函數--------------------------*/
@back:#333;
.test{
border: 1px solid @back*2;
background: lighten(#000, 10%);
color:darken(#000, 10%);
}