Nesting and Scope
Nesting can be used to structure your stylesheet in a way that matches the HTML structure of the page, while reducing the chance of conflicts. Here is an example of an unordered list and its children:

Example:

You can also use pseudo-selectors with your mixins using this method. In following example (& represents the current selector parent):

/* Nesting */
ul{
    background-color: #333;
    list-style-type: none;
    padding: 10px;
    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
    a{
        text-decoration: none;
        color: #000;
        padding: 5px;
        display: block;
        &:hover{
            color:red;
        }
    }
    
}

/**************** Scope ************************/

Just like in programming languages, in Less variables receive their values depending on the scope.
If the value isn’t specified in the specific scope, LESS will look for it in upper blocks until it finds the nearest declaration.

/* Nesting and scope */
@text-color:green;
ul{
    background-color: #333;
    list-style-type: none;
    padding: 10px;
    @text-color:orange;
    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
    a{
        text-decoration: none;
        color: @text-color;
        padding: 5px;
        display: block;
        &:hover{
            color:red;
        }
    }    
}

Nested Directives and Bubbling

Directives such as media or keyframe can be nested in the same way as selectors. Conditional directives e.g. @Media, @supports and @document have also selectors copied into their bodies.

.screen-color {
  @media screen {    
    @media (max-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: olive;
  }
}

Output:

@media screen and (max-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: olive;
  }
}

Remaining non-conditional directives, for example font-face or keyframes, are bubbled up too. Their bodies do not change:

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

Output:

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}
Advertisements