【愣锤笔记】温故而知新、嗯！来花几分钟时间极速重温less高级核心特性-CSDN博客

大家可以回想一下，上次学习less/sass是什么时候了？平时是不是除了嵌套、变量貌似也没用其他啥了？知识久了，部分内容也就遗忘了。但是学会的东西再捡起来是很快的！

是时候重新坚挺一下了！什么，坚挺？呸，什么玩意，重来。

是时候该重新新硬一下了！哦～？貌似也不对～硬一下？？？发刻～～～

是时候重新新温习一下了！！！嗯，这就说对了～

好，基本的安装就不提了，大家在在各种vue、react等项目，配置应该比谁都熟悉了。先说说和导入相关的吧，笔记使用的前提还是要导入的。

导入

css的导入

// 1.必须放在所有其他规则前面，即导入语句放在最顶部
// 文件地址是相对路径
@import url('./test.css');
复制代码

less的导入

// 文件地址是相对路径
// 没有url包裹地址
@import '../../styles/common.less';

// 可以省略.less的后缀
// 省略后作为less文件导入
@import '../../styles/common';

// 可以通过导入配置，定义更灵活的导入方式
// 基本使用
@import (配置1, 配置2 ……) '地址';

// eg1:将导入文件一律作为less文件处理
@import (less) './test.css';

// eg2: 一律是为css文件导入，无论文件名是什么
@import (less) './test.less' // 等同于@import url('./test.less');

// eg3: 多次导入只导入一次
// 这也是默认参数
@import (once) './test';
@import (once) './test';
// 最终只导入一次
复制代码

既然使用了less，那么所有的导入方式就统一成less的导入，不要混用；
所有的样式文件写成less，不要再使用css文件，保持统一。

变量

像less/sass/scss等这些css预处理器，给我们提供了很方便的一个特性就是可以在css中定义变量进行使用。比如我们可以将全局的主题色、辅色、描述色等定义成变量在所有样式文件中使用，这样即使设计的某些大范围的修改主题色的时候，我们修改起来也是很方便的。

基本用法

@开头用来定义变量，冒号后面为变量的值。

// 定义变量
@main-color: #f00;
@head: header;
@width: width;

// 我们将变量作为属性值使用
.header {
    color: @main-color;
}

// 可以将变量作为css属性使用
.header {
    @{width}: 100px;
}

// 也可以作为选择器使用
@{head} {
    width: 100px;
}
// 等同于
.header {}
复制代码

变量只能定义一次，重复定义取最后定义的值。类似于js中的变量覆盖。

// 重复定义两个变量
@color1: red;
@color1: blue;

// 最终为蓝色
.test__less {
    color: @color1;
}
复制代码

less的变量这个特性确实很好用，据说css4的变量提案也在如火如荼的进行中，希望尽快成为标准在各大浏览器普及吧！

嵌套

在以前不支持嵌套的时候，我们编写css往往需要一级一级的写，导致多些很多选择器，真的是刀耕火种的心酸！

不过BEM的css规范，从某种程度上减轻这个问题，但是BEM的规范也引发了很多小伙伴对它的吐槽吧！萝卜青菜、各有所爱。

less的嵌套，还是蛮好用的，可以很清晰的一眼看出css的结构和对应的html结构，也不用多写很多选择器。但是和BEM规范一起使用时，大家做好取舍吧。

.header-container {
    .avatar {
        width: 60px;
        height: 60px;
    }
    .user-name {
        
    }
}
复制代码

这个很简单就不多说了，就是支持嵌套的写法而已。

计算

less中允许+-*/的计算，不说个人而言，该特性用的不多，已知的值是没必要算的，但是对于未知的需要计算得到的，还是蛮好用的。

@fs: 12px;

.test__less {
    .flex;
    font-size: @fs * 2;
    font-weight: 200 * 2;
}

// 编译结果
.text_test__less__UJwa4 {
    display: flex;
    font-size: 24px;
    font-weight: 400;
}
复制代码

也不多说了，和小学加减法一样，看例子即可。

转译（原样输出）

转译，即不会对字符串内进行任何操作，而是原样输出。这样在某些我们不需要less执行操作对时候可以用到，例如calc属性。

.test__less {
  color: ~"#f00";
}
// 输出：
.text_test__less__UJwa4 {
    color: #f00;
}

// calc的实际例子
.test__less {
  position: fixed;
  top: 0;
  height: calc(~"100vh - 40px")
}
// 编译
.text_test__less__UJwa4 {
    position: fixed;
    top: 0;
    height: calc(100vh - 40px);
}
复制代码

关于原样输出，平时用的最多的还是像calc等这样需要原样输出的部分，因为如果你不加原样输出，那么less在编译阶段就会认为你的减号等操作符是需要计算的，就自动帮你去计算了，结果自然也是不对的。

函数

less内置了很多函数，例如Math、类型函数等等。

这块内容比较简单，但是也是比较多的，可以查看官网手册去了解一下吧。

less函数手册

命名空间和选择器

.head {
  .avator(@width) {
    width: @width;
  }
}
.test__less {
    /* 通过选择器选择到.avatar的样式 */
    .head > .avator(20px);
}

/* test__less的编译结果 */
.text_test__less__UJwa4 {
    width: 20px;
}
复制代码

扩展

less支持扩展语法，最终实现是在css中将几个不同的选择器，通过逗号隔开并列的写法。

参数实质是选择器（例如.head 也可以是.head .avator等），可以有多个参数。

// 定义普通的一个class
.head {
  font-size: 12px;
}
// 定义另一哥普通的class
.foot {
  font-weight: bold;
}

