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

時間 2019-11-17

標籤最好用的 css 輔助工具 sass&less sass 欄目 CSS 简体版

原文原文鏈接

前言

　　首先，小編給你們解釋一下什麼是SCSS和LESS，Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compasss）有助於更好地組織管理樣式文件，以及更高效地開發項目。css

一樣，Less 也是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。web

　　我相信，在你們的心中會與這麼一個疑問，css真的是屬於咱們程序猿的語言嗎？由於它不須要邏輯，只須要像寫做文同樣就能夠將一個靜態頁面給「寫」出來。並且，在平時的css編譯中，我想你們最在乎的就是樣式的權重吧。簡單的樣式還好，複雜樣式那從根目錄開始的辣末長的選擇器真心讓人不忍直視。因此，爲了照顧咱們程序猿那麼懶得生物，大神們編譯了SCSS和LESS。他們最大的優點就是能夠將css進行相似於邏輯編譯。less

1、最經常使用的輔助工具——SCSS

雖然SASS和LESS一樣爲css輔助工具，可是大部分都比較喜歡使用SASS，想要知道緣由，讓小編給你解釋！koa

1.1SCSS基本語法

一、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，即是爲了編譯時更舒服。不會有使用兩種語言的感受。佈局

二、scss中的運算，會將單位進行運算，使用時需注意最終的單位是否正確。
eg:10px * 10px =100 px*px;

三、scss中的嵌套：選擇器嵌套屬性嵌套僞類嵌套spa

在scss的使用中，咱們一般把選擇器嵌套和僞類嵌套一塊兒使用。由於這會極大地節省scss的代碼量；3d

①選擇器嵌套 ul{li{}}code

嵌套默認表示後代選擇器，若是須要子代選擇器，能夠在選擇器前加>;能夠在選擇器的{}中，使用&表示上一層的選擇器。

②僞類嵌套： 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  }

屬性嵌套相似於聲明一的對象；對象名爲屬性名-之前的名字；對象裏面的鍵名爲-之後的屬性名；值爲想要設置的值；

四、註釋

//註釋一：編譯時不會被編譯到css文件中
/*
註釋二：在非compressed壓縮模式下，會被編譯到css文件中。
* */
/*!
註釋三：重要註釋。在各類壓縮模式下，都會被編譯到css文件中
* */

1.2混合宏、繼承、佔位符

一、混合宏：使用@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到選擇器中，產生大量重複代碼
二、繼承：聲明一個普通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；
三、佔位符：使用%聲明佔位符，在其餘選擇器中使用@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條件語句、函數等；其中，必定要記得@符號的使用！！！

一、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 }

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

三、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 }

四、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 }

五、函數

scss也能夠想js同樣進行函數的調用；

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

2、LESS

less做爲和scss同等地位的css輔助工具，在一些方面有着相同點，另外一方面也有這他的優勢；

2.1less基本語法

一、聲明變量：@變量名：變量值
   使用變量：@變量名
相對於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 }

二、混合(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、嵌套

一、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 }

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

四、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 }