前端学习笔记88-父元素和扩展

后代元素和子元素

less代码：

.box1{
    .box2{
        color: #ff0;
    }
    >.box3{
        color: #ff0;
    }
}

css对应代码：

.box1 .box2 {
  color: #ff0;
}
.box1 > .box3 {
  color: #ff0;
}

设置hover

这里得再hover前面加一个&符号。
less代码：

.box1{
    &:hover{
        color:orange;
    }
}

css对应代码：

.box1:hover {
  color: orange;
}

&符

&符表示外层的这个元素。从上面的例子可能看不太明白，看下面这个。
less代码：

.box1{
    div &{
        width: 100px;
    }
}

css对应代码：

div .box1 {
  width: 100px;
}

extend

这个是扩展，我感觉像是继承。
比如我们想给元素1设置宽度和高度，给元素2也设置宽度和高度，但元素2还要设置字体颜色，那么我们可以让元素2继承元素1，然后再设置颜色。
less代码：

.p1{
    width: 200px;
    height: 200px;
}
.p2:extend(.p1){
    color: #bfa;
}

css对应代码：

.p1,
.p2 {
  width: 200px;
  height: 200px;
}
.p2 {
  color: #bfa;
}

继承的第二种写法

视频说这种叫混合mixin，我自己叫继承，如果想去zeal找就搜索mixin。
less代码：

.p1{
    width: 200px;
    height: 200px;
}
.p3{
    .p1()
}

css对应代码：

.p1 {
  width: 200px;
  height: 200px;
}
.p3 {
  width: 200px;
  height: 200px;
}

这种没有第一种好，从css代码可以看到它是复制过来，不像extend只是在.p1后面加“，.p2”。

mixin

如果我们想写一个mixin，让其他的元素可以继承它，但是我们不想这个mixin出现在css里。这要怎么做？
less代码：

.p1{
    width: 200px;
    height: 200px;
}
.p2(){
    width: 200px;
    height: 200px;
}
.p3{
    .p2()
}

css对应代码：

.p1 {
  width: 200px;
  height: 200px;
}
.p3 {
  width: 200px;
  height: 200px;
}

这里的p2后面多了一个括号，有点像c++里的类模板或函数。