less学习-嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

在 LESS 中, 我们就可以这样写:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

或者这样写:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

代码更简洁了，而且感觉跟DOM结构格式有点像.

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

例如:

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

会输出

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

个人博客：付博瀚的个人博客