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

 

前言

　　首先，小编给大家解释一下什么是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中，允许将变量嵌套在字符串中，但是变量必须使用   ${} 包裹

$width :100px;
$position:left;
#div1{
    width: $width;
    height: $width/10;
    background-color: red;
    border-#{$position}:10px solid yellow;
}

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

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

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

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

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

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

section{
  
    background-color: #CCC;
    p{color: red;}
    ul{
        padding: 0px;
        li{
            list-style: none;
            &:hover{
                background-color:red;
            }
            font:{
                size:16px;
                weight:bold;
                family:"微软雅黑";
                style:"italic";
            }
        }
        
    }
}

 

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

 font:{
     size:16px;
     weight:bold;
      family:"微软雅黑";
      style:"italic";
 }

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

4、注释

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

1.2混合宏、继承、占位符

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

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

@mixin hunhe(){
    color: $color;
}
.class1{
    @include hunhe;
    background-color: blue;
}

 

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

@mixin hunhe($color){
    color: $color;
}
.class2{
    @include hunhe(green);
    background-color: yellow;
}
、

 

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

@mixin hunhe($color:red){
    color: $color;
}

.class3{
    @include hunhe;
    background-color: blue;
}

 

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

//继承
.class1{
    color: red;
}
.class{
    @extend.class1;
    background-color: yellow;
}

 

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

//占位符
%class1{
    color: red;
}
.class4{
    @extend %class1;
    background-color: yellow;
}
.class5{
    @extend %class1;
    background-color: blue;
}

 

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

1.3条件语句、循环、函数

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

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

//scss中的条件语句

.class6{
    width: 100px;
    height: 100px;
    @if 1>2{
        background-color: yellow;
    }@else{
        background-color: green;
    }
}

 

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

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

 

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

//while循环
$i:0;
@while $i<10{
    .while-#{$i}{
        border:#{$i}px solid red;
    }
    $i:$i+1;
}

 

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

 

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

5、函数

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

@function func($num){
    @return $num * 2;
}

.funcTest{
    width: func(10px);
}

 

二、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
  

@color :#ff0000;
@length:100px;
#div{
    width: @length;
    height:@length*2;
    background-color: @color;
}

 

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

//无参数混合
.borderRadius{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

 

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

//有参无默认值混合
.borderRadius1(@radius){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
.class{
    width: 10px;
    height: 10px;
    .borderRadius1(10px);
}

 

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

//有参有默认值混合

.borderRadius2(@radius:10px){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.class{
    width: 10px;
    height: 10px;
    .borderRadius2();
}

 

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

 

2.2匹配、@argument、嵌套

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

/*匹配模式*/
.pipei(lefts,@width:10px){
    margin-left: @width;
}
.pipei(rights,@width:10px){
    margin-right: @width;
}
.pipei(tops,@width:10px){
    margin-top: @width;
}
.pipei(bottoms,@width:10px){
    margin-bottom: @width;
}
.pipei(@_,@width:10px){
   padding:10px;
}
@position:leftssssss;
//当上述条件都不符合时执行，相当于default；
.class1{
    .pipei(@position,20px);
}

 

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

/*@arguments*/
.argu(@width,@style,@color){
    //border:@width @style @color;
    border:@arguments;
}
.class2{
    .argu(10px,solid,red);
}

 

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

/*less嵌套*/

section{
    width: 800px;
    height: 200px;
    background-color: #cccbbb;
    >p{
        color: blueviolet;
        font-size: 20px;
        font-weight: bold;
    }
    
    ul{
        padding: 0px;
        list-style: none;
        li{
            display: block;
            float: left;
            width: 200px;
            height: 50px;
            background-color: yellow;
            text-align: center;
            &:hover{
                background-color: cornflowerblue;
            }
        }
    }
}

 

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

 

三、less&scss的使用

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

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

 

编者按

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