关于less:Less用法小记

办法一：通过双斜杠 // 的形式来进行正文，应用此办法来进行正文在编译成 css 后，正文在 css 文件中不会进行展现。
办法二：通过斜杠加型号 /** */ 的形式来进行正文，正文会留在编译生成的 css 文件中。

变量的定义是通过 @变量: 变量值 的模式实现的。

@width: 100px; // 这里肯定须要有分号结尾

.box {width: @width;}

// 编译后果
.box {width: 100px;}

less变量不仅仅能代表平时的 css 属性值，有其它很多的场景下也能应用到 less 变量。

@selector: h2;

@{selector} {color: red;}

// 编译后果
h2 {color: red;}

在 less 应用门路来引入文件时，须要在门路两边加上单引号或者双引号

@images: '../images';  // 这里必须要有引号

.box {background-image: url('@{images}/img.jpg'); // 这里也必须要是应用引号，并且在门路中应用变量时须要大括号包裹变量
}

// 编译后果
.box {background-image: url('../images/img.jpg')
}

在应用 import 关键字引入其它 less 时，变量也能发挥作用

// external.less
@color: red;

// index.less
@path: '../style/'
@import '@{path}/external.less'

.box {color: @color;}

// 编译后果
.box {color: red;}

变量值是属性名或属性名一部分时，在援用的时候须要带上大括号。

@color: color;

.box {@{color}: green;
    background-@{color}: red;
}

// 编译后果

.box {
  color: green;
    background-color: red;
}

有写过 css 的同学应该晓得，在一些状况下，局部类选择器有雷同的 css 属性设置，如果如果想要在各个类选择器中复用这部分 css 属性，那么须要把公共的 css 属性独自拿进去，并且为每个类选择器设置这些公共 css 属性，而后再独自为每个类选择器设置各自的 css 属性。

.box1,.box2 {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
}

