Dynamic style sheet Lesscss: Simple Learning lesscss Grammar

Article Introduction: Lesscss is a dynamic stylesheet language, and he lets CSS add variables, combinations, functions, operations, and more. This project's website is not accessible in the country, everybody understands.

Lesscss is a dynamic stylesheet language, and he lets CSS add variables, combinations, functions, operations, and more. This project's website is not accessible in the country, everybody understands.

There are two ways to use LESSCSS:

1. Page to add a less.js file, CSS using the style.less file suffix to write, but need to have the server's environment support

2. Using Node.js to compile on the server side, Node.js uses the less method as follows:

Use the NPM Package Manager first to install
$ NPM Install less
You can then use the command line to compile the compressed less code.
$ LESSC styles.less > Styles.css

Here are some lesscss syntax:

Using variables

Less

@color: #4D926F;

#header {

Color: @color;

}

H2 {

Color: @color;

}

/* Compiled CSS * *

#header {

Color: #4D926F;

}

H2 {

Color: #4D926F;

}

2. Combination

Less

. Rounded-corners (@radius: 5px) {

Border-radius: @radius;

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

}

#header {

. rounded-corners;

}

#footer {

. Rounded-corners (10px);

}

/* Compiled CSS * *

#header {

border-radius:5px;

-webkit-border-radius:5px;

-moz-border-radius:5px;

}

#footer {

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

}

3. Selector

Less

#header {

H1 {

font-size:26px;

Font-weight:bold;

}

p {font-size:12px;

a {text-decoration:none;

&:hover {border-width:1px}

}

}

}

/* Compiled CSS * *

#header H1 {

font-size:26px;

Font-weight:bold;

}

#header p {

font-size:12px;

}

#header p a {

Text-decoration:none;

}

#header p A:hover {

border-width:1px;

}

4. Variable Budget

Less

@the-border:1px;

@base-color: #111;

@red: #842210;

#header {

Color: @base-color * 3;

Border-left: @the-border;

Border-right: @the-border * 2;

}

#footer {

Color: @base-color + #003300;

Border-color:desaturate (@red, 10%);

}

/* Compiled CSS * *

#header {

Color: #333;

border-left:1px;

border-right:2px;

}

#footer {

Color: #114411;

Border-color: #7d2717;

}

5. Import external CSS

@import "Lib.less";

@import "Lib";

Universal Quotes Lesscss, we can write CSS modular, have better reading.

First of all, through the import of the Web site's style into N modules, when the page needs which module on which to reference. You can also define the new functionality of CSS3 as a class library, and because of the function, those rounded corners, shadows, and so on can only be defined once. Speaking page need to use the main text, border, background color defined as variables for subsequent style use, to the time the site style needs to change, the color is also very good changes.

I personally think that the lesscss of the first stage of the problem are:

1. The CSS3 style does not automatically complement all other browsers ' hack.

2. The use of Nodejs in Window System support is not enough, but recently released a Nodejs window version, which is expected to improve in the near future

3. Editor, IDE not friendly to LESSCSS syntax indentation support.