一。【less中的变量】
1、声明变量： @变量名字：变量值
2、使用变量： @变量名
>>>less中变量的类型
① 数字类 1 10px ②字符串: 无引号字符串red 有引号字符串"haha"
③ 颜色类 red #000000 ragb() ④值列表类型：用逗号或者分隔 10px solid 10px
>>>变量使用规则：
多次频繁出现的值、需要更改的值，设为变量
2、混合(MiXins)
① 无参混合
声明： .name{} 选择器中调用： .name
② 带参混合
无默认值声明： .name(@param){} 调用： .name(parvalue);
有默认值声明： .name(@param:value){} 调用： .name(parvalue); parvalue可省
>>>如果声明时。参数没有默认值，则调用时必须赋值，否则报错！
>>>无参混合，会在CSS中编译除同名的class选择器，有参的不会；
3.Less的匹配模式
使用混合进行匹配，类似于if结构；
声明：.name(条件一，参数){}.name(条件二，参数){}.name(@_，参数){}
4.less中的运算
+-* /
颜色运算时，红绿蓝分三组计算。组内可进位，组间互不干涉
二。【sass中的变量】
使用$变量名：变量值，声明变量；
如果变量需要在字符串中嵌套，则要使用井号{}包裹如33
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;
>>>优点：继承相同代码，会提到并集选择器；不会生成同名 class选择器
>>>缺点：无法传参
综上：当需要传参时，用混合宏；当有现成class时，用继承，不需要参数也不需要class用占位符；
5.if条件结构：@if {}
@else{}；
6.for循环结构
@for $i from 1 to 10{}不含10
@for $i from 1 through 10{} 含10
7.while循环结构
$j:1;
@while $j<10{
.while井号{$j}{border:1px solid red
}
$j:$j+1;
}
8.each循环遍历
@each item in a,b,c,d{
}
9.函数
@function func($length){
$length1:$length*5;
@return $length1;
}
调用：func(10px);
调用：.name(条件值，参数值)；
匹配规则：根据调用时提供的条件值，去寻找与之匹配的"miXins"执行，其中@_表示永远需要执行的部分。