LESS总结

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

1、安装：

①安装js解析器node.js;

③使用npm安装less，默认安装目录在用户名\node_modules这里面

$ npm install -g less

2、运行

安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：

$ lessc styles.less

这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：

$ lessc styles.less > styles.css

若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。

执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。

3、在客户端使用

①可以在客户端直接使用

②编译为css后使用；

在客户端直接使用时先引入style.less，再引入less.js；

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

4、webstorm编译less

打开webstorm→file→settings→Tools→file watching，点击“+”→less文件→Program右侧点击“…”弹出对话框，选择在用户名\node_modules\npm里面的lessc.cmd文件，然后确定。

在less文件夹下会自动编译生成同名的css文件；

曾经配置webstorm的编译环境时总共遇到的问题，一开始在node.js官网下载了最新版本的V6.2的node.js，结果安装less的时候总是报错，换成稳定版本V4.4.4错误就没了，是新版本的node.js对less支持不好吗?反正我是搞不明白，能装上就行；

5、语法

1、less定义变量：

@color:#fff;#header{    color:@color}

变量可以用于属性(rule）、属性(rule）部件、属性值、选择器和选择器部件，定义时的形式【@变量名：变量值】，引用时，用于属性值【@变量名】【@{变量名}】两种形式都可以，用于属性、属性部件、选择器、选择器部件、字符串拼接，都必须使用【@{变量名}】的形式；

在下面的代码中，.header-top是选择器，top是选择器部件，font-size是属性，-size是属性部件，14px是属性值；

.header-top{    font-size:14px}

LESS变量没有先定义后使用的要求；

2、mixin：类和ID都直接对应mixin的样式库

.border(@px;@color){    border:solid @px @color;    font-size:@px*5;}.mixin{    .border(5px;@color);}

显示定义不带参数或者带参数的样式库，不会输出到编译后的CSS文件中；上面代码中的.border的样式就不会在编译后的CSS文件中出现；同样的

@px:@height;.border(){    border:solid @px @color;    font-size:@px*5;}.mixin{    .border();}

上面代码的.border的样式也不会在编译后的CSS文件中出现，但是如果将（）去掉，.border的样式就会在编译后的CSS文件中出现；

3、使用…令mixin接受数量不定的参数，使用@rest定义入参数组，@arguments定义所有参数；

.boxshadow(@x:0,@y:0,@blur:1px,@color:#fff){    box-shadow:@arguments}

4、推荐使用；作为mixin参数的分隔符：

.a(x1,x2,x3)//三个参数；a(x1,x2；x3)//两个参数，x1和x2为CSS属性列表；

5、使用命名空间避免重复

#myNameSpace{    .home{        border:1px solid black;    }    .work{        border:5px solid red;    }}

6、支持嵌套书写

<div id="outer">    <div id="inner"></div></div>

#outer{    border:1px solid black;    #inner{        border:5px solid red;    }}

7、用&代替元素本身，有&存在时解析同元素，无&出现时解析后代元素

a{    color:red;    &:hover{        color:black    }}

8、针对数值型的value进行运算，针对颜色有特有函数：

#outer{    background: lighten(@color,10%);}extract(@x,3)  //用来提取@x参数组中的第三个参数length（@x）   //返回@x参数组的参数个数ceil(@number)  //取最接近的大于@number的整数floor(@number) //与ceil()相反round(@x;@y)   //取@y位数的@x的近似值pow(@;@y)      //@x的@y次方convert        //转换可转换的单位unit           //去除或增加单位isnumber       //判定类型(isstring,isem,ispixel...)

9、继承extend，两种书写形式都可以，比mixins更简，可以对应所有选择器，mixin仅对应类和ID选择器

.cc:extend(#divv){}.dd{    &:extend(#divv);}

使用extend的好处：
①避免添加基础类，即.a和.b部分属性一直，当.b需要覆盖.a部分属性的时候就可以使用extend；

②使用extend可以减少CSS代码量，使用mixin：

使用mixin

.a{    font-size: 11px;}.b{    .a}

编译结果

.a {    font-size: 11px;}.b {    font-size: 11px;}

使用extend

.a{    font-size: 11px;}.b{    &:extend(.a);}

编译结果

.a,.b {    font-size: 11px;}

10、编写在@media内部的extend只匹配同一级@media声明内的选择器，向上、向下（嵌套）都不会匹配；编写在@media外的顶级extend则会匹配一切

@media screen{    .x:extend(.b){}//不匹配    .y:extend(.c){}//匹配    @media (min-width:1023px){        .b{        color:red;//不匹配        }    }    .c{        color:yellow//匹配        }}.z:extend(.b){}//匹配

11、less的单行注释使用//，无法显示在编译后的CSS中，所以推荐使用多行注释；

12、可以使用gulp等自动化构建工具对less进行自动的编译、対生成的css进行压缩、重命名，详见【2016.12.13 gulp】。