文章の目录

1、用法一：模仿 HTML 的组织结构，使代码更加简洁
2、用法二：@规则嵌套和冒泡
3、扩展Parent Selectors
- 3.1、用途
- - 3.1.1、基本嵌套
  - 3.1.2、生成重复的类名
  - 3.1.3、多个 &
  - 3.1.4、改变选择器的顺序
  - 3.1.5、Combinatorial Explosion
写在最后

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

1、用法一：模仿 HTML 的组织结构，使代码更加简洁

#header {color: black;.navigation {font-size: 12px;}.logo {width: 300px;}
}

编译为：

#header {color: black;
}
#header .navigation {font-size: 12px;
}
#header .logo {width: 300px;
}

此用法还体现在将伪选择器（pseudo-selectors）与混合（mixins）一同使用。

.clearfix {display: block;zoom: 1;&:after {content: " ";display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}
}

(& 表示当前选择器的父级）

2、用法二：@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.component {width: 300px;@media (min-width: 768px) {width: 600px;@media  (min-resolution: 192dpi) {background-image: url(/img/retina2x.png);}}@media (min-width: 1280px) {width: 800px;}
}

编译为：

.component {width: 300px;
}
@media (min-width: 768px) {.component {width: 600px;}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {.component {background-image: url(/img/retina2x.png);}
}
@media (min-width: 1280px) {.component {width: 800px;}
}

3、扩展Parent Selectors

使用 & 引用父选择器

3.1、用途

3.1.1、基本嵌套

& 操作符标识嵌套规则的父选择器，在现有选择器上修改类或者伪类是最常用的。

a {color: blue;&:hover {color: green;}
}

编译为：

a {color: blue;
}a:hover {color: green;
}

3.1.2、生成重复的类名

"父选择器”操作符有多种用途。基本上，当您需要以默认方式以外的方式组合嵌套规则的选择器时。例如，& 的另一个典型用法是生成重复的类名。

.button {&-ok {background-image: url("ok.png");}&-cancel {background-image: url("cancel.png");}&-custom {background-image: url("custom.png");}
}

编译为：

.button-ok {background-image: url("ok.png");
}
.button-cancel {background-image: url("cancel.png");
}
.button-custom {background-image: url("custom.png");
}

3.1.3、多个 &

& 可能在选择器中出现不止一次。这使得重复引用父选择器而不重复其名称。

.link {& + & {color: red;}& & {color: green;}&& {color: blue;}&, &ish {color: cyan;}
}

编译为

.link + .link {color: red;
}
.link .link {color: green;
}
.link.link {color: blue;
}
.link, .linkish {color: cyan;
}

注意&表示所有的父选择器(而不仅仅是最近的父选择器)，所以下面的例子

.grand {.parent {& > & {color: red;}& & {color: green;}&& {color: blue;}&, &ish {color: cyan;}}
}

编译为

.grand .parent > .grand .parent {color: red;
}
.grand .parent .grand .parent {color: green;
}
.grand .parent.grand .parent {color: blue;
}
.grand .parent,
.grand .parentish {color: cyan;
}

3.1.4、改变选择器的顺序

将选择器前置到继承的(父)选择器可能很有用。这可以通过将 & 放在当前选择器之后来实现。例如，在使用 Modernizr 时，您可能希望根据所支持的特性指定不同的规则。

.header {.menu {border-radius: 5px;.no-borderradius & {background-image: url('images/button-background.png');}}
}

.no-borderradius &选择器将在 .header .menu前面加上它的父元素 .no-borderradius以形成 .no-borderradius .header .menu输出。

.header .menu {border-radius: 5px;
}
.no-borderradius .header .menu {background-image: url('images/button-background.png');
}

3.1.5、Combinatorial Explosion

& 也可以用来在逗号分隔的列表中生成所有可能的选择器排列。

p, a, ul, li {border-top: 2px dotted #366;& + & {border-top: 0;}
}

这将扩展到指定元素的所有可能的(16)组合

p,
a,
ul,
li {border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {border-top: 0;
}

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Less系列之嵌套（Nesting）相关推荐

【java开发系列】—— 嵌套类与内部类
嵌套类与内部类在java中使用的很广泛,为了避免难以理解,这里用了几个小例子,说明它的用法. 嵌套类与内部类的结构如下图静态嵌套类静态嵌套类,是一种在类之外声明的嵌套类,由于是静态的,所以不经过初 ...
from server sql 拼接统计两个子查询_[SQL SERVER系列]之嵌套子查询和相关子查询
子查询有两种类型,一种是只返回一个单值的子查询,这时它可以用在一个单值可以使用的地方,这时子查询可以看作是一个拥有返回值的函数:另外一种是返回一列值的子查询,这时子查询可以看作是一个在内存中临时存在的 ...
AngularJS.directive系列：嵌套directive的通讯及scope研究
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...
Win11的两个实用技巧系列之嵌套虚拟化、无法新建Excel表格解决方法
目录 Win11系统怎么启用嵌套虚拟化?Win11嵌套虚拟化开启方法解决方法: Win11系统无法新建Excel表格解决方法解决方法 Win11系统怎么启用嵌套虚拟化?Win11嵌套虚拟化开启方法 ...
20. Python的字典嵌套
<Python编程的术与道:Python语言入门>视频课程 <Python编程的术与道:Python语言入门>视频课程链接:https://edu.csdn.net/cours ...
Go语言自学系列 | 汇总
视频来源:B站<golang入门到项目实战 [2021最新Go语言教程,没有废话,纯干货!持续更新中...]> 一边学习一边整理老师的课程内容及试验笔记,并与大家分享,请移步至知乎网站,谢 ...
ES系列之原来查看文档数量有这么多姿势
1.引言有人可能觉得,查看文档数量不是很简单吗?直接 GET /_cat/count/index_name?v 不就可以了吗. 事实上远不止这么简单,比如嵌套文档的情况等.相信你看了我这篇文章之后你 ...
Sass (Syntactically Awesome StyleSheets)
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多 ...
OREILLY Programming .NET 3.5 读书笔记之一
OREILLY Programming .NET 3.5 读书笔记之一 <Programming .NET 3.5>是OREILLY 2008.08出版的.NET 3.5 开发书籍,作者是 ...

Less系列之嵌套（Nesting）

文章の目录

1、用法一：模仿 HTML 的组织结构，使代码更加简洁

2、用法二：@规则嵌套和冒泡

3、扩展Parent Selectors

3.1、用途

3.1.1、基本嵌套

3.1.2、生成重复的类名

3.1.3、多个 &

3.1.4、改变选择器的顺序

3.1.5、Combinatorial Explosion

写在最后

Less系列之嵌套（Nesting）相关推荐

最新文章

热门文章