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

你们能够回想一下，上次学习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>
复制代码

父选择器应该是很经常使用的了，不必多说。

文章参考

less中文网

w3cschool的less教程

关于less的介绍就到这了，有兴趣的能够继续深刻学习。若是你看到了这，可能前先后后也就几分钟的时间。可是花这几分钟能够将部分less已经忘记的特性重拾起来，相信也是一种收获吧。

最后，学而时习之，不亦说乎！祝小伙伴们在前端领域继续驰骋疆场、大杀四方吧！

百尺竿头、日进一步 我是愣锤，欢迎分享与交流。