最好用的css辅助工具——SASS&LESS

Posted 2020-10-09

 

前言

　　首先，小编给大家解释一下什么是SCSS和LESS，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compasss）有助于更好地组织管理样式文件，以及更高效地开发项目。

同样，Less 也是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

　　我相信，在大家的心中会与这么一个疑问，css真的是属于我们程序猿的语言吗？因为它不需要逻辑，只需要像写作文一样就可以将一个静态页面给“写”出来。而且，在平时的css编译中，我想大家最在意的就是样式的权重吧。简单的样式还好，复杂样式那从根目录开始的辣末长的选择器真心让人不忍直视。所以，为了照顾我们程序猿那么懒得生物，大神们编译了SCSS和LESS。他们最大的优势就是可以将css进行类似于逻辑编译。

 

一、最常用的辅助工具——SCSS

虽然SASS和LESS同样为css辅助工具，但是大部分都比较喜欢使用SASS，想要知道原因，让小编给你解释！

 

1.1SCSS基本语法

 1、scss中的变量
  声明变量：$变量名：变量值；

 而且，在SCSS中，允许将变量嵌套在字符串中，但是变量必须使用   ${} 包裹

1 $width :100px;
2 $position:left;
3 #div1{
4     width: $width;
5     height: $width/10;
6     background-color: red;
7     border-#{$position}:10px solid yellow;
8 }

看到声明变量的$符，是不是觉得很熟悉？没错！jQuery中的获取节点使用的也是$。所以在大部分的网页编译中，大部分都使用scss，便是为了编译时更舒服。不会有使用两种语言的感觉。

  2、scss中的运算，会将单位进行运算，使用时需注意最终的单位是否正确。
  eg:10px * 10px =100 px*px;
 
  3、scss中的嵌套：选择器嵌套  属性嵌套  伪类嵌套

在scss的使用中，我们通常把选择器嵌套和伪类嵌套一起使用。因为这会极大地节省scss的代码量；

  ①选择器嵌套 ul{li{}}

  嵌套默认表示后代选择器，如果需要子代选择器，可以在选择器前加>;可以在选择器的{}中，使用&表示上一层的选择器。

  ②伪类嵌套： li{&:hover{}}
  在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类。
 

 1 section{
 2   
 3     background-color: #CCC;
 4     p{color: red;}
 5     ul{
 6         padding: 0px;
 7         li{
 8             list-style: none;
 9             &:hover{
10                 background-color:red;
11             }
12             font:{
13                 size:16px;
14                 weight:bold;
15                 family:"微软雅黑";
16                 style:"italic";
17             }
18         }
19         
20     }
21 }

 

 
  ③ 属性嵌套： font:{size:18px;}
   对于属性名有-分割为多段的属性，可以使用属性嵌套，属性名的前半部分必须紧跟一个：才能用{}包裹属性的后半部分。

1  font:{
2      size:16px;
3      weight:bold;
4       family:"微软雅黑";
5       style:"italic";
6  }

属性嵌套类似于声明一的对象；对象名为属性名-以前的名字；对象里面的键名为-以后的属性名；值为想要设置的值；

4、注释

//注释一：编译时不会被编译到css文件中
/*
 注释二：在非compressed压缩模式下，会被编译到css文件中。
 * */
/*!
 注释三：重要注释。在各种压缩模式下，都会被编译到css文件中                                                    
 * */

1.2混合宏、继承、占位符

  1、混合宏：使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏。

混合宏有三种方式；
  第一种方式：无参数；
  @mixin hunhe{}    .class{@include hunhe;}
  

1 @mixin hunhe(){
2     color: $color;
3 }
4 .class1{
5     @include hunhe;
6     background-color: blue;
7 }

 

第二种方式：有参数无默认值；
  @mixin hunhe(@param){}    .class{@include hunhe(value);}
  

1 @mixin hunhe($color){
2     color: $color;
3 }
4 .class2{
5     @include hunhe(green);
6     background-color: yellow;
7 }
8 、

 

第三种：有参数有默认值；
  @mixin hunhe(@param:value){}    .class{@include hunhe();}
 

