Less 语法快速入坑

注：本文适合前端新手或 scss 转 less 的开发者阅读，当然如果你是老司机也欢迎给我一些指点:blush:

变量

声明变量用 @ 符号

@nice-blue: #5B83AD;
#header {
  color: @light-blue;
}

Outputs

#header {
  color: #5B83AD;
}

嵌套语法

less 与 scss 基本一致

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

指令属性冒泡

嵌套在选择器中的指令会冒泡到最外层去，@media, @supports 以及 @document 指令会将选择器规则与指令的规则进行合并，而 @keyframe, @font-face 则会单独分开。看例子：

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2px;
}

Outputs

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}
#a {
  color: blue;
  padding: 2px;
}
@font-face {
  src: made-up-url;
}

操作符

支持 + - * /

计算结果的单位由最左边的单位决定，定为“结果单位”。后面的出现的单位如果可以转化为结果单位，则转化后进行计算。否则忽略当前单位（当做结果单位）直接进行计算。看例子：

// 最左边单位是cm, “结果单位” 是 cm， 10mm 又可以 转化为 1cm
// 因此最终的计算结果为 2cm + 5cm + 1cm = 8cm
@a1: 2 + 5cm + 10mm; 
// px 不能转化为 cm ， 后面的10px 被当成 10cm 处理，结果为17cm
@a2: 2 + 5cm + 10px;

注意： * / 运算， 不会进行单位转化，而是直接忽略后面的单位

// 等价于 2cm * 3，结果为 6cm
@base: 2cm * 3mm;

color 颜色值也支持运算规则

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

Mixins

常规用法

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {  
  .my-hover-mixin;
}

Outputs

button {  
  &:hover {
    border: 1px solid red;
  }
}

混合用法

不推荐的做法, mixin 样式会被保留，实际上我们想要的是 button 选择器的样式，有保留需求推荐用 extends

.my-hover-mixin {
  &:hover {
    border: 1px solid red;
  }
}
button {  
  .my-hover-mixin;
}

Outputs

.my-hover-mixin {
  &:hover {
    border: 1px solid red;
  }
}
button {  
  &:hover {
    border: 1px solid red;
  }
}

带参数的mixins

Height mixin 支持传入一个参数来确定高度和行高，默认为 10px

.Height(@h:10px){
    height: @h;
    line-height: @h;
}
div{  
    .Height(20px)
}

注意单位不能省略，如果想偷懒不写单位，可以改写成下面的形式。不过不推荐，带上单位会便于对这个函数的理解。

.Height(@h:10){
    height: @h * 1px;
    line-height: @h * 1px;
}
div{  
    .Height(20)
}

不定参数传递

.padding(...){
    padding: @arguments;
}
.div1{
    .padding(1px, 2px)
}
.div2{
    .padding(1px, 2px, 3px)
}

内置函数

todo 待补充，整理业务常用的内置函数，并列举具体场景

Extends 继承

常见的使用场景，Button 样式定义

.base-btn {
    height: 36px;
    line-height: 36px;
    min-width: 100px;
    border-radius: 4px;
}

.default-btn {
    &:extend(.base-btn);
    color: black;
    background-color: white;
}
.primary-btn {
    &:extend(.base-btn);
    color: white;
    background-color: red;
}

Outputs

.base-btn,
.default-btn,
.primary-btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 4px;
}
.default-btn {
  color: black;
  background-color: white;
}
.primary-btn {
  color: white;
  background-color: red;
}

Extends VS Mixins

虽然说这两个功能都是为提高复用性而存在的，但是本质上还是有区别的，理解它们本质上的功能，可以利于我们编写更高效的 less 代码。

还是以 Button 为例子，下面 mixin 的方式实现

.base-btn {
    height: 36px;
    line-height: 36px;
    min-width: 100px;
    border-radius: 4px;
}
.default-btn {
  .base-btn;
  color: black;
  background-color: white;
}
.primary-btn {
  .base-btn;
   color: white;
   background-color: red;
}

Outputs

.base-btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 4px;
}
.default-btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 4px;
  color: black;
  background-color: white;
}
.primary-btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 4px;
  color: white;
  background-color: red;
}

可见 使用 Mixins 并不会对公共样式进行合并，而是类似于将一个代码块复制到相应的选择器中。

因此个人认为（只是个人观点:joy:） extends 适合于对现有选择器样式的继承，类似于 btn-default 与 btn-primary 继承默认的 button 样式。

button {  
    height: 36px;
    line-height: 36px;
    min-width: 100px;
    border-radius: 4px;
}
.default-btn {
    &:extend(button);
    color: black;
    background-color: white;
}
.primary-btn {
    &:extend(button);
    color: white;
    background-color: red;
}

而 mixins 适用于对常见样式的封装，例如：元素居中、渐变、文字溢出（...代替）等常见样式。

text-overflow() {  
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.center-position() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.container {
    .text-overflow();
    .center-position(); 
}

笔者之前的技术栈是scss，最近也在学习 less，把目前学到且比较常见的知识点做了个总结，当然 less 的知识点远远不止这些，不足的地方，随时欢迎大佬们的指点:smile:。

参考文档：

- less 文档手册

- 掘金：学习Less-看这篇就够了