less快速入门

什么是Less？

Less(Leaner Style Sheets)是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合(mixin)、函数等功能，让CSS更容易维护、复用、扩展，简单来说用了less，你就可以像写js一样去写你的css样式；

Less的出现并不是取代了CSS，也没有裁剪CSS原有的特性，而是在现有的CSS语法的基础去加入程序式语言的特征，也就是浏览器并不能识别less的，less文件要先转成css文件才可以（less框架内置了转码less-css）；

我们安装less包后可以通过命令：lessc xx.less xx.css就可以把xx.less 转成 xx.css

Less的使用

变量(Variables)

规范

• 必须有@为前缀；
• 不能有特殊字符；
• 不能以数字开头
• 大小写敏感

用法

1、用于属性值 或 属性名

@width: 10px;
@height: @width + 10px;

@property: color;

.demo {
  width: @width;
  height: @height;
  @{property}: #ddd;
}

// 上面的写法等于
.demo {
  width: 10px;
  height: 20px;
  color: #ddd;
}

2、用于选择器名

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

3、用于URLs

@images: "../src/img";

.demo {
  background: url("@{images}/mhk.png");
}

4、用于引用

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

5、使用属性后面对应的值，v3.0后才有

.widget {
  color: #efefef;
  background-color: $color;  // 用‘$’符来引用
}

// 等同于
.widget {
  color: #efefef;
  background-color: #efefef;
}

注意项

• 变量可以先使用后声明，但是一般为了可读性，我还是建议先声明后使用；
• 假如你import了多个less文件，多个文件中定义的变量不会互相影响；

混合(Mixins)

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

用法

1、无参数

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.demo {
  color: #ddd;
  .bordered();
}

// 等同于
.demo {
  color: #ddd;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

2、带参数

.fon-style(@fontSize: 14px, @fontColor: #000) {
  font-size: @fontSize;
  color: @fontColor;
}

.demo1 {
  .fon-style(16px, red);
}
.demo2 {
  .fon-style();
}

// 等同于
.demo1 {
  font-size: 16px;
  color: red;
}
.demo2 {
  font-size: 14px;
  color: #000;
}

3、Mixin守卫，像使用函数一样使用css

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin(@a) {
  color: @a;
}
.demo1 { .mixin(#ddd) }
.demo2 { .mixin(#555) }

// 等同于
.demo1 {
  background-color: black;
  color: #ddd;
}
.demo2 {
  background-color: white;
  color: #555;
}

更多详见：深入解读 Less 特性 | Less.js 中文文档 - Less 中文网

注意项

• 在mixin方法后面加上!important则方法内的所有属性都带上!important；
• mixin 传参可以通过它们的名称而不仅仅是位置。任何参数都可以通过它的名称传递，它们不必按照任何特殊的顺序；
• @arguments 在 mixin 中有一个特殊的含义，当 mixin 被调用时，它包含了所有传入的参数；

嵌套(Nesting)

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力，用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构

用法

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

// 等同于
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

注意项：

• &代表所有父选择器（不仅仅是最近的祖先）

运算(Operations)

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

函数(Function)

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

导入(Importing)

如果你想当前less文件去引用其他less文件中的一些变量等，可以通过@import去导入less文件，如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

全局使用less

上面说了多个less文件中变量不会互相影响，但是项目中如果我们想定义一些全局变量给多个文件去用，怎么实现呢？

1、安装 style-resources-loader 插件

yarn add style-resources-loader 

2、webpack.config.js配置中配置less的相关

找到对应的less-loader配置，在配置后面跟上style-resources-loader配置

{
  loader: 'style-resources-loader',
  options: {
    // 在对应的下面文件中的变量将可以全局使用；
    patterns: path.resolve(__dirname, '../src/assets/params.less'),
  },
}