Less learning notes, less learning

Less learning notes, less learning

Video tutorial address: http://www.imooc.com/learn/102

 

1. What is Less

Css Less is like JavaScript Jquery, which allows people to use css more quickly and easily, making css code more concise, reducing repeated code and reducing the workload of developers.

Less CSS is a dynamic style language and a CSS preprocessing language. It uses a CSS-like syntax and provides CSS with dynamic language features, such as variables, inheritance, operations, and functions, making CSS compilation and maintenance easier.

Less Chinese manual: less.bootcss.com

 

Ii. Compilation tools

1. Koala: LESS/SASS compilation tool developed by Chinese people

: Http://koala-app.com/index-zh.html

2. Node. js Library

3. Browser

 

3. Configure and use koala

1. Create a file suffixed with. less: index. less

Write in the header: @ charset "UTF-8"; // set the character set

2. Drag the file to Koala and set the output to index.css under style.

After using koalafor compilation, an index.css file is generated.

3. Edit the index. less file.

 

Iv. Notes

1./* will be retained after compilation */

2. // it will not be retained after compilation

 

V. Variables

1. Set variables:

@ Text_width: 300px;

2. Use variables: Example

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

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

 

6. Hybrid

1. hybrid Introduction: unlike the original method for adding a new class to the class (the original <div class = "box border"> </div>), after using the Less hybrid function, just declare. after border. box. border.

Example 1:

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

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

. Border;
}

. Border {

Border: 5px solid yellow;

}

Example 2: Add a box2, but there is only a slight difference between it and box1. You can use it directly with box1 and add its own style.

. Box2 {

. Box1;

Margin-left: 100px;

}

2. Mixing can contain parameters.

Use a parameter value in index. less and add a () to border_02 to declare a variable;

Input the parameter 30px.

　　

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

　　

3. Mixed values can also contain default values

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

If you do not want to use the default value, you only need to write the value in () of border_03 under text_hunhe.

The default value must contain (). Otherwise, an error is returned.

　　

4. Examples of hybrid advanced usage, and compatibility can also be used

<Div class = "radius_test"> </div>

　　

The index.css file is displayed as follows:

　　

 

VII. Matching Mode

1. Introduction: It is equivalent to if in js, but not completely

2. Example

First, we will introduce a method for drawing inverted triangles.

<Div class = "sanjiao"> </div>

. Sanjiao {
Width: 0;
Height: 0;
Overflow: hidden;
Border-width: 10px;
Border-color: red transparent;
Border-style: solid dashed;
}

Example 1:

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

Border-width: @ w;

Border-color: @ c transparent;

Border-style: solid dashed;

}

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

Border-width: @ w;

Border-color: transparent @ c transparent;

Border-style: dashed solid dashed;

}

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

Border-width: @ w;

Border-color: transparent @ c transparent;

Border-style: dashed solid dashed;

}

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

Border-width: @ w;

Border-color: transparent @ c;

Border-style: dashed solid;

}

. Triangle (@ _, @ w: 5px, @ c: # ccc) {// @ _ is a fixed format, indicating that no matter who you match, the content will be included.

Width: 0;
Height: 0;
Overflow: hidden;

}

. Sanjiao {

. Triangle (right, 100px );

}

Matching mode Example 2:

Matching mode Positioning

. Pos (r) {position: relative ;}
. Pos (a) {position: absolute ;}
. Pos (f) {position: fixed ;}
. Posi {
Width: 100px;
Height: 100px;
Background: blue;
. Pos (r );
}

 

8. Operation

1. The less operation can be any number, color, or variable. The operation must be enclosed in parentheses. For example, + -*/

2. Example:

@ Test_01: 300px;

. Box_02 {

Width: (@ test_01-20) * 5; // The unit of px must be included, as long as one is included.

Color: # ccc-10; // not commonly used

}

 

9. nested rules

1. Example

　　　

Original css

. List {}
. List li {}
. List {}
. 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 {// & indicates the selector of the previous Layer

Color: red;

}
}
Span {
Float: right;
}
}

 

10. arguments Variables

. Border_arg (@ w: 30px, @ c: # ccc, @ xx: solid) {border: @ arguments} // saves a little bit of trouble. It is essential to be a lazy.

. Test_arguments {. border_arg (40px );}

 

11. Avoid compilation ,! Important

1. Avoid Compilation: It is used when we need to enter incorrect css syntax or use proprietary syntaxes not recognized by less. Add a ~ before the string ~ You can.

. Test_03 {
Width :~ 'Calc (300px-30px )';//~ '...' To avoid compilation, pass the content in single quotes to the browser as is
}

2 .! Important Keyword: Suitable for debugging, which is generally not used

. Test_important {

. Box! Important; // Add all styles! Important

}