最好用的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就很有必要了。既節省我們的時間，有提高效率，一舉多得！！！