less
1、变量
声明变量:@变量名:变量值
使用变量:@变量名
>>>Less中变量的类型
①数字类:1 100px
②字符串:无引号字符串[red] 有引号字符串["haha"]
③颜色类:red #000000 rgb()
④值列表类型:用逗号或空格分隔10px solid blue
>>>变量使用原则:
多次频繁出现的值、需要修改的值,设为变量
2、混合(MiXins)
①无参混合
声明:.name{} 选择器中调用:.name;
②带参混合
无默认值声明:.name(@brWidth){} 调用 .name(parValue);
有默认值声明:.name(@brWidth:value){} 调用 .name(parValue);parValue可省略
>>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错!
>>>无参混合，会在css中编译出同名的class选择器:有参的不会;
3、Less的匹配模式
使用混合进行匹配，类似于if结构
>>>声明 .name(条件一,参数){} .name(条件二,参数){} .name(@_,参数){}
>>>调用 .name(条件值,参数值);
>>>匹配规则:根据调用时提供的条件值，去寻找与之匹配的"mixins"执行。其中@_表示永远匹配
4、less中的运算
+ - * /
颜色运算时，红绿蓝分开计算，组内可进位，组间互不干扰
Sass
1、Sass中的变量
声明变量:$变量名:变量值
如果变量需要在字符串中嵌套，则需要使用# {}包裹
border-# {$left}:10px solid red;
2、Sass中的运算
会将单位也进行运算，使用时注意最终单位;
3、sass中的嵌套:选择器嵌套,属性嵌套,伪类嵌套
选择器嵌套
ul{ li{} }后代
ul{>li{} }子代
&表示上一层div{ul{li{&=="div ul li"}}}
属性嵌套:
属性名与{之间必须有:例如border:{color:red;}
伪类嵌套:
ul{li{&:hover{"ul li:hover"}}}
4、混合宏、继承、占位符
①混合宏: 声明:@mixin name($param:value){}
调用@include name(value);
>>>声明时,可以有参数,也可以无参;可带默认值,也可以不带;但是调用时,必须符合声明规范。同Less
>>>优点:可以传参,不会生成同名class
>>>缺点:会将混合宏中的代码,copy到对应的选择器中,产生冗余代码
②继承:声明: .class{} 调用 @extend .class;
>>>优点:继承相同代码，会提取出并集选择器中，减少冗余代码;
>>>缺点:无法进行传参、会在css中生成一个同名class
③占位符:声明: %class{} 调用: @extend %class;
>>>优点:继承相同代码，会提取出并集选择器中，减少冗余代码;不会在css中生成一个同名class
>>>缺点:无法进行传参
>>>综上所述:当需要传递参数的时候，用混合宏;当有现成class时用继承;
当不需要参数，且无现成class时用占位符;
5、if条件结构
6、for循环结构
7、while 循环结构
8、each循环遍历
9、函数function