MENU


LESS

A full tutorial of LESS can be found here.

LESS stands for Leaner Style Sheets. It is one of the most popular CSS preprocessors in use today.

This illustrates the major features of LESS. Another notable feature is @plugin, which imports JavaScript plugins to add functions.
RESETRUNFULL
/* /shared/my_styles.less */
.rounded-box {  // ordinary CSS    
   border: 1px solid black;    
   border-radius: 5px;    
   box-shadow: range(5px, 20px, 5) grey;  // range() expansion.    
   background+: url('scene.jpg');         // ,-merging.
}
@my_property: width;                      // variable assignment.
@my_color: softlight(#2f66e0, #f33033);   // color blending.
@min768: (min-width: 768px);              // string-escaping.
@my_list: p, s, n;                        // list.
@my_lengths: 50px + 1cm, pow(2px,7);      // math operations.

each(@my_list,{                           // looping expansion.    
   .my-@{value}{                          // variable interpolation
      @his_color: my_color;               // variable variable definition        
      color : @@his_color;                // variable variable referencing        
      background: lighten($color, 40%);   // property $-referencing    
   }
})
@my_config:{          // detached map    
   @options:{         // nested detached ruleset        
      length: 300px;    
   }
}
#my_map(){            // mixin map definition    
   primary: green;    
   secondary: red;
}
#my_namespace(){      // bundling. not applied by default.    
   .my-d{        
         color: #my_map[primary];                  // map association.    
   }
}
.my_mixin(bigger; @p1; @p2:0.05){                  // custom mixin; pattern matching; default parameter;    
   transform+_: scale(@p1 + @p2);
}
.my_mixin(smaller; @p1; @p2:0.05) when (@p1<10){   // when-guard    
   transform+_: scale(1 / @p1 - @p2);
}
div{    
   .my_mixin(smaller,1.3);    
   .rounded-box();                                 // #ids can be used as mixins too.
   background+: yellow;                            // ,-merging. = url('scne.jpg'),yellow
   transform+_:rotate(3deg);                       // space-merging.  = scale(1.1) rotate(3deg)    
   #my_namespace.my-d();                           // namespace accessor.    
   width: extract(@my_lengths, 2);                 // list extraction
   height: if((100vh>500px), 300px, 100px);        // conditional logic.    
   
   span {                                          // nested selector. same as 'div span{...}'.        
      color : fade(@my_color, 20%);                // color operation.        
      &:hover {                                    // parent selector            
         color : red;               
         &:extend(nav);                            // extension. ie. use the rules for <nav> too.
      }
      & + &{                                       // combinatorial expansion
         color: blue;
      }
   }
   @media @min768 {
      @{my_property}: @my_config[@options][length] * 2;    // interpolation. map.        
      @media  (min-resolution: 192dpi) {                   // nested at-rule.           
         background-image: url(/img/retina2x.png);        
      }
   }
}

<!DOCTYPE html><html><head>
   <link rel="stylesheet/less" type="text/css" href="/shared/my_styles.less" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
</head><body>
   <div class="my-d">        
      <span class="my-s">Hey.</span>        
      We can now comment CSS with //.    
   </div><br/>
   <p class="my-p">Mixins save troubles.</p>
</body></html>

Developers are advised to pre-compile LESS to CSS when preparing the web site for public use (production mode) to speed up loading.

> lessc my_styles.less my_styles.css

An online LESS compiler can be found here.

Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap.