less学习一基本了解用法

less的好处是安装很简单，只需要npm i less --save-dev就行

一、变量
@width:1280px;

@height:@width+900px;

#head{

heigth:@height;

width:@width;

}

二、混合

.border{

border:1px sold #ddd;

}

.mystyle{

color:red;

font-size:10px;

border:.border();

}

三、嵌套：

#main{

h1{ font-size:24px;}

h2{font-size:20px;}

h3{font-size:18px;}

}

.clear-fix{

display:block;

zoom:1;

&:after{

content:'';

display:block;

font-size:0;

height:0;

border:0;

clear:both;

visibility:hidden

}

}

四、规则冒泡

就是@的嵌套

@media，@support

.content{

@media(min-width:1930px){

        @media(min-resolution:192dpi){

                

}

}

@media(min-width:2200px){

        

}

}

五、运算

+-*/、cacl：和cacl的运算一致，加减乘除对同一单位，

六、转译

~()

或者()

七、函数

percentage，if、boolean、escape、e\format\replace、length、extract、range(4)、each、ceil、

floor、round、sqrt、abs、sin、asin、cos、acos、tan、atan、pi、pow、mod、min、max、isnumber、isstring、iscolor、iskeyword、

isurl、

ispixel、

isem、

ispercentage、

isunit、isruleset

color、image-size、image-width、image-height、

convert、data-uri、default、

unit、

get-unit、svg-gradient、

rgba、

argb、hsl、hsla

hsv

hsva、hue

saturation、

lightness、

hsvhue...

八、映射

#colors() { primary: blue; secondary: green; }

.button { color: #colors[primary]; border: 1px solid #colors[secondary]; }

九、作用域

可以重复定义

十、懒加载

@import "library";如果是less 文件可以省略后缀。