Introduction to css pre-compilation-less language and css-less

Introduction to css pre-compilation-less language and css-less

As you know, css is a markup language with relatively simple syntax and low requirements on users. However, I don't know if you have found that when using css, you need to write a large number of seemingly non-logical code, which is inconvenient for maintenance and expansion and is not conducive to reuse, writing well-organized and easy-to-maintain css code is a very difficult task, especially for those who lack CSS coding experience. At this time, Cola quietly told you that our programmers are omnipotent and have developed the less language for this naughty css. Then, let cola introduce you to this new friend ~~~

1. Introduction to less:

1. The less language introduces functions such as variables, Mixin, operations, and functions based on the css syntax, we can use less code to do more things!

II. Introduction of. less (two methods ):

1. The client uses the. less file: first download the less. js file from the http://lesscss.org, and then add the following code in the HTML where we need to introduce the LESS source file:

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

Note that the rel attribute value here is "stylesheet/less.

Another point is that the less source file must be introduced before the introduction of less. js to ensure correct compilation and parsing of the less source file:

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

2. Use on the server: Compile the LESS source file to generate the final css file by using the less Compiler (recommended );

The use of LESS on the server mainly relies on the LESS compiler to compile the LESS source file to generate the final CSS file. Currently, the common method is to install LESS using the node Package Manager (npm, after the installation is successful, you can compile the LESS source file in the node environment.

At the initial stage of project development, whether using the client or server, we need to find a way to introduce the CSS or LESS files we want to use to our HTML pages or bridge files, LESS provides a feature that we are very familiar with-Importing. We can use this keyword to introduce the. less or. css file we need. For example:

@import “variables.less”;

The extension name of the. less file can also be omitted, as shown in the following code:

@import “variables”;

The introduction of CSS is the same as that of the LESS file, but the. css suffix cannot be omitted.

Iii. Introduction to the. less Syntax: 1. Variable: one definition, reuse:

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

As shown above: @ color is the variable just defined by cola. It can be used in both. bg-color and. border-color.

 

2. Mix in -- 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);}

Note: @ radius is a parameter. If no parameter is used, the default value is 5px, for example, # header usage.

3. Inheritance

A class uses a group of styles and writes a class to inherit the style of the previous class. For example:

Basic css style:

.base-style {    font-size: 12px;    color: red;}

The first inheritance statement:

.content{    .base-style();    background-color: white;}

The second method of inheritance:

.content{    &:extend(.base-style);    background-color: white;}

The two statements are different, and the CSS styles generated after compilation are different.

First:

.base-style{    font-size: 12px;    color: red;}.content {    font-size: 12px;    color: red;    background-color: white;}

Second:

.base-style,.content{    font-size: 12px;    color: red;}.content {    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. functions and operations:
Cola provides you with a website for your reference:
Http://less.bootcss.com/functions/
6. Logical Control:
LESS is the use of mixin through guard to support simple tuwa Branch Control,
For example, we need to implement a control: placeholder-style mixin. When the color is passed in, only the color is set. When the block is declared, the corresponding style rule is output. In other cases, a default color is output.
.mixin(@val) when (iscolor(@val)) {    color: @val;}.mixin(@val) when (isruleset(@val)) {    @val();}.mixin(@val) when (default()) {    color: #666;}
Cola prompt ha: default () in guards acts as else
Well, the main usage of less is as much as cola. Finally, I will give some friendly tips and hope to help you ~~~
Pre-compiled CSS:
Sass (Scss), Less, Stylus
Sass Official Website: http://sass-lang.com/http://www.w3cplus.com/sassguide/
Less Official Website: http://lesscss.org/Chinese: http://less.bootcss.com/
Stylus documentation: http://learnboost.github.io/stylus/
LESS and SCSS: https://css-tricks.com/sass-vs-less/
 
Which projects and books are available for reference in LESS and SCSS:
1. Bootstrap uses LESS
2. the sass and compass practices mainly explain Sass usage