On the pre-compiling of CSS---less language

As you know, CSS is a markup language, the syntax is relatively simple, the user's requirements are relatively low. But Coke does not know that friends have found that in the use of CSS need to write a lot of seemingly no logic code, not easy to maintain and expand, not conducive to reuse, especially for some lack of CSS experience in the Ape Ape, write well-organized and easy to maintain CSS code is a very difficult thing. This time, Coke quietly tell you, our programmer sorghum is omnipotent, for this naughty CSS, specifically developed less language. So, let's introduce you to this new friend by Cola.

First, Less introduction:

1, less language is based on the syntax of CSS, introduced variables, Mixin (mixed), operations, and functions, can let us do more things with fewer code Oh!

Ii. less introduction (Two ways):

1. The client uses the. Less file: first from http://lesscss.org Download the Less.js file and add the following code to the HTML that we need to introduce the less source file:

<link rel= "stylesheet/less" type= "Text/css" href= "styles.less" >

note that the value of the Rel attribute here is "stylesheet/less" Oh.

Another point is: lesssource files must be introduced before the introduction of Less.js, in order to ensure that less source files correctly compiled parsing:

<script src= ". /less.min.js "></script>

2, in the server-side use: mainly with the help of less compiler, the less source files compiled to generate the final CSS file ( recommended );

Less on the server side is mainly the use of less compiler, the less source files compiled to generate the final CSS file, the current common way is to use node's Package Manager (NPM) installed less, after successful installation can be in the node environment for the less source files to be compiled Translated.

In the early stages of project development, we need to find ways to introduce our CSS or less files to our HTML pages or bridge files, regardless of whether we use the client or server side, less provides a feature-importing that we are familiar with. We can use this keyword to introduce the. less or. css file that we need. Such as:

@import "Variables.less";

The. Less file can also omit the suffix name, like this:

@import "Variables";

The introduction of CSS is just like the less file, except that the. css suffix name cannot be omitted.

Iii. Introduction to the less syntax:1, variables: Once defined, repeated use:

@color: #505253;. Bg-color{    background-color:@color;} . Border-color {    border:1px solid @color;}

As shown above: @color is the variable that Coke has just defined, which can be used in . Bg-color and . Border-color

2, Mixed--mixins: Declare a class, and then call the current class in other classes

. Roundecorers (@radius: 5px) {    -moz-border-radius:@radius;     -webkit-border-radius:@radius;     Border-radius:@radius;} #header {    . roundecorers;} #footer {    . roundecorers (10px);}

Coke Comment: where @radius is the parameter, do not wear parameters, the default value is 5px , such as the use of #header .

3. Inheritance

There is a class that uses a set of styles, and a class that also wants to use this style, which inherits the style of the previous class, such as:

Base CSS style:

{    font-size: 12px;     color: red;}

The first type of inheritance:

. Content {    . Base-style ();    Background-color: White;}

The second type of inheritance:

. Content {    &:extend (. base-style);     background-color: White;}

The CSS styles generated after compilation are not the same in both ways

The first type:

. Base-style {    font-size: 12px;     color: red;}  {    font-size: 12px;     Color: red;     background-color: White;}

The second type:

. Base-style,.content {    font-size: 12px;     color: red;}  {    background-color: White;}

4. Nested rules:

Html:

<div id= "header" >    

Less:

#header{Display:inline;float: Left;H1 {font-size:26px;Font-weight:Bold;a {text-decoration:None;Color:#f36;&:Hover {text-decoration:underline;Color:#63f; }}} P{font-size:12px; }}

5, Function and operation:

Coke to everyone a Web site, for your reference:

http://less.bootcss.com/functions/

6. Logic Control:

Less is to support the simple Tile Man branch control with Mixin through guard,
For example, we want to implement a control::p laceholder style mixin, when the color is passed only set color, when the declaration block when the corresponding style rule output, other cases output a default color

{    color: @val;}  {    @val ();}  {    color: #666;}

Coke tip ha:default () in guards acts as else

OK, the main usage of less, coke on so much, and finally give some friendship tips , hope that the Bo friends can help Oh ~ ~ ~

Pre-compiled CSSWhat are the:

Sass (SCSS), Less,stylus

Sass Official Website: http://sass-lang.com/ http://www.w3cplus.com/sassguide/

Less official website: http://lesscss.org/ English: http://less.bootcss.com/

Stylus Documentation: http://learnboost.github.io/stylus/

Less and scss comparison: https://css-tricks.com/sass-vs-less/

What items and books are available for reference in less and SCSS respectively:

1. Bootstrap used Less

2, sass and compass actual combat a book mainly explains the Sass usage

On the pre-compiling of CSS---less language