.box1 {// box1 的 css 属性设置}

.box2 {// box2 的 css 属性设置}

在 less 中，能够把这些步骤进行简化，容许将一个类的属性作为另一个类的属性，这样能够存储多个属性的设置，在其它的类中失去复用。

.box {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
}

.box1 {.box();
  // box1 的 css 属性设置
}

.box2 {
  .box;
  // box2 的 css 属性设置
}

// 编译后果
.box {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
}

.box1 {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
  // box1 的 css 属性设置
}
.box2 {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
  // box2 的 css 属性设置
}

留神：你可能会看到有些 less 文件外面的混合形式没有在类选择器后加上括号，例如.box，这种形式也是可行的，无需纠结应用哪种形式，本人在编写 less 时放弃格调对立即可。

这里看到公共款式也被编译到 css 中去了，如果不想公共款式被编译到 css 中去，那么只须要在类名前面加上括号。

.box() {            // 减少括号
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
}

.box1 {.box();
  // box1 的 css 属性设置
}

.box2 {
  .box;
  // box2 的 css 属性设置
}

// 编译后果

.box1 {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
  // box1 的 css 属性设置
}
.box2 {
  color: #222;
  background-color: #ddd;
  border-radius: 8px;
  // box2 的 css 属性设置
}

能够发现 .box 这个类没有在 css 中呈现，这样就达到了目标。

less中混合的用法和 js 中函数的用法比拟类似，既能够通过传参的形式来传值，也能够给与参数默认值，上面给出示例代码

@borderWidth: 50px;
@borderStyle: dotted;
@borderColor: green;

.box(@width: 10px, @style: solid, @color: red) {
  margin-top: 20px;
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  border: @width @style @color;
}

.box1 {.box(); // 没有传入参数，那么应用函数默认参数
}

.box2 {.box(@borderWidth, @borderStyle, @borderColor); 
}

.box3 {.box(@style: double);  // 为单个参数传参
}

// 编译后果

.box1 {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  background-color: lightskyblue;
  border: 10px solid red;
}
.box2 {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  background-color: lightskyblue;
  border: 50px dotted green;
}
.box3 {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  background-color: lightskyblue;
  border: 10px double red;
}

能够利用关键字进行匹配，这个和函数重载的形式相似

.triangle(@_, @width: 10px, @color: lightskyblue) { // @_代表占位符
  width: 0px;
  height: 0px;
  border: @width solid @color;
}

.triangle(top, @width: 10px, @color: lightskyblue) {border-color: transparent transparent @color transparent;}

.triangle(right, @width: 10px, @color: lightskyblue) {border-color: transparent transparent transparent @color;}

.triangle(bottom, @width: 10px, @color: lightskyblue) {border-color: @color transparent transparent transparent;}

.triangle(left, @width: 10px, @color: lightskyblue) {border-color: transparent @color transparent transparent;}

.triangle1 {.triangle(top);
}

.triangle2 {.triangle(right);
}

.triangle3 {.triangle(bottom);
}

.triangle4 {.triangle(left);
}

// 编译后果

.triangle1 {
  width: 0px;
  height: 0px;
  border: 10px solid lightskyblue;
  border-color: transparent transparent lightskyblue transparent;
}
.triangle2 {
  width: 0px;
  height: 0px;
  border: 10px solid lightskyblue;
  border-color: transparent transparent transparent lightskyblue;
}
.triangle3 {
  width: 0px;
  height: 0px;
  border: 10px solid lightskyblue;
  border-color: lightskyblue transparent transparent transparent;
}
.triangle4 {
  width: 0px;
  height: 0px;
  border: 10px solid lightskyblue;
  border-color: transparent lightskyblue transparent transparent;
}

在 less 中没有 if else 这样的判断关键字，但有相应的要害来代替，那就是when。

// when 的根底用法
.border(@width) when(@width > 200px) {border-color: lightskyblue;}

// not 关键字相当于!，用于取反
.border(@width) when not (@width > 200px) {border-color: green;}

// and 相当于 &&
.border(@width, @height) when (@width > 200px) and (@height < 200px) {border-color: red;}

// 逗号运算符相当于 ||
.border(@width, @height) when (@width > 200px), (@height < 200px) {border-color: blue;}

在 less 中混合办法能够像 js 中rest语法一样，接管不定长度的参数

.boxShadow(@a, @rest...) {
  width: 275px;
  height: 70px;
  background-color: blue;
  box-shadow: @arguments; // @arguments 接管了所有的参数
  text-shadow: @a @rest;
}

.box4 {
  margin-top: 20px;
  .boxShadow(12px, 12px, 0px, 0px, red);
}

// 编译后果

.box4 {
  margin-top: 20px;
  width: 275px;
  height: 70px;
  background-color: blue;
  box-shadow: 12px 12px 0 0 red;
  text-shadow: 12px 12px 0 0 red;
}

命名空间对通用类名进行隔离，防止类名命名抵触的问题

.container1 {
  .title {color: #222;}
}

.container2 {
  .title {color: #ddd;}
}

.box1 {.container1 > .title}

.box2 {.container2 > .title}

// 编译后果

.box1 {color: #222;}

.box1 {color: #ddd;}

important关键字用于减少 css 属性的优先级，用于笼罩其它的同名 css 属性，当在混合中应用 important 时，类中的所有 css 属性都会被追加上 important 标记。

.base {
  color: red;
  background: green;
}

.box {.base() important;
}

// 编译后果

.box {
  color: red !important;
  background: green !important;
}

在 less 中循环是通过表达式和模式匹配组合的类递归的形式来实现的，这里举个例子，应用 less 中的循环实现对文本行数限度的枚举。

.line(@i) when (@i > 0) {.line-@{i} {-webkit-line-clamp: @i;}
  .line(@i - 1); // 类递归调用
}

.line(3);

// 编译后果
.line-3 {-webkit-line-clamp: 3;}
.line-2 {-webkit-line-clamp: 2;}
.line-1 {-webkit-line-clamp: 1;}

有些 css 属性须要减少空格或逗号来拼接属性值，在混合场景下，能够通过在属性名后追加后缀实现拼接

.base-shadow {
  width: 275px;
  height: 70px;
  background-color: lightgreen;
  box-shadow+: 0px 12px 0px 0px lightyellow;
}

.mixin-shadow {box-shadow+: 12px 0px 0px 0px lightcoral;}

// 编译后果

.base-shadow {
  width: 275px;
  height: 70px;
  background-color: lightgreen;
  box-shadow: 0px 12px 0px 0px lightyellow;
}
.mixin-shadow {
  width: 275px;
  height: 70px;
  background-color: lightgreen;
  box-shadow: 0px 12px 0px 0px lightyellow, 12px 0px 0px 0px lightcoral;
}

.base-comma {transform+_: scale(1.5);  // +_后缀减少空格
}

.mixin-comma {.base-comma();
  transform+_: translate(50%); //+_后缀减少空格
}

// 编译后果

.base-comma {transform: scale(1.5);
}
.mixin-comma {transform: scale(1.5) translate(50%);
}

通过在转义字符后面加上 ~ 符号，编译器不会对~ 润饰的表达式进行编译。

.box {color: ~'green';}

// 编译后果
.box {color: green;}

看看 antd 中在是如何应用 less 中本义，这里举一个 antd modal 组件的例子。

@ant-prefix: ant;
@dialog-prefix-cls: ~'@{ant-prefix}-modal'

@{dialog-prefix-cls} {position: fixed;}
  
// 编译后果
ant-modal {position: fixed;}

这里其实就是属性值变量拼串的场景，我的项目前缀拼上具体的组件名充当组件类名前缀。
可能有同学会纳闷，干么非要应用本义，间接应用变量的根底用法不就行了吗？那就试试看会有什么样的后果。

@ant-prefix: ant;
@dialog-prefix-cls: @{ant-prefix}-modal // error: variable value expected

那就换一种形式

@ant-prefix: ant;
@dialog-prefix-cls: "@{ant-prefix}-modal"

// 编译后果
"ant-modal" {         // error: at-rule or selector expected
  z-index: inherit;
  position: fixed;
}

css对带双引号的选择器是不意识的，开始报错。

论断：就是在应用变量拼串的时候须要应用本义来辅助应用。

就和 oop 语言中的继承有着相似的含意，能够从其它类继承其属性。

.base {color: red;}

.box {&:extend(.base);
  background: green;
}

// 编译后果
.base,
.extend-base {color: red;}

.extend-base {background: green;}

https://www.w3cschool.cn/less/nested_directives_bubbling.html

关于less:Less用法小记

正文

变量

变量的根底应用

变量的扩大应用

选择器

URL 门路

属性名

混合办法

根底应用办法

混合参数

匹配

条件判断

数量不定的参数

命名空间

important 关键字

循环

合并

逗号

空格

本义

继承

参考

Just My Socks（注册教程内含优惠码）

关于less:Less用法小记

正文

变量

变量的根底应用

变量的扩大应用

选择器

URL 门路

属性名

混合办法

根底应用办法

混合参数

匹配

条件判断

数量不定的参数

命名空间

important 关键字

循环

合并

逗号

空格

本义

继承

参考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）