CSS Preprocessor---less (c)

Four, the color function

1.less provides the color arithmetic function, the color will be converted into HSL color space, and then the channel level to operate, the function is as follows:

1 lighten (@color, 10%); Return a color which is 10% * lighten* than @color2 Darken (@color, 10%);3 saturate (@color, 10%);4 desaturate (@color, 10%);5 Fadein (@color, 10%);6 fadeout (@color, 10%);7 Fade (@color, 10%);8 Spin (@color,);9 Spin (@color, -10);Ten Mix (@color1, @color2); One  A //Use - @base: #f04615; - . Class{ the Color:Saturate (@base, 5); - Background-color:lighten (Spin (@base, Ten), 25%); -} -  + //css Output - . Class{ + Color:#fc3f09; A Background-color:#f8b78d; at}

V. Scope:

The variable follows the up-parent lookup principle; The #page internal @var of the #header样式中的color会优先使用

1 //less Code2 @var: red;3 #page{4 @var: White;5 #header {6 Color:@var;7}8 }9 #footer{Ten Color:@var; One} A  - //css Output - #page #header{ the Color:#ffffff; -} - #footer{ - Color:#ff0000; +}

Vi. Annotations and importing

(1) Note/*....*/retain the content of comments,//Do not retain the content of comments

(2) The less file is introduced in the file, the suffix can be taken without

1 //Two ways of writing 2 @import "Lib.less" 3 @import "Lib" 4 5 //less file When importing CSS file, css file with suffix name 6 @import "Lib.css"

CSS Preprocessor---less (c)