CSS 预处理语言 - Less（2）- 混合、运算

最新推荐文章于 2026-01-15 09:34:16 发布

原创最新推荐文章于 2026-01-15 09:34:16 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #less #前端

CSS 预处理语言专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Less预处理器中的混合（Mixins）功能，包括普通混合、带参数的混合、匹配模式和@arguments变量的使用。通过实例展示了如何简化代码和提高代码复用性。同时，讲解了如何避免Less编译以及介绍了Less的继承机制，包括extend的用法和all关键字的影响。这些特性有助于提升CSS的组织和效率。

一、less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

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

以案例说明：

html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/test01.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="main">
      <div class="inner1"></div>
      <div class="inner2"></div>
    </div>
  </body>
</html>

less文件

// less文件
* {
  margin: 0;
  padding: 0;
}
.main {
  position: relative;
  margin: 10px;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  .inner1 {
    width: 100px;
    height: 100px;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: skyblue;
  }
  .inner2 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: skyblue;
  }
}

1.1 普通混合

从上述案例中可看到，.inner1 和 inner2 中的居中相关代码是一致的，那么就可以将居中相关代码提取出来，即：

// less文件
.mediate {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: skyblue;
}
* {
  margin: 0;
  padding: 0;
}
.main {
  position: relative;
  margin: 10px;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  .inner1 {
    width: 100px;
    height: 100px;
    z-index: 1;
    .mediate;
  }
  .inner2 {
    width: 200px;
    height: 200px;
    .mediate;
  }
}

使用普通混合的话，自动编译生成的css文件中，也会写入所提取的属性

如果不希望单独提取的属性部分输出到css文件中的话，可以为其添加上()，即：

// less文件
.mediate() {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: skyblue;
}
...

1.2 带参数的混合

可以为提取的属性设置参数以及设置默认值

// less文件
// 为.mediate设置多个参数和默认值
.mediate(@l:0,@r:0,@t:0,@b:0,@c) {
  position: absolute;
  left: @l;
  right: @r;
  top: @t;
  bottom: @b;
  margin: auto;
  background-color: @c;
}
* {
  margin: 0;
  padding: 0;
}
.main {
  position: relative;
  margin: 10px;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  .inner1 {
    width: 100px;
    height: 100px;
    z-index: 1;
    .mediate(50%,50%,50%,50%,red);
  }
  .inner2 {
    width: 200px;
    height: 200px;
    //@c:skyblue 命名参数
    .mediate(@c:skyblue);
  }
}

/* 
什么是命名参数：引用 mixin 时可以通过参数名而不是参数的位置来为 minxin 提供参数值，任何参数都可以通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数
*/

1.3 匹配模式

说明：传值的时候定义一个字符，在使用的时候使用哪个字符，就调用哪条规则

案例练习

// 新建一个borderstyle.less文件
//上边框为红色
.borderstyle(T,@w) {
  border-width: @w;
  border-style: solid;
  border-color: red black black black;
}
// 右边框为红色
.borderstyle(R,@w) {
  border-width: @w;
  border-style: solid;
  border-color: black red black black;
}
// 下边框为红色
.borderstyle(B,@w) {
  border-width: @w;
  border-style: solid;
  border-color: black black red black;
}
// 左边框为红色
.borderstyle(L,@w) {
  border-width: @w;
  border-style: solid;
  border-color: black black black red;
}

// less文件
@import "./borderstyle.less";

.main {
  position: relative;
  margin: 10px;
  width: 300px;
  height: 300px;
// 选择所需模式，并填写参数
  .borderstyle(B,10px);
  .inner1 {
    ...
  }
  .inner2 {
   ...
  }
}

/* 编译后的css文件中 */
.main {
  position: relative;
  margin: 10px;
  width: 300px;
  height: 300px;
  border-width: 10px;
  border-style: solid;
  border-color: black black red black;
}

1.4 @arguments 变量

@arguments 代表所有的可变参数

注意：

@arguments 代表所有可变参数，参数的先后顺序就是()括号内的参数的顺序
赋值时，值的位置和个数是一一对应的

举例说明

// less文件
.border(@width,@style,@color) {
  border: @arguments;
}

.div {
  .border(1px,solid,back);
}

/* 编译后的css文件 */
.div {
  border: 1px solid back;
}

二、less运算

less中可以进行加减乘除的运算

举例说明

// less文件
.div {
  width: (100 + 200px);
}

/* 编译后css文件 */
.div {
  width: 300px;
}

三、less避免编译

在运算时，有时候会遇到单位不同的情况，这个时候需要使用到 calc，但在采用 calc 语法时，应该避免 less 的编译，保留原来格式，让浏览器进行计算

因此官方提供的做法：在less中采用calc语法时，需要用引号（ '' ）将其所在的属性部分括起来，并在最前面添加上 ~ 符号

简单举个例子

less文件中

* {
  margin: (100% - 20px);
  padding: ~"calc(100%-20px);";
}

经过编译的css文件中

* {
  margin: 80%;
  padding: calc(100%-20px);;
}

可以看到在单位不同的情况下，margin属性未使用calc语法，因此最后计算出的结果明显是不正确的，而padding属性采用的calc语法并添加上了 '' 以及 ~ ，所以避免less编译

四、less继承

less继承（extend）：性能比混合高，灵活度比混合低

Extend 是 Less 语法中的一个伪类，它可以继承所匹配的全部样式。
Extend 是为了解决样式表中重复的样式，这一点与其它语言中的继承功能相似。
Extend 主要用于复用重复的样式类，可附加在选择器上或放置到样式集中

语法：

获得继承选择器名:extend(被继承名){...}

// 继承所有状态
获得继承选择器名:extend(被继承名 all){...}

举例说明（1）：less继承

在less文件中

.mediate {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

div:extend(.mediate) {
  width: 100px;
  height: 100px;
}

编译后的css文件中，可以看到 div 保持了原有的样式，且也继承了mediate中的样式

.mediate,
div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
div {
  width: 100px;
  height: 100px;
}

举例说明（2）：关于 less继承中的 all 关键字

在less文件中

.mediate {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.mediate:hover {
  color: skyblue;
}

/* 使用all关键字 */
.div1:extend(.mediate all) {
  width: 100px;
  height: 100px;
}
/* 未使用all关键字 */
.div2:extend(.mediate) {
  width: 50px;
  height: 50px;
}

编译后的css文件中，可以看到div1 中使用了all关键字，因此也继承了.mediate:hover中的样式，而div2未使用all关键字，则未能继承

.mediate,
.div1,
.div2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mediate:hover,
.div1:hover {
  color: skyblue;
}
/* 使用all关键字 */
.div1 {
  width: 100px;
  height: 100px;
}
/* 未使用all关键字 */
.div2 {
  width: 50px;
  height: 50px;
}