Get into LESS

In order to rewrite the current css file of html5-client using LESS template,
I spent two days to discover how to use LESS. The followings are some important notes for reference:

Variable
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Syntax: @body-color: blue;

Variable scope

The scope of a variable refers to the places where it is available. If you define a variable at the very start of your LESS file it will be available to any code you write after it.
You can also define a variable inside a CSS rule. In this case the variable is not available outside of this ruleset; it can only be used locally.

@color: #941f1f;     // global variable
.button{
    @unit: 3px;      //local variable
    border:@unit solid @color; //using global variable @color
    padding: @unit * 3;
    margin: @unit * 2;
}
button {
    background: #941f1f + #222222;
    border: #941f1f - #111111;
    margin: @unit;           // won't work, @unit is out of scope
}

Mixins:

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.

.rounded_top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top; //simply import previous .rounded_top element
}
.submit {
    .rounded_top; // reuse previous .rounded_top element
}

Parametric mixin:

You can create a mixin and pass a value to it.

.rounded_top(@radius:3px) { //3px is the default value
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top(6px);
}
.submit {
    .rounded_top(3px);
}
.button(@radius:3px, @background: #e7ba64, @padding: 4px) { // passing multiple value
    .radius(@radius);
    background:@background;
    border: 1px solid @background - #222;
    padding: @padding;
}

color function:

saturate(@color, 10%);                  // return a color 10% points *more* saturated
desaturate(@color, 10%);                // return a color 10% points *less* saturated
lighten(@color, 10%);                   // return a color 10% points *lighter*
darken(@color, 10%);                    // return a color 10% points *darker*
fadein(@color, 10%);                    // return a color 10% points *less* transparent
fadeout(@color, 10%);                   // return a color 10% points *more* transparent
fade(@color, 50%);                      // return @color with 50% transparency
spin(@color, 10);                       // return a color with a 10 degree larger in hue
mix(@color1, @color2, [@weight: 50%]);  // return a mix of @color1 and @color2
greyscale(@color);                      // returns a grey, 100% desaturated color
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                        // return @darkcolor if @color1 is > 43% luma
                                        // otherwise return @lightcolor, see notes

@arguments key word:

It will output all parameters one after the other in the order given.

.gray_border(@width: 1px, @type: solid, @color: #bbb){
    border:@arguments;
}
div {
    .gray_border(2px, dashed);
}
=======> Your less file would be:
div {
    border:2px dashed #bbb;
}

Create namespace and nested rules:
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

#my_css{
    p {
        margin: 12px 0;
    }
    a {
        color:blue;
        text-decoration: none;
    }
    .submit {
        background: red;
        color: white;
        padding:5px 12px;
    }
    &.myclass{
     .....
    }
    >button{
     .......
    }
    &:hover{
      .....
    }
}

Importing other css or less file:

@import "reset.min.css";
@import "framework.less";
@import "widgets";

Highly recommend the twitter bootstrap in LESS. Any comments?

Advertisements
This entry was posted in open-source. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s