Less使用详解（v3.9.0）—嵌套和父选择器&

该系列：

Less(v3.9.0)使用详解——基本使用

Less(v3.9.0)使用详解——变量

Less(v3.9.0)使用详解——嵌套和父选择器&

Less(v3.9.0)使用详解——extend(嵌套)

其他待更新...

嵌套

当css选择器存在父子关系时，可以像下面这样书写

#header {
    
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
复制代码

编译为

#header {
    
  color: black;
}
#header .navigation {
    
  font-size: 12px;
}
#header .logo {
    
  width: 300px;
}
复制代码

当遇到样式表规则比如@media或@supports时，他会冒泡寻找规则

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}
复制代码

编译成

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
复制代码

父选择器

&表示父选择器

a {
  color: blue;
  &:hover {
    color: green;
  }
}
复制代码

编译为