less中的变量

时间:2021-07-13 15:58:23
 【less中的变量】

1.声明变量:@变量名:变量值;

使用变量:@变量名;

【less中变量的类型】

1.数字 数字px

2.字符串:无引号字符串 red blue 有引号 "haha"

3.颜色 red #000000 rgb()

4.值列表类型:用逗号或空格分隔2px solid green

【变量使用原则】

多次频繁出现的值、需要修改的值,设为变量

【混合MiXin】

1.无参混合

声明: .name{} 选择器调用:.name:

2.带参混合

无默认值混合: .name(@param){} 调用:.name(parVlaue);

有默认值混合: .name(@param:value){} 调用:.name(parVlaue);parVlaue可省略

>>>如果声明时,参数没有默认值,则调用时必须赋值,否则报错

>>>无参混合,会在css中编译除同名的class选择器:有参的不会

【less匹配模式】

使用混合匹配,类似于if

.name(条件一,参数){}.name(条件二,参数){}.name(@_,参数){}

调用.name(条件值,参数值)

匹配规则:根据调用时提供的条件值,去寻找与之匹配的MiXins执行,其中@_表示永远需要执行的部分

【less中的运算】

+ - 

颜色运算时,红绿蓝分三组运算,组内可进位,组间互不干涉

less中的嵌套,保留HTML结构

1.默认后代选择器,如果需要子代选择器,在子代前+>

2.&表示上一代,&:hover 上一代的hover事件