What is less? Koala configuration and use

First, what is less

CSS less is like JS jquery, can let people more quickly use CSS, make CSS code more concise, can reduce duplication of code, reduce the workload of developers.

Less CSS is a kind of dynamic style language, which is a kind of CSS preprocessing language, it uses CSS-like syntax, which gives CSS the characteristics of dynamic language, such as variables, inheritance, operations, functions, etc., which makes CSS easier to write and maintain.

Less Chinese manual: less.bootcss.com

Second, the compilation tool

1.Koala: Less/sass Compilation tool developed by Chinese

Download Address:

2.node.js Library

3. Browser-side use

Third, koala configuration and use

1. New suffix. Less file: index.less

The head writes: @charset "Utf-8"; Set Character Set

2. Drag the folder to the koala and set the output path to INDEX.CSS under style

Compile with koala, and then generate a index.css file.

3. Then we just need to edit the index.less file.

Iv. notes

1./* will be retained after compilation */

2.//is not retained after compilation

V. variables

1. Set the variable:

@text_width: 300px;

2. Use variables: example below

<div class= "box" ></div>

. box{
Width: @text_width;
Height: @text_width;
Background: #000;
}

Six, mixed

1. Hybrid profile: Different from the original method of appending class in class (Original <div class= "box Border" ></div>), using less's blending function, As soon as you declare. Border, Add. border in. Box.

Use example one:

<div class= "box" ></div>

. box{
Width: @text_width;
Height: @text_width;
Background: #000;

. border;
}

. border{

border:5px solid yellow;

}

Use Example two: Add a box2, but it and box1 only a little bit slightly different, you can use it directly box1, and then add its own style.

. box2{

. box1;

margin-left:100px;

}

2. Mixing is possible with parameters

Using values with parameters in Index.less, add a () after border_02, and declare a variable inside;

Then pass in the parameter 30px.

　　

In the compiled Index.css file, variables with parameters are not displayed

　　

3. Blending can also be with default values

Add a () to the border_03 and declare a variable with an initial value appended to the variable ": 10px";

If you do not want to use the default value, simply write the value in Border_03 () under Text_hunhe.

The default value must take (), or it will be an error.

　　

4. Hybrid advanced usage examples, compatibility can also be used

<div class= "Radius_test" ></div>

　　

In the compiled Index.css file, show the following

　　

Seven, matching mode

1. Introduction: Equivalent to the IF in JS, but not exactly

2. Example

First introduce a method of painting inverted triangle

<div class= "Sanjiao" ></div>

. sanjiao{
width:0;
height:0;
Overflow:hidden;
border-width:10px;
border-color:red transparent transparent transparent;
Border-style:solid dashed dashed dashed;
}

Sample Match Pattern One:

. Triangle (top,@w:5px,@c: #ccc) {

Border-width: @w;

Border-color: @c transparent transparent transparent;

Border-style:solid dashed dashed dashed;

}

. Triangle (right,@w:5px,@c: #ccc) {

Border-width: @w;

Border-color:transparent @c Transparent transparent;

Border-style:dashed solid dashed dashed;

}

. Triangle (bottom,@w:5px,@c: #ccc) {

Border-width: @w;

Border-color:transparent transparent @c transparent;

Border-style:dashed dashed solid dashed;

}

. Triangle (left,@w:5px,@c: #ccc) {

Border-width: @w;

Border-color:transparent Transparent transparent @c;

Border-style:dashed dashed dashed solid;

}

. Triangle (@_,@w:5px,@c: #ccc) {//@_ is a fixed format, which means that no matter who you match, it will be taken with you.

width:0;
height:0;
Overflow:hidden;

}

. sanjiao{

. Triangle (right,100px);

}

Sample Match pattern Two:

Match pattern positioning

. POS (r) {position:relative;}
. POS (a) {position:absolute;}
. POS (f) {position:fixed;}
. posi{
width:100px;
height:100px;
Background:blue;
. POS (R);
}

Viii. arithmetic

The operation in 1.less can be any number, color, variable, and the operation is wrapped in parentheses. such as: +-*/

2. Examples are as follows:

@test_01:300px;

. box_02{

Width: (@test_01-20) * 5; No mandatory requirements must be taken with PX units, as long as there is a belt can

Color: #ccc-10; Not very common to

}

Nine, nested rules

1. Example

　　　

Original CSS

. list{}
. List li{}
. List a{}
. List span{}

Use less nesting:

. list{
width:600px;
margin:30px Auto;
padding:0;
List-style:none;
font-size:16px; li{

height:30px;
line-height:30px;
Background:blue;
margin-bottom:5px;
Padding:0 10px;
}
a{
Float:left;
Color: #000;

&:hover{//& represents a previous layer selector

color:red;

}
}
span{
Float:right;
}
}

Ten, arguments variables

. Border_arg (@w:30px,@c: #ccc, @xx: solid) {border: @arguments}//Save a little bit of stuff, lazy people must

. Test_arguments{.border_arg (40px);}

Xi. Avoid compiling,!important

1. Avoid compiling: Use when we need to enter some incorrect CSS syntax or use some less-known proprietary syntax. Add a ~ before the string

. test_03{
Width: ~ ' calc (300px-30px) '; ~ ' ... ' avoid compiling and pass the contents of single quotes to the browser as-is
}

2.!important keyword: Suitable for debugging, generally do not use

. test_important{

. box!important; Add!important to all styles

}