wghou 2020-06-16
上一篇:less变量
上篇主要讲述了less的变量的基本使用,本篇我们来讲解下less的一个常用规则,那就是嵌套了(老套娃了),这个使你在使用css的时候能够用起来非常方便和爽(爽就对了)
那么什么是嵌套呢,我们首先看一个例子:
<header class="page-header"> <h1 class="title"></h1> <nav class="page-nav"></nav> </header> <style> .page-header { background-color:#666666; color:#000; } .page-header .title{ color:#0f0f0f; } .page-header .page-nav:hover{ background-color:#ffffff; } </style>
我们在编写如上一个html时,我们需要对其进行css的样式设置,因此,一般都会按照上边进行设置,但是我们应该都能发现到h1和nav标签都是header标签的子标签,但作为一名合格的码农,偷懒是必修课(嘻嘻),因此,嵌套本人用的最爽的原因便是可以减少敲代码,但并不会影响到上边css的易读性。
.page-header { background-color:#666666; color:#000; .title { color:#0f0f0f; } .page-nav:hover{ background-color:#ffffff; }}
上边便是嵌套的写法,是不是看着更简洁了(嘻嘻)
看了上边代码相信聪明的你一定秒懂并会使用了吧,那我们接下来进阶一下,
在page-nav类中,若我们定义了一个或者多个伪类并为其设置了样式,是不是要这么写呢:
.page-header { background-color:#666666; color:#000; .title { color:#0f0f0f; } .page-nav { font-size:14px; } .page-nav:hover{ background-color:#ffffff; } .page-nav:visited { color:#0000ff; } }
还是说:可以用嵌套嘛,在里面套着就行了
.page-header { background-color:#666666; color:#000; .title { color:#0f0f0f; } .page-nav { font-size:14px; :hover{ background-color:#ffffff; } :visited { color:#0000ff; } } }
好了,公布结果,第一种没有错,能正常跑起来,但是不够偷懒,不得精髓啊,第二种,偷懒的不错,可惜并不能编译成功
因为less在编译的时候,会解析成.page-nav :hover(这里中间是有空格的,不要看漏了),伪类hover变成nav的子级类了,实际上如果你认真看上边成功编译的例子,你都会发现到,他在嵌套编译后出现的都是以父级子级进行转换,所以对于伪类这种中间没有带空格的怎么办呢?这个就需要引入一个父选择器(&)没错就是这个符号,他代表的是父级的类
他的用法呢,也很简单,先上例子
.page-nav { font-size:14px; &:hover{ background-color:#ffffff; } &:visited { color:#0000ff; } }
是的,直接在伪类前边添加&就可以了,记得中间是没有空格的哦,这样子我们就能够正常的表示伪类了,都是归功于父选择器符号(&),他在上边的例子中就是代表着.page-nav这个父类的名称
通过上边是不是知道了父选择器符号了,那么聪明如你肯定知道他不止这么简单了,如果他能够表示父类,那么他还可以怎么玩呢?
老惯例,先上几个例子:
.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"); }
上边这个例子是不是发现打开了新世界了,&就是表示父类名称,那么在里面使用其他字符串来,那么是不是可以表示多个类了,嘻嘻
.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; }
css选择器学过的小伙伴肯定清楚,有各种各样的并集选择器,交集选择器啊等等,那么他们跟&的配合就很简单明了了,因为看到这里,你肯定已经发现了,实际上&真就仅仅表示父类的名称,你只是把他用&表示而已,这样子是不是很清楚了?
那么看到这里,你是不是基本已经了解了呢?答案是否的,哈哈
我们来看一个例子:
.header { .menu { border-radius: 5px; .no-borderradius & { background-image: url(‘images/button-background.png‘); } } }
对于上述这种老套娃的,编译后的结果是这样的
.header .menu { border-radius: 5px; } .no-borderradius .header .menu { background-image: url(‘images/button-background.png‘); }
是不是发现了什么?他在里面将&替换成.header .menu,所以在编写多层嵌套时,这点是需要注意的
最后我们来看最后一个例子,我只粘贴less不粘贴css,如果你真的懂了,相信你一定可以写出来
p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; } }
最后本篇主要是学习至官方文档的,就是笔记而已(整理下方便日后查阅,对了,最后的答案也在官方文档里,哈哈)。