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