Less与Sass

时间:2022-09-15 08:11:56

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