什么'＆gt;'和'＆amp;'在less.js中意味着什么？

Question

我正在通过bootstrap更少的代码。我很好奇'＆gt;'是什么和'＆amp;'在定义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

>意味着它在常规CSS中的作用相同 - 它只针对父元素的直接子元素。

&表示选择器已添加到父选择器中。例如：

LESS

.header {
  &:first-child {
    background-color: #fff;
  }
}

Pure CSS Equivalent

.header:first-child {
  background-color: #fff;
}

Answer 2

大于

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

请参阅this网址上的Selectors based on relationships下的表格：

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

Here是一篇很好的文章，解释了在LESS / SASS中使用＆符号

教程

虽然不完全是教程，但这里是complete Language reference for LESS（链接到关于使用&引用父选择器的部分）