variable

  • Use the variableLess allows you to define variables for reuse in global styles 
      @banner-color: #fff;
  .banner{
      background-color: @banner-color;
  }
  // Local definition
  .banner(@banner-color: #fff) {background-color: @banner-color;
  }
Copy the code
  • Variable scopeVariable definitions are also hierarchical and we’ll see that in a case study 
      @width: 200px;
  .box{
      @width: 100px;
      .box1{
          width: width; }}.box2{
      width: width;
  }
  // box1 width: 100px
  // box1 width: 200px
  // Find the attributes of the defined variable from the inner layer
Copy the code

Mixins

Mixins represent a feature that is a mixin inheritance pattern that can be implemented when CSS is implemented using less syntax

  • Nested patterns directly on the case:

      .banner(width: 10px) {width: width;
  }
  // When written directly, the attribute is fully defined
  .box{
      .banner;
  }
  // Take local variables as arguments, multiple arguments can also be passed
  .box1{
      .banner(5px);
  }
Copy the code

    Local definition nesting can be used elsewhere to pass attributes as parameter switching.

    The DOM element hierarchy can also be wrapped directly in the CSS section:

      <style>.father{ width: 100px; height: 100px; .son{ width: 50px; height: 50px; }}</style>
  <div class="father">
      <div class="son"></div>
  </div>
Copy the code

    & nested rules that represent themselves (class name, ID, tag are ok)

       .list{ 
       &-nav{... }// equivalent to.list-nav
       &:hover{... }// We can also write pseudo-class elements equivalent to.list:hover
   }
Copy the code

  • Namespaces avoid the problem of renaming classes

     #content{
     .article{... }.logo{...}
 }
Copy the code

    When selecting through the selector, go directly to # Content >.logo

Operations and functions

The less syntax is that we define variables that are computable. LESS is just a framework for CSS and SASS, LESS and SASS interact with each other. Xiaobian in actual combat prefer LESS feel more close to CSS.