less学习---less的继承（extend）

2024-03-25 21:23:34

上篇主要讲述了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;
  }
}

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

附上官方文档：http://lesscss.cn/features/#extend-feature

码农公寓

相关文章