Less与Sass

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

巴特西

Less与Sass

最新文章

热门文章