Less新手入门

一、变量：@定义变量（例如@width）
二、混合（Mixins）

.bordered {
   
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
   
  color: #111;
  .bordered();   /*混入*/
}

三、嵌套（Nesting）

/*将伪选择器与混合一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合(& 表示当前选择器的父级）:*/
.clearfix {
   
  display: block;
  zoom: 1;

  &:after {
   
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

四、@规则和冒泡
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡

.component {
   
  width: 300px;