More or Less

Ever wish you could do more with css by writing less repetitive styles?

Introducing less: “The dynamic stylesheet language.”

In summary, by using less you can focus on writing styles in one place and reusing them where needed, even conditional styles which ultimately just compile back to native css.


Features:

• Variables
• Mixins
• Parametric Mixins
• Pattern-matching and Guard Expressions 
• Nested Rules
• Operations
• Color Functions
• Math Functions
• Namespaces
• Scope
• Comments
• Importing (Import other less files)
• String Interpolation 
• Escaping
• JavaScript Evaluation

Get it from Nuget:


Setup:

<link rel="stylesheet/less" type="text/css" href="Site.less" />
<script src="less-1.3.0.min.js" type="text/javascript"></script>

Less:

// Variables

@base-size: 5px;

@width: 80%;

@base-color: #064b33;

body {

       background-color: @base-color;

}

h1 {

text-align: center;

       .border-radius();

       .mixin(@base-color, percentage(5 / 100);

}

.center {

       margin-left: auto;

       margin-right: auto;

}

.container (@size: 5px) {

       .mixin(@base-color, percentage(@size / 100); // Math functions      

       .border-radius(@size);

       width: @width;

       .center; // Mixins

       padding: @size;

       min-height: 200px;

}

.container-big {

       .container(@base-size); // Parametric Mixins

}

.container-small {

       .container(@base-size * 2);

       width: @width / 2; // Operations

}

// Guarded mixins

.mixin (@color, @percentage) when (lightness(@color) >= 50%) {

       background-color: darken(@color, @percentage); // Color functions

}

.mixin (@color, @percentage) when (lightness(@color) < 50%) {

       background-color: lighten(@color, @percentage);

}

.mixin (@color, @percentage) {

       color: @color;

}

.border-radius (@radius: 5px) {

       border-radius: @radius;

       -moz-border-radius: @radius;

       -webkit-border-radius: @radius;

}

Result:

As you can see, less is very flexible and easy to use simplifying css as we know it...
And that's it, more or less, till next time...

Sample