less
环境安装
1、安装nodejs
在部分win8系统当中无法安装：
解决办法的是 已管理员权限运行cmd然后再按写命令切换到安装包目录，直接命令执行
2、安装完成nodejs之后
检测是否安装完成 node –v 查看版本
然后检测 npm是否自带 npm –v 查看版本
3、命令行安装：npm install –g less
4、Lessc –v 查看版本 是否安装成功
5、lessc test.less test.css,编译成css
介绍
中文网 (http://lesscss.cn/) http://www.1024i.com/demo/less/
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
webstorm中自动编译：
自动：新建一个less文件，webstorm顶部会有提示是否监听动态编译，点击yes，确定
手动：设置=》Tools=》File Watchers =》设置选项
file type：less
program：找到node中的lessc.cmd解析器
语法
1、/注释：在css当中可以使用，所有编译的过程当中生成在css文件/ 2、//注释：css不支持,不会编译在css文件
3、必须写好 @charset "UTF-8";在编译，如果晚了就删掉css重新编译
变量
1、必须@前缀，：是等于的意思，必须分号结束；
2、不能以数组开头，不能包含特殊字符，区分大小写
3、变量用于字符拼接使用方法
@mainColor:#e92323;
@className:box;
div{
background: @mainColor;
}
a:hover{
color: @mainColor;
}
.@{className}{
color: @mainColor;
}
Mixin混入
类混入
xxxxxxxxxx
.w50{
50%;
}
.f_left{
float: left;
}
.f_right{
float: right;
}
/*类混入*/
.w50-f_left{
.w50();
.f_left();
}
函数混入
定义函数
函数不会被翻译成css，调用才会
xxxxxxxxxx
.f_left(){
float: left;
}
.f_right(){
float: right;
}
带参数的函数及调用
参数可以有默认值
xxxxxxxxxx
.w50(){
50%;
}
.f(@direction:left){//给参数设置默认值
float: @direction;
}
.borderRadius(@100px){
border-radius: @width;
-webkit-border-radius:@width;
-moz-border-radius:@width;
-o-border-radius:@width;
-ms-border-radius:@width;
}
.w50-f_left{
.w50();//调用函数
.f(right);//调用函数
.borderRadius(20px);//调用函数
}
嵌套
1、后代关系
2、需要连接的情况
xxxxxxxxxx
.wjs_app{
display: block;
img{
display: none;
}
/*需要连接的情况：&*/
&:hover{
img{
display: block;
position: absolute;
left: 50%;
margin-left:-60px;
border: 1px solid #ccc;
border-top: none;
top:40px;
z-index: 100000;
}
}
> div{
display: block;
}
}
import导入
已有一个banner.less
xxxxxxxxxx
@import "banner";
运算及函数
xxxxxxxxxx
@num:5;
ul{
100%*@num;
li{
100%/@num;//数值计算
color: red+yellow+blue;//颜色计算
background: gray*0.3;
/*内置函数*/
border-color: darken(red,20%);//内置函数
}
}
使用
- 无法在浏览器端直接使用、
- 浏览器不识别less
- 必须解析成css代码
- 通过less解析插件（javascript插件）http://lesscss.cn/#download-options下载less.js
- 要加type属性
- less.watch()自动更新无需刷新
- 以http形式打开网页预览
内置函数
例子
xxxxxxxxxx
@back:#333;
.test{
border: 1px solid @back*2;
background: lighten(#000, 10%);
color:darken(#000, 10%);
}
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"); // * 判断一个值是否是指定单位的数值