0410-LESS

LESS

变量

变量允许单独定义一系列通用的样式，然后在需要的时候去调用

---

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。可以带参数地调用

---

嵌套规则

可以在一个选择器中嵌套另一个选择器来实现继承、

---

函数&运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算

---

在客户端使用

引入你的.less样式文件的时候要设置rel属性值为 “stylesheet/less”:

<link rel="stylesheet/less"type="text/css"href="styles.less">

然后点击download下载less.js, 在中引入:

<script src="less.js"type="text/javascript">

注意你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

监视

通过如下代码监测less样式，自动编译为css样式，从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。

<script>less = { env: 'development'};</script>

<script src="less.js"></script>

<script>less.watch();</script>

---

Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成HSL色彩空间, 然后在通道级别操作:

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

---

其他函数

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"); // * 判断一个值是否是指定单位的数值

含*号的函数只在1.4.0 beta以上版本中可用