How to create and use .less files

1. On your website, create a file with the .less extension, e.g. ~/Frontend/Styles/mystyles.less
2. Add styles as you do in CSS files with the additional LESS syntax, for example:
   Expand code

   @brand_color: #4D926F;
   
   #header {
     color: @brand_color;
   }
   
   h2 {
     color: @brand_color;
   }

   
   Please see examples at http://www.lesscss.org/.
3. In the Layout perspective, edit a page layout template and link it to this .less file as you do for .css files:
   Expand code

   <link rel="stylesheet" href="~/Frontend/Styles/mystyles.less" type="text/css" />