Less

Less

  • Less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展
  • Less即可以在客户端上运行，也可以借助Node.js在服务端运行。

Less中文官网：http://lesscss.cn

bootstrap中的Less教程:http://www.bootcss.com/lesscss/

Less编译工具

Less中的注释

  • 以//开头的注释，不会被编译到CSS文件中（给开发者看）
  • 以/**/包裹的注释会被编译到CSS文件中（给用户看）

Less中的变量

  • 用@来声明一个变量 ： @pink:pink; @selector:#wrap
  • 作为普通属性值来使用：直接使用@pink
  • 作为选择器和属性名：@{selector}的形式
  • 作为URL：@{url}
  • 变量的延迟加载
    • 块级作用域
    • 先加载所有变量再给属性、属性名、选择器等赋值

Less中的嵌套规则

  • 基本的嵌套规则
  • &的使用
    • 使用&表示与父代码块同级（伪类 例如hover）&:hover写在需要描述的选择器的代码块内部

Less中的混合

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

普通混合

  • 以类名方式书写和引用（会输出到CSS）
//jz为混合
.jz{
  display:flex;
  flex-direction:row;
}
#wrap{
  .inner{
    .jz;
  }
}

不带输出的混合

  • 不输出到CSS

  • 普通混合的写法+（）

//jz为混合
.jz(){
  display:flex;
  flex-direction:row;
}
#wrap{
  .inner{
    .jz;
  }
}

带参数的混合

//jz为混合
.jz(@w,@h,@c){
  display:flex;
  flex-direction:row;
  width:@w;
  height:@h;
  color:@c;
}
#wrap{
  .inner{
    .jz(100px,200px,pink);
  }
}

带参数并且有默认值的混合

//jz为混合
.jz(@w:10px,@h:10px,@c:white){
  display:flex;
  flex-direction:row;
  width:@w;
  height:@h;
  color:@c;
}
#wrap{
  .inner{
    .jz(100px,200px,pink);
  }
}

命名参数

//jz为混合
.jz(@w:10px,@h:10px,@c:white){
  display:flex;
  flex-direction:row;
  width:@w;
  height:@h;
  color:@c;
}
#wrap{
  .inner{
    //命名参数
    .jz(@c:pink);
  }
}

匹配模式

  • 重载思想（函数）
//jz为混合
.jz(L,@w:10px,@h:10px,@c:white){
  display:flex;
  flex-direction:row;
  width:@w;
  height:@h;
  color:@c;
}
.jz(R,@w:10px,@h:10px,@c:white){
  display:block;
  width:@w;
  height:@h;
  color:@c;
}
#wrap{
  .inner{
    //命名参数
    .jz(L,@c:pink);
  }
}

arguments变量

.border(@1,@2,@3){
  border:@arguments;
}

.index{
  .border(1px,solid,black);
}

Less运算

.width{
  width:(100+100px);
}

Less继承

//被继承的类 不能有参数
.juzhong{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}
#wrap{
  position:relative;
  width:300px;
  height:300px;
  border:1px solid;
  margin:0 auto;
  .inner:extend(.juzhong){
    //or &:extend(.juzhong);
    &:nth-child(1){
      width:100px;
      height:100px;
      background:pink;
    }
    &:nth-child(2){
      width:50px;
      height:50px;
      background:yellow;
    }
  }
}

Less避免编译

*{
  margin:(10*100px);//Less运算
  padding:~"calc(100px+100)";  //避免编译  ~"xxx";
}

掘金：前端LeBron

知乎：前端LeBron

持续分享技术博文，关注微信公众号👇🏻

img