当前位置: 首页>前端>正文

less让自己写的样式优先级别更高 less样式嵌套规则

上一篇: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;
  }
}

 

最后本篇主要是学习至官方文档的,就是笔记而已(整理下方便日后查阅,对了,最后的答案也在官方文档里,哈哈)。


https://www.xamrdz.com/web/23z1934849.html

相关文章: