10分钟学会Less

Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它没有去掉任何 CSS 的功能，而是在现有的语法上扩充了 CSS 语言，增添了许多额外的功能特性，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

1、引入less

方式一、

npm install less -g

方式二、

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

2、变量

以 @ 开头 定义变量，并且使用时 直接 键入 @名称

// 导入
import "common.less";
// 值变量
@baseFont: 50px;
// 选择器变量
@mySelector: #wrap;
@background: {
  background: red;
};
html {
  font-size: @baseFont;
}
// 继承
#main{ &:extend(html); }
@{mySelector} { //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}

body {
  @background();
}


/******************生成的CSS*******************/
html,
#main {
  font-size: 50px;
}
#wrap {
  color: #999;
  width: 50%;
}
body {
  background: red;
}
/*# sourceMappingURL=test.css.map */

3、运算

• 加减法时 以第一个数据的单位为基准
• 乘除法时 注意单位一定要统一

4、嵌套

& ：代表父级选择器

5、作用域

采用就近原则

@font14: 10px;
@baseFont: 50px;
@img50: 50px;
.header {
  width: 200px + @baseFont;
  // 除法写法变化 ./或者加上小括号（推荐）
  height: 200px ./ @font14;
  background-color: green;
  > img {
    width: @img50;
    @img50: 80px;
    height: (82rem / @baseFont);
  }
  a {
    color: red;
    &:hover {
      color: blue;
    }
  }
}

/********** 生成的 CSS **********/

.header {
  width: 250px;
  height: 20px;
  background-color: green;
}
.header > img {
  width: 80px;
  height: 1.64rem;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}

6、函数

7、混合

推荐手册：https://www.runoob.com/manual/lessguide/features/#variables-feature