LESS
變量
變量允許單獨(dú)定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用
混合
混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中滤奈，從而簡單實(shí)現(xiàn)class B繼承class A中的所有屬性摆昧。可以帶參數(shù)地調(diào)用
嵌套規(guī)則
可以在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承蜒程、
函數(shù)&運(yùn)算
運(yùn)算提供了加绅你，減，乘昭躺，除操作忌锯；我們可以做屬性值和顏色的運(yùn)算
在客戶端使用
引入你的.less樣式文件的時(shí)候要設(shè)置rel屬性值為 “stylesheet/less”:
<link rel="stylesheet/less"type="text/css"href="styles.less">
然后點(diǎn)擊download下載less.js, 在中引入:
<script src="less.js"type="text/javascript">
注意你的less樣式文件一定要在引入less.js前先引入。
備注：請(qǐng)?jiān)诜?wù)器環(huán)境下使用领炫！本地直接打開可能會(huì)報(bào)錯(cuò)偶垮！
監(jiān)視
通過如下代碼監(jiān)測less樣式，自動(dòng)編譯為css樣式驹吮，從而減少我們修改less代碼后需按F5后才看到實(shí)際效果的繁瑣步驟针史。
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
Color 函數(shù)
LESS 提供了一系列的顏色運(yùn)算函數(shù). 顏色會(huì)先被轉(zhuǎn)化成HSL色彩空間, 然后在通道級(jí)別操作:
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 @colorf
adeout(@color,10%);// return a color 10% *more* transparent than @color
fade(@color,50%);// return @color with 50% transparency
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
mix(@color1,@color2);// return a mix of @color1 and @color2
其他函數(shù)
escape(@string); // 通過 URL-encoding 編碼字符串
e(@string); // 對(duì)字符串轉(zhuǎn)義
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替換屬性值的單位
color(@string); // 將字符串解析為顏色值
data-uri([mimetype,] url); // * 將資源內(nèi)嵌到css中晶伦，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 將數(shù)字轉(zhuǎn)換為百分比碟狞，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 計(jì)算數(shù)字的平方根
abs(number); // * 數(shù)字的絕對(duì)值
sin(number); // * sin函數(shù)
asin(number); // * arcsin函數(shù)
cos(number); // * cos函數(shù)
acos(number); // * arccos函數(shù)
tan(number); // * tan函數(shù)
atan(number); // * arctan函數(shù)
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一個(gè)參數(shù)對(duì)第二個(gè)參數(shù)取余
convert(number, units); // * 在數(shù)字之間轉(zhuǎn)換
unit(number, units); // * 不轉(zhuǎn)換的情況下替換數(shù)字的單位
color(string); // 將字符串或者轉(zhuǎn)義后的值轉(zhuǎn)換成顏色
rgb(@r, @g, @b); // 轉(zhuǎn)換為顏色值
rgba(@r, @g, @b, @a); // 轉(zhuǎn)換為顏色值
argb(@color); // 創(chuàng)建 #AARRGGBB 格式的顏色值
hsl(@hue, @saturation, @lightness); // 創(chuàng)建顏色值
hsla(@hue, @saturation, @lightness, @alpha); // 創(chuàng)建顏色值
hsv(@hue, @saturation, @value); // 創(chuàng)建顏色值
hsva(@hue, @saturation, @value, @alpha); // 創(chuàng)建顏色值
hue(@color); // 從顏色值中提取hue值（色相）
saturation(@color); // 從顏色值中提取saturation值（飽和度）
lightness(@color); // 從顏色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 從顏色中提取hue值，以HSV色彩空間表示（色相）
hsvsaturation(@color); // * 從顏色中提取saturation值婚陪，以HSV色彩空間表示（飽和度）
hsvvalue(@color); // * 從顏色中提取value值族沃，以HSV色彩空間表示（色調(diào)）
red(@color); // 從顏色值中提取 'red' 值（紅色）
green(@color); // 從顏色值中提取 'green' 值（綠色）
blue(@color); // 從顏色值中提取 'blue' 值（藍(lán)色）
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%); // 設(shè)定透明度為 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); // 判斷一個(gè)值是否是顏色
isnumber(@numberOrAnything); // 判斷一個(gè)值是否是數(shù)字（可含單位）
isstring(@stringOrAnything); // 判斷一個(gè)值是否是字符串
iskeyword(@keywordOrAnything); // 判斷一個(gè)值是否是關(guān)鍵字
isurl(@urlOrAnything); // 判斷一個(gè)值是否是url
ispixel(@pixelOrAnything); // 判斷一個(gè)值是否是以px為單位的數(shù)值
ispercentage(@percentageOrAnything); // 判斷一個(gè)值是否是百分?jǐn)?shù)
isem(@emOrAnything); // 判斷一個(gè)值是否是以em為單位的數(shù)值
isunit(@numberOrAnything, "rem"); // * 判斷一個(gè)值是否是指定單位的數(shù)值
含*號(hào)的函數(shù)只在1.4.0 beta以上版本中可用