1 @mixin hunhe($color:red){
2     color: $color;
3 }
4 
5 .class3{
6     @include hunhe;
7     background-color: blue;
8 }

 

优缺点：
优点：①可以传参  ②不会产生同名的class
缺点：调用时，会把混合宏中所有的代码copy到选择器中，产生大量重复代码
2、继承：声明一个普通class，在其他选择器中使用@extend继承这个class；
  .class{ }               .class{ @extend.class1;}

1 //继承
2 .class1{
3     color: red;
4 }
5 .class{
6     @extend.class1;
7     background-color: yellow;
8 }

 

优缺点：
优点：将相同代码，提取并集选择器，减少冗余代码；
缺点：①不能传参；②会产生出一个多余的class；
 3、占位符：使用%声明占位符，在其他选择器中使用@extend 继承占位符；
   %class1{}             .class1{@extend %class1;}

 1 //占位符
 2 %class1{
 3     color: red;
 4 }
 5 .class4{
 6     @extend %class1;
 7     background-color: yellow;
 8 }
 9 .class5{
10     @extend %class1;
11     background-color: blue;
12 }

 

优缺点：
优点：①将相同代码，提取到并集选择器，减少冗余代码；②不会生出一个多余的代码
缺点：不能传参
  
  

1.3条件语句、循环、函数

scss作为css的辅助工具，赋予了css类似于js的一些功能，例如循环、if条件语句、函数等；其中，一定要记得@符号的使用！！！

1、if条件结构：
      条件结构需要卸载选择器里面，条件结构的大括号直接包裹样式属性。
       @if 条件{}
       @else{}
  

 1 //scss中的条件语句
 2 
 3 .class6{
 4     width: 100px;
 5     height: 100px;
 6     @if 1>2{
 7         background-color: yellow;
 8     }@else{
 9         background-color: green;
10     }
11 }

 

2、for循环：有着两种方式，类似于开区间和闭区间；
       @for $i from 1 to 10{}  //不包含10
       @for $i from 1 through 10{}  //包含10
   

1 //for循环
2 @for $i from 1 through 10{
3     .border-#{$i}{
4         border:#{$i}px solid yellow;
5     }
6 }

 

3、while循环；
      先使用$符定义一个变量，然后进行条件判断，在{}中进行循环；
  

1 //while循环
2 $i:0;
3 @while $i<10{
4     .while-#{$i}{
5         border:#{$i}px solid red;
6     }
7     $i:$i+1;
8 }

 

4、each 循环遍历
      @each $item in a,b,c,d{
       //$item  表示a,b,c,d的每一项
   }

 

1 //each循环遍历
2 $i:0;
3 @each $item in c1,c2,c3,c4{
4     $i:$i+1;
5     .#{$item}{
6         border:#{$i}px solid red;
7     }
8 }

5、函数

scss也可以想js一样进行函数的调用；

1 @function func($num){
2     @return $num * 2;
3 }
4 
5 .funcTest{
6     width: func(10px);
7 }

 

二、LESS

less作为和scss同等地位的css辅助工具，在一些方面有着相同点，另一方面也有这他的优点；

2.1less基本语法

1、声明变量：@变量名：变量值
     使用变量：@变量名
 相对于scss，less变量的声明使用@符号；并且，变量一般使用在多次频繁出现的值，后期需要统一修改的值，牵扯到数值运算的值，推荐使用变量
  
  >>>less中的变量类型
  在css中出现的属性值，在less中都可以用作变量名
  ①数值类： 不带单位的 123    带单位的  1px
  ②字符串：带引号的 "hahahaah"    不带引号的  red   #ff0000
  ③颜色类：  red  #ff0000  RGB(255,255,0)
  ④值列表类型： 多个值用逗号或空格分隔  10px solid  red
  

1 @color :#ff0000;
2 @length:100px;
3 #div{
4     width: @length;
5     height:@length*2;
6     background-color: @color;
7 }

 

  2、混合(Mixins)，我们也亲切的叫做“米心”；相当scss的混合宏，同样有着三种方式：
  ①无参数混合；实际上就是一个普通的class选择器，会被编译到css文件中；
       声明： .class{}
       调用：在选择器中，使用.class;直接调用
  

