上一篇: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;
}
}
最后本篇主要是学习至官方文档的,就是笔记而已(整理下方便日后查阅,对了,最后的答案也在官方文档里,哈哈)。