Less language Directives Bubbling

Css conditional directives @media, @supports and @document define a condition under which css rules inside them apply. They are useful when you need changes in layout or colors for printing, small screen or device type.

Conditional directives e.g. css at-rules are used to define rules valid only if specific conditions are met. Css defines three conditional directives: @media, @supports and @document. The most common is media which is used to define rulesets valid only on some media types. For example, it can make marts of stylesheet ignored unless the document is shown on small screen or when it is printed.

According to css specification, conditional directives must be placed on style sheet top level or inside other conditional directives. They are not allowed inside the rulesets. So, if you use complicated selectors structures, you have to maintain them on multiple places: outside of directives and inside each one.

Example of selector that must be maintained on two places:

.complicated .selector { //place 1
  margin: 4 4 4 4;
}
@media print {
  .complicated .selector {//place 2
    margin: 0 0 0 0;
  }
}

Conditional directives in Less rule can be nested into rulesets, mixins or any other less structures. Compiler interprets nested media as "make exception for this kind of media". The advantage is simple: you do not have to maintain the same rulesets and selectors structures inside multiple media types.

With nested directives - compiles into the above css:

.complicated .selector {
  margin: 4 4 4 4;
  @media print {
    margin: 0 0 0 0;
  }
}

Nested directive will bubble on to of style sheet during the compilation and:

• all encountered selectors will be copied into directives,
• media nested directly into each other will merge their media queries.

Basic Bubbling

As directive "bubble" on top of style sheet, it collects all encountered selectors and copies them into its own body. As a result, all declarations written inside it are going to be applied to the same html elements as normally, but only if the conditions specified by directives are satisfied.

Example input:

#a {
  color: blue;
  padding: 2 2 2 2;
  // printed document should be rendered differently - it should not be colored
  @media print { 
    color: black;
  }
}

compiles into:

#a {
  color: blue;
  padding: 2 2 2 2;
}
@media print { // all is good except the color
  #a {
    color: black;
  }
}

Ruleset Nested in Directive

Nested directive can contain rulesets. The directive will bubble on top and selectors will be joined as usually. Following less:

#a {
  @media screen { 
    nested {
      color: green;
    }
  }
  color: blue;
}

compiles into:

#a {
  color: blue;
}
@media screen {
  #a nested {
    color: green;
  }
}

Directive Inside Directive

Directives bubbling keeps their relative order. Following less:

#a {
  @media screen { 
    nested {
      @supports (transform-origin: 5% 5%) {
        color: green;
        transform-origin: 5% 5%;
      }
    }
  }
  color: blue;
}

compiles into:

#a {
  color: blue;
}
@media screen {
  @supports (transform-origin: 5% 5%) {
    #a nested {
      color: green;
      transform-origin: 5% 5%;
    }
  }
}