less.js 中“>”和“&”是什么意思？

Question

我正在浏览 bootstrap 的 less 代码。我很好奇定义 css 类时“>”和“&”是什么意思？

  .navbar-nav {                                                                           
    > li > a {                                                                            
      color: @navbar-custom-link-color;                                                   

      &:hover,                                                                            
      &:focus {                                                                           
        color: @navbar-custom-link-hover-color;                                           
      }                                                                                   
    }                                                                                     
    > .active > a {                                                                       
      &,                                                                                  
      &:hover,                                                                            
      &:focus {                                                                           
        color: @navbar-custom-link-active-color;                                          
      }                                                                                   
    }                                                                                     
    > .disabled > a {                                                                     
      &,                                                                                  
      &:hover,                                                                            
      &:focus {                                                                           
        color: @navbar-default-link-disabled-color;                                       
        background-color: @navbar-default-link-disabled-bg;                               
      }                                                                                   
    }                                                                                     
  } 

有less.js的详细教程可以参考吗？

Answer 1

比...更棒

正如 Harry 提到的，大于>语法与常规 CSS 中的相同，即第二个列出的元素是第一个元素的子元素。

请参阅此Selectors based on relationshipsURL上的下表：

A > E: Any E element that is a child of an A element

和号

& 符号是引用当前父选择器的快捷方式，因此在第一个示例中，纯 css 最终将如下所示：

  navbar-nav:hover,                                                                            
  navbar-nav:focus {                                                                           
    color: @navbar-custom-link-hover-color;                                           
  }    

这是一篇很好的文章，解释了 LESS/SASS 中 & 字符的使用

教程

虽然不完全是教程，但这里是LESS 的完整语言参考（链接到有关使用 引用父选择器的部分&）