less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。


less中的注释

以//开头的注释，不会被编译到css文件中；

以/**/包裹的注释会被编译到css文件中。


less中的变量

使用@来声明一个变量，如：

@myColor：pink; 
@m: margin; 
@url:img/1.png;

注意：

  • less中的变量是块级作用域生效！
  • 在作为属性值使用时直接 background: @myColor 即可。
  • 如果该变量是用作属性名，则加上大括号：@{m}:10px。
  • 如果该变量作为url，也要加上大括号：background:url(@{url})。
  • 在less中变量是延迟加载的，比如.demo{@var:1; two:@var; @var:2;}最终two的值为2，因为变量延迟加载，等到加载var时，下面的声明覆盖了上面的声明。


less中的嵌套规则

  1. 基本嵌套规则
.wrap{
    color:blue;
    .inner{
        color:red;
    }
    &:hover{
        color:pink;
    }
}

最终的效果是：

.wrap{color:blue}
.wrap .inner{color:red}
.wrap:hover{color:pink}
  1. &的使用
    如上面例子所示，&可以表示平级的选择器，不让其变成子级。

less中的混合(mixin)

混合就是将一系列属性从一个规则集引入到另一个规则集的方式。

  1. 普通混合，这样的混合less，编译后公共的部分依旧存在css中。
.myStyle{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.inner1{
    .myStyle;
}
.inner2{
    .myStyle;
}
  1. 不带输出的混合，将变量转换成类似函数的方式，公共部分不会输出。
.myStyle(){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.inner1{
    .myStyle;
}
.inner2{
    .myStyle;
}
  1. 带参数的混合，可以进一步抽取出属性值，便于统一设置。
.myStyle(@w,@h){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:@w;
    height:@h;
}
.inner1{
    .myStyle(100px,100px);
}
.inner2{
    .myStyle(200px,200px);
}
  1. 带参数并且有默认值的混合，指定了默认值后可以不传参数。
.myStyle(@w:100px,@h:100px){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:@w;
    height:@h;
}
.inner1{
    .myStyle();
}
.inner2{
    .myStyle(200px,200px);
}
  1. 命名参数，可以传入指定的属性值。
.myStyle(@w:100px,@h:100px){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:@w;
    height:@h;
}
.inner1{
    .myStyle();
}
.inner2{
    .myStyle(@h:200px);
}
  1. 使用@import分离和引用，更好的提高复用性。
//在my.less文件中定义好：
.myStyle(@w:100px,@h:100px){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:@w;
    height:@h;
}

//在其他less中引用：
@import "./my.less";
.inner{.myStyle()}
  1. 匹配模式，可以解决一些比较复杂的复用需求。
//比如画三角形：要能够传入参数，控制它的朝向，高，颜色。

.triangle(@_,@w,@c){
    width:0px;
    height:0px;
}
.triangle(L,@w,@c){
    border-width:@w;
    border-color:transparent @c transparent transparent;
}
.triangle(R,@w,@c){
    border-width:@w;
    border-color:transparent transparent transparent @c;
}
.triangle(T,@w,@c){
    border-width:@w;
    border-color:transparent transparent @c transparent;
}
.triangle(B,@w,@c){
    border-width:@w;
    border-color:@c transparent transparent transparent;
}

//L/R/T/B是自己定义的标识符，在传入参数的时候可以指定匹配的mixin
//如果有同名的mixin，且标识符参数是@_，那么不管匹配哪个都会将其也包括进去

.demo{.triangle(R,40px,red)}
  1. arguments变量，用的较少。
.myStyle(@1,@2,@3){
    border:@arguments;
}
.demo{.myStyle(1px,solid,red)}


less运算

在less中可以进行加减乘除的运算，只需要一方带单位即可。

width:(100+100px)


less中避免编译

.myStyle{
    padding:~"calc(10px + 10px)";//这样less不会对引号中内容进行编译
}

//css中的结果：
.myStyle{
    padding: calc(10px + 10px); //因为浏览器本来就支持这种属性值
}


less继承

.myStyle{
    border: 1px solid red;
}
.myStyle.test{
    background:red;
}
.myStyle:hover{
    background:green;
}

//继承
#wrap{
    width:100px;
    height:100px;
    .inner{
        //加上all代表.myStyle的所有状态都继承
        &:extend(.myStyle all); 
        &:nth-child(1){}
        &:nth-child(2){}
    }
}

性能比混合高，可以将编译成的css文件中重复的样式进行合并。

但灵活度比混合低，不能传入参数。