咨询电话:
15628812133
04
2023/11

Less——嵌套与继承

发布时间:2023-11-04 17:03:41
发布者:MaiMai
浏览量:
0

相比于传统的css,LESS增加了几个核心功能,如变量、混合、函数等,让页面的样式动态起来了。上一章介绍了LESS中函数的使用和规范,本章来介绍一下LESS的嵌套与继承。

一,嵌套

Less 提供了使用嵌套代替层叠或与层叠结合使用的能力。我们之前选择器层叠使用如图所示:

传统css选择器层叠

结构复杂且冗余,编写起来十分不方便,而Less的嵌套写法如图:

less嵌套写法

用 Less 书写的代码更加简洁,并且结构上更符合 HTML 的组织结构。

在嵌套规则中, & 表示父选择器,常用于给现有选择器添加伪类。如图:

用&表示父选择器

编译后的代码为

.fanhui img {margin-right : 9px;}


二,继承

继承可让多个选择器应用同一组属性,最终编译为并集选择器。其性能比混合高,但灵活性比混合低。

继承

编译后的代码为:

ul li {

  background: blue;

}

.red,

ul li {

  color: red;

}

关键词:
返回列表