Less与Sass

一。【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"执行，其中@_表示永远需要执行的部分。