1 //无参数混合
2 .borderRadius{
3     border-radius: 10px;
4     -webkit-border-radius: 10px;
5     -moz-border-radius: 10px;
6 }

 

 ②有参无默认值混合：
       声明：.class(@param){}
       调用:.class(paramValue);
  

 1 //有参无默认值混合
 2 .borderRadius1(@radius){
 3     border-radius: @radius;
 4     -webkit-border-radius: @radius;
 5     -moz-border-radius: @radius;
 6 }
 7 .class{
 8     width: 10px;
 9     height: 10px;
10     .borderRadius1(10px);
11 }

 

  ③有参有默认值混合：
       声明：.class(@param：10px){}
       调用:.class(paramValue); 或 .class();
 

 1 //有参有默认值混合
 2 
 3 .borderRadius2(@radius:10px){
 4     border-radius: @radius;
 5     -webkit-border-radius: @radius;
 6     -moz-border-radius: @radius;
 7 }
 8 
 9 .class{
10     width: 10px;
11     height: 10px;
12     .borderRadius2();
13 }

 

  >>>如果声明时没有给参数赋默认值，则调用时必须赋值，否则报错；
     有参混合，在编译时，不会出现在css文件中；

 

2.2匹配、@argument、嵌套

 1、LeSS的匹配默认
       ①声明,类似于switch语句；
       @pipei(条件一，参数){}    @pipei(条件二，参数){}   @pipei(@_，参数){}
       ②调用：
       @pipei(条件的值，参数的值){}
       ③匹配规则：
       根据调用时输入的条件值，去寻找与之匹配的混合执行；
  

 1 /*匹配模式*/
 2 .pipei(lefts,@width:10px){
 3     margin-left: @width;
 4 }
 5 .pipei(rights,@width:10px){
 6     margin-right: @width;
 7 }
 8 .pipei(tops,@width:10px){
 9     margin-top: @width;
10 }
11 .pipei(bottoms,@width:10px){
12     margin-bottom: @width;
13 }
14 .pipei(@_,@width:10px){
15    padding:10px;
16 }
17 @position:leftssssss;
18 //当上述条件都不符合时执行，相当于default；
19 .class1{
20     .pipei(@position,20px);
21 }

 

 2、@arguments  特殊变量：
       在混合中，@arguments表示混合传入的所有参数。@arguments中的多个参数，用空格分隔。
      

1 /*@arguments*/
2 .argu(@width,@style,@color){
3     //border:@width @style @color;
4     border:@arguments;
5 }
6 .class2{
7     .argu(10px,solid,red);
8 }

 

        
               
 4、Less嵌套
        less中允许css选择器按照html的结构进行嵌套。  相当于scss的选择器嵌套与伪类嵌套的组合；
       

 1 /*less嵌套*/
 2 
 3 section{
 4     width: 800px;
 5     height: 200px;
 6     background-color: #cccbbb;
 7     >p{
 8         color: blueviolet;
 9         font-size: 20px;
10         font-weight: bold;
11     }
12     
13     ul{
14         padding: 0px;
15         list-style: none;
16         li{
17             display: block;
18             float: left;
19             width: 200px;
20             height: 50px;
21             background-color: yellow;
22             text-align: center;
23             &:hover{
24                 background-color: cornflowerblue;
25             }
26         }
27     }
28 }

 

有两点值得注意；
        ①less的嵌套，默认是后代选择器。如果需要自带选择器，需要在前面加>；
        ②&符号，表示这个&所在的上一层表达器；比如上述嵌套：&:hover相当于section ul:hover

 

三、less&scss的使用

作为css的辅助工具，需要其操作环境最终还要转为css才能实现网页的布局；使用less直接创建Less文件就可以了吗？不，我们通常使用Koala进行less或scss到css的转换；

将less或scss的文件夹拖进koala的主页中，就可以随心所欲的编译了！！

 

编者按

对于一些简单的 项目，使用不使用scss和less并无区别，可在一些难度较大、比较复杂的项目上，less或scss就很有必要了。既节省我们的时间，有提高效率，一举多得！！！