嵌套

Less 提供了使用嵌套代替层叠或与层叠结合使用的能力

1 普通嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
    li {
      width:200px      
    }
  }
  .logo {
    width: 300px;
  }
}

编译为

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .navigation li{
 width: 200px;
}
#header .logo {
  width: 300px;
}

2 使用 & 引用父选择器

.button {
  color:red;
  &:hover {
    color: green;
  }
  &-ok {
    background-image: url("ok.png");
  }
  & & {
      background-image: url('ak47.png');      
  }
}

编译为

.button {
    color: red;
}
.button:hover {
    color: green;
}
.button-ok {
  background-image: url("ok.png");
}
.button .button {
  background-image: url('ak47.png');     
}

3 @media 嵌套

.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;
  }
}

4 @media 第二种嵌套方式

@min1024: ~"(min-width: 1024px)";
.element {
  font-size: 15px;
  @media (min-width:640px) {
    font-size: 16px;
  }
  @media @min1024 {
    font-size: 18px;
  }
}

编译为：

.element {
  font-size: 15px;
}
@media (min-width: 640px) {
  .element {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .element {
    font-size: 18px;
  }
}