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

最新推荐文章于 2024-07-17 15:24:17 发布

JHY97

最新推荐文章于 2024-07-17 15:24:17 发布

阅读量776

点赞数 3

分类专栏： CSS 预处理语言文章标签： css less 前端

本文链接：https://blog.csdn.net/JHY97/article/details/124929017

版权

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

2 篇文章 0 订阅

订阅专栏

一、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;
}

JHY97

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 预处理语言 - Less（2）- 混合、运算

一、less中的混合混合就是将一系列属性从一个规则集引入到另一个规则集的方式混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。以案例说明：html文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
复制链接

扫一扫