less学习指南第五期 | 合并和转义

Axjy
1,069 阅读3分钟

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

LESS是一个CSS预处理器，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。这个系列主要就是学习并且巩固 Less 的基础知识，并且掌握一些更加高级的用法，用以提高开发效率。

前期回顾

less学习指南第一期 | 嵌套和变量
less学习指南第二期 | 运算和内置函数
less学习指南第三期【重要】 | 混合和继承
less学习指南第四期【进阶】| 条件语句和循环语句

合并

背景

默认情况下两个属性值会同时编译到目标样式类中，那如果需要将属性值进行合并整合该怎么办呢？

使用方法

合并功能允许将多个属性中的值合并到一个属性的列表中，值用 , 或者空格分隔开。

使用场景

合并（merge）主要应用于列表属性的整合，比如 box-showdow、transfrom 等属性。

逗号分隔类

使用方法

  • 定义mixin时，在需要合并的属性后加符号+
  • 使用minxin时，在被合并的属性后也加符号+

示例

我们可以用这个来实现多重阴影

.shadow() {
  box-shadow+:0 10px 10px green;
}
div {
  .shadow();
   box-shadow+:-10px 0 10px red;
}

image-20210808214203646

image-20210808214316683

空格分隔类

用法和逗号分隔相同，只不过使用的符号是+_

使用方法

  • 定义mixin时，在需要合并的属性后加符号+_
  • 使用minxin时，在被合并的属性后也加符号+_

示例

我们可以用这个来实现transform的组合变形，比如在【旋转】的同时进行【缩放】

.transform() {
  transform+_:rotate(45deg);
}

div {
  .transform();
  transform+_: scale(2);
}

image-20210808214949230

转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出；

一般情况下不需要用到转义的，只有在代码不能被正常编译的情况下，才需要使用转义

示例：如border-radius属性，语法border-radius: 1-4 length|% / 1-4 length|%;可以看到中间有一个斜杆/ ，斜杆前是【水平半径】，斜杆后是【垂直半径】。但是在 Less 中，直接使用/会被当成除法使用 ，这个时候我们就可以使用转义了；

未使用转义时

image-20210808223449855

转义后

image-20210808223524066

到这里为止，less的知识基本上就都学过一遍了，那学完之后，该怎么去用？什么时候用呢？下面就从实际使用场景的角度提供一些使用思路。

实战

1、可以用来封装经常使用的【字体大小】，【边距大小】等；

2、用来封装一些经常使用的【样式组合】，

  • 可以是现在属性的一些组合，如flex的组合、position的组合；
  • 也可以是自定的类，如
//单行文字省略号通用盒子
.one-row-ellipsis(@width:initial,@height:initial){
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: @width;
  height:@height;
  box-sizing: border-box;
}

3、封装颜色，用来做换肤

活动中，不敢贴太多代码，以后在回来补上；

结语

less系列到此就完结啦！🌺🌺🌺

参考：
less官网

如果有收获的话就随手留个赞吧！😘

avatar
文章
阅读
粉丝