Make your CSS dynamic with .less

The Composite.Web.Css.Less package allows you to create and use dynamic CSS's by integrating .less (Less CSS for .NET) support on your Composite C1 website.

With .less on board you can create CSS-based .less files that support variables, operations, mixins, nested rules and functions in your style sheets. For more information on .less, please visit http://www.dotlesscss.org/.

To edit .less files, you can use one of the ad-hoc extensions for Visual Studio:

How to implement

  1. Install the package.
  2. On your website, create a file with the .less extension, e.g. ~/Frontend/Styles/mystyles.less
  3. Add styles as you do in CSS files with the additional .less syntax, for example: 
    @brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}
    Download source

    Please see examples at http://www.dotlesscss.org/.
  4. In the Layout perspective, edit a page layout template and link it to this .less file as you do for .css files: 
     
<link rel="stylesheet" href="~/Frontend/Styles/mystyles.less" type="text/css" />
     

Requirements

Composite C1 version 3.0 or later

SHARE