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】。