// 扩展的写法1:
// 将head和foot扩展到test上，最终使得test同时拥有head和foot的样式
.test:extend(.head, .foot) {
  color: red;
}

// 扩展的写法2:
// 这两种是等效的
.test {
    &:extend(.head, .foot);
    color: red;
}

// 也可以给伪类添加
.test:hover {
  &:extend(.head, .foot);
  color: red;
}
复制代码

可以看到写法（1）和（2）编译后的结果，是在css中并列的写法：

以这里为例，本质都是使得.test拥有.head或.foot的样式效果，而.head或.foot不会拥有.test的样式效果。

extend拓展，很大程度上可以用来复用选择器减少编译后的css样式代码。

但是，实际css编写过程中，我们是推荐尽量减少样式的继承、减少绝对的层级嵌套、减少样式直接的相互依赖。

如此，才能在html结构的变化后减少css层级受到的影响、避免部分样式修改后影响到其他样式。

这也正是高内聚、低耦合原则中低耦合概念在css编写中的体现。即，模块直接的联系应该尽量弱化，这可以可以演变为css直接互相的依赖关系应该尽量弱化。

BEM规范也是推荐如此的做法。

Mixins混入

基本用法

通俗一些，有点类似于将其他class/id等看成是定义好的函数，这些函数执行后会输出一段样式，然后在其他函数（class/id等等样式）内部调用这些函数，然后得到他们输出的样式。

// 定义普通的两个class
.head {
  font-size: 12px;
}
.foot {
  font-weight: bold;
}

// 在test类内部混入head和foot
// 可以看到既可以使用括号，也可以不使用括号
.test {
    // 类似于调用head函数得到他的样式
    .head();
    .foot;
}
复制代码

创建mixins

可以只创建，不输出mixins

// 将head变成一个mixins
.head () {
    width: 100px;
}

// 类似于只定义了函数，但是没用到它，
// 那么就会在构建的阶段就被去冗掉了，
// 最终样式里，不会有如下样式：
.head {
    width: 100px;
}
复制代码

Mixins带参

支持传递多个参数，在调用mixins的给参数赋值，类似于函数的xing形参和实参：

// 定义一个mixins，携带了两个参数
.head(@fs, @color) {
  font-size: @fs;
  color: @color;
}
// 调用的时候，给mixins传递参数
.test {
  .head(20px, blue);
}
复制代码

参数支持默认值，类似于es6中函数形参定义时给一个默认值一样：

// @color参数给一个默认值为red
.head(@fs, @color: red) {
  font-size: @fs;
  color: @color;
}
// 调用的时候，给mixins传递参数
.test {
  .head(20px);
}
复制代码

参数顺序可以不一一对应：

// 例如，定义mixins时的参数是@fs和@color
.head(@fs, @color) {
  font-size: @fs;
  color: @color;
}
// 但是我使用的时候可以像下面这样，不按顺序传参数
// 最终效果也是一样的
.test {
    // 没有按顺序传参
    // 但是这时需要带上参数名再赋值
    .head(@color: red, @fs: 20px);
}
复制代码

高级参数

@arguments在mixins中指代所有参数:

// 利用@arguments指代上面的三个参数
.head(@size, @type, @color) {
  border: @arguments;
}
.test {
  .head(1px, solid, red);
}
复制代码

@rest 扩展运算符

less中用...作为扩展运算符，类似于es6的扩展运算符，但是有区别，指代后续的参数。

// 一般用@rest作为less的扩展运算符变量
// 用其他字符可能会引起相关的lint不通过
.head(@rest...) {
  border: @rest;
}
.test {
  .head(1px, solid, red);
}

// 另一种情况
// @size后面的才作为后续参数
.head(@size, @rest...) {
    border: @size @rest;
}
.test {
  .head(1px, solid, red);
}
复制代码

mixins作为函数使用

mixins作为函数使用，将返回其内部定义的变量，在调用mixins的作用域内可以使用其返回的变量：

// 定义一个mixins
// 内部定义了两个变量
.head() {
  @color1: red;
  @color2: blue;
}
// head作为函数被调用
// test内部可以使用head内部定义的变量
// 即使先使用，后调用也可以
.test {
  color: @color2;
  .head();
}
复制代码

注意：less中的变量都是延长加载的，可以先使用，后面再定义。本质是less执行编译的时候，先分析语法树，然后先提取对应的变量，最后才是编译成css。

逻辑运算符

支持>，>=，=，=<，<运算符，布尔只支持true。

// 定义head这个mixins，根据参数的值，展示不同内容
.head(@size) when(@size > 50) {
  color: red;
}
.head(@size) when(@size < 50) {
  color: blue;
}
// 传入参数80
.test {
  .head(80);
}
复制代码

支持其他内置函数检测

// 只有@color参数为color类型时，才有下面的样式
.head(@color) when(iscolor(@color)) {
  color: @color;
}
// 颜色会是红色
.test {
  .head(#f00);
}
// 没有任何样式内容
.test {
  .head(123);
}
复制代码

其他的还有检测函数还有：
iscolor
isnumber
isstring
iskeyword
isurl

其他内容

父选择器

用&符号表示父选择器

// 父选择器演示
.test {
    // test hover时会是蓝色
    &:hover {
        color: blue;
    }
    // test后一个兄弟test，是红色
    & + & {
        color: red;
    }
    // test内部的test是黄色
    & & {
        color: yellow;
    }
}

// 对应的html
<div className="test">
    test
    <div className="test">内部test</div>
</div>
<div className="test">
    test
</div>
复制代码