The second lesson less study and the mobile end need to pay attention to the problem

One, less study notes:

　　1.less Description : A dynamic style language. Less adds CSS to dynamic language features such as variables, inheritance, operations, functions, less can run on the client (support Ie6+,webkit,firefox), or it can be run on the server with node. js or Rhino. Less of the Chinese document, you can refer to these two addresses for learning: http://less.bootcss.com/http://www.bootcss.com/p/lesscss/

　　Installation of 2.less

Method One: Install Iterm or use terminal can, then input sudo npm install-g less (under Mac System)

Law II: Go to the official website to download the reference

　　

　　3. Auxiliary compiling software Koala http://koala-app.com/index-zh.html

　　4. Notes

/* Code */will be compiled

Will not be compiled.

　　5. Variables

The method of defining the variable: @ variable name: value, e.g. @test-width:300px;. Box{width: @test-width;}

　　6. Mixing

You can use CSS styles in a mix, such as in the less file:

. Border{border:solid 5px Pink;}

. box{.border;width:300px;height:300px;}

In addition, a mix can take parameters, such as:

. border_02 (@border_width) {border:solid yellow @border_width;}

. test_hunhe{.border_02 (30px);}

Also, a mix can have default values, such as:

. border_03 (@border_width: 10px) {border:solid yellow @border_width;}

. test_hunhe_03{.border_03 ();}

(In this case, the value is not filled in (), that is, using the default value, () if the value is filled in, then the value that needs to be filled in is displayed, such as. border_03 (20px);)

Examples of mixing:

. Border_radius (@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

Border-radius: @radius;

}

. radius_test{

width:100px;

height:100px;

Background-color:green;

. Border_radius;

}

　　7. Matching mode

The equivalent of if in JS, but not exactly, after satisfying the condition to match, for example (triangle):

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

border-width:@w;

Border-color:transparent transparent @c transparent;

Border-style:dashed dashed solid dashed;

}

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

border-width:@w;

Border-color:@c transparent transparent transparent;

Border-style:solid dashed dashed dashed;

}

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

border-width:@w;

Border-color:transparent @c Transparent transparent;

Border-style:dashed solid dashed dashed;

}

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

border-width:@w;

Border-color:transparent Transparent transparent @c;

Border-style:dashed dashed dashed solid;

}

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

width:0;

height:0;

Overflow:hidden;

}

. sanjiao{

. Triangle (top,100px);

}

Example: Positioning

. POS (r) {position:relative;}

. POS (a) {position:absolute;}

. POS (f) {position:fixed;}

. pipei{

width:200px;

height:200px;

Background-color:green;

. POS (R);

}

　　8. Operations

@test_01:300px;

. box_02{

Width: (@test_01-20);

Color: #ccc-10;

}

　　9. Nesting rules

There are two ways to use:& for pseudo-classes,-hover or focus, and for connections,-&-item, for example:

HTML layer:

<ul class= "List" ><li><a></a><span></span></li></ul>

CSS less layer:

. list{

width:600px;

li{height:30px;}

A{float:left;}

Span{float:right;}

}

Example: Writing a Pseudo-class

A{float:left;

&:hover{color:red;}}

& represents his upper-level selector

　　10.arguments variables

. Border_arg (@w:30px,@c:red, @xx: solid) {

border: @arguments;

}

. test_arguments{

. Border_arg (40px);

}

　　11. Avoid compiling!important and summarizing:

Avoid compiling: Sometimes we need to output some incorrect CSS syntax or use some less-known proprietary syntax. To output such a value, we can precede the string with a ~ For example: width:~ ' calc (100%-35) '

!important keyword: Adds a!important to all the styles brought by the blend

Second, Summary:

(1) using less to set the font, and the method of global calculation;

Condition: PSD Draft is 640px, by dynamically setting HTML font size, the HTML font is 40px;

Define variables: @rem: 40px;

Use: If a font/width/height is 20px on the PSD draft, it can be set to 20/@rem;

(2) Clear floating style:

. clearfix:after{

Contant: "";

Display:block;

Clear:both;

}

Use on top of the parent element where float is applied.

(3) Issues needing attention on the mobile side

A. In the fixed-positioning element content, if there is an INPUT element, the position error occurs when the focus triggers the keyboard;

B. Regardless of whether you use the Beijing map or IMG, be sure to adjust the corresponding size (size) Background-size property, if the picture size and container size consistent, you can use 100%, if not consistent, set the width of the picture respectively;

C. Hit the text, must measure the row height, otherwise the height will not be accurate;

The characteristics of tags need to be memorized by heart.

The second lesson less study and the mobile end need to pay attention to the problem