LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

聯成電腦網頁設計教學:一次讓你搞懂SASS

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、菜鳥編

 

 

Sass是什麼?簡單的說就是CSS的預處理器,可以提升編寫網頁CSS效率的程式語言。至於能提升多少,真的只能說看個人需求,假使你今天是一位剛步入網頁領域的菜鳥,可能一時間真的沒法感受到預處理器帶來的好處。但當你逐漸長大,開始負責大型的案子,相信你應該不會想要在一堆沒有整理過的code找到你要的內容。Sass簡單的說就是,「減少重複樣式的編碼撰寫」、「將樣式重複使用,降低多餘的編碼在開發環境中影響效率」。

 

這類的預處理器也不只有Sass,還有LESS、Stylus等…,各有其特色在,今天要介紹的Sass你也有耳聞到跟它名稱類似的Scss。這兩個是兄弟?有什麼差別?由於Sass是以縮進方式編寫,類似python,不具大括弧與分號格式,但也因如此,無法直接將大家最熟悉的CSS編寫方式直接套用,所以在初期並未受到已習慣純CSS方式的人青睞。不過在Sass 3進行了改良,引入新的語法,採用大家最習慣的CSS撰寫方式,具有大括弧與分號格式,語法完全兼容CSS3,並且繼承了Sass的強大功能。所以你曾經寫過的CSS檔案也可直接套用在SCSS上。

 

下面是Sass與Scss編碼上的差異:

 

    
        #siderbar
        	width :  60%
        	background-color :  #faa
		.menu
			width :  50%
    

 

    
        #siderbar {
                width :  60%;
                background-color :  #faa; 
        	.menu {
        		width :  50%;
        	}
        }       
    

 

    
        #siderbar {
	        width :  60%;
	        background-color :  #faa; 
        }       
    	#siderbar  .menu {
    		width :  50%;
	}
    

 

大致上了解了什麼是預處理,接著就進入主題來介紹Sass,這邊的案例會以Scss編寫,由於Scss是繼承了Sass,所以不論你選擇是哪一種預處理器來使用,觀念都是一樣的。

 

 

 

環境的建置:

 

每個人習慣的開發工具不同,這邊以vscode為例,其他的使用者可以在網路上找到對應的資料。這邊會使用到的套件為「Live Sass Compiler」。

 

 

透過命令選擇區( Ctrl + Shift +P ),可找到相關指令,其中「Live Sass:Watch Sass」就可以將工作區內的Scss檔案編譯成CSS,並同時監聽。

 

 

另一個方式就是點擊vscode底部的「Watch my Sass」。

 

 

經過編譯後,會在專案資料中產生與scss檔案相同名稱的CSS。

 

 

 

變數:

在Sass開發中,我們可以將專案中經常會使用到的設定值以變數方式來規劃,例如、字體格式、大小、顏色等…。使用「$」來定義變數,例如下面的定義:

 

    
    	$color-White :  #fff;  //定義白色 
    	$color-green :  #50b550;  //定義綠色 
    	$font-size :  16px;  //定義基本文字大小 

        //樣式宣告 
        .title_1 {
                background-color :  $color-green;
                color :  $color-White;
                font-size :  $font-size * 1.6;
        }       
    

 

變數的宣告並不會在編譯後的CSS中出現。

 

    
        .title_1 {
	        background-color :  #50b550;
	        color :  #fff;
	        font-size :  25.6px;
        }
    

 

上面的案例可以看到font-size部分使用了乘法,在Sass中變數具有加減乘除的運算能力。但可別以為只有數字的變數可以進行運算,就連顏色都沒問題。

    
    	$color-green :  #50b550;  //定義綠色 

        .box_1 {
        	background-color :  $color-green;
        }

        .box_2 {
        	background-color :  $color-green / 2;
        } 
    

 

 

做設計的都知道,不可能有一次就到位的狀況,客戶或是老闆一定會用他那專業度的美感請你修正。這時,變數的好處你馬上就能體會,僅需要修改參數設定即可,不需要再針對code逐次的修改。而運算更可以省去按計算機的時間,尤其當你要將一個寬度1000px劃分9個區塊時就相當方便。

 

 

 

巢狀:

巢狀用來明確定義階層,省去編碼重複的填寫與可讀性提升外,在管理與維護上都會方便許多。

 

以下是我們很常看到的項目清單CSS內容

 

    
        ul {
	        list-style :  none;
        }

        ul  li {
	        display :  inline-block;
	        padding :  10px;
        }

        ul  li  a {
	        color :  #888;
	        font-size :  16px;
        }
    

 

使用Sass巢狀方式,就可以簡化如下,在編譯成CSS代碼時,巢狀就如同父級與子元素的關係。

 

    
        ul {
        	list-style :  none;
        	li {
        		display :  inline-block;
	        	padding :  10px;
	        	a {
	        		color :  #888;
	        		font-size :  16px;
	        	}
        	}
        }       
    

 

另外有一種狀況並非是父子關係而是同層關係,例如選擇器,以下面hover的案例,就會加上「&」符號來代表與父級為同層。所以當使用「>、~、+ …」等的選擇器就可以用這方式來表達。

 

    
        .box_3 {
        	background-color :  $color-green;
        	&:hover {
        		background-color :  #888;
        	}
        }       
    

 

    
        .box_3 {
	        background-color :  #50b550;
        }

        .box_3:hover {
	        background-color :  #888;
        }
    

 

 

 

Mixin

可以把Mixin想成是一堆值的群組,以下面的code來說,使用@mixin定義了名稱為「circle」的mixin涵式。在circle上宣告了$w、$r兩個變數,並分別給予預設值100px、20%。

 

    
        @mixin  circle ($w :  100px, $r :  20%) {
        	width :  $w;
        	height :  $w;
        	border-radius :  $r;
        	background-color :  $color-green;
        }       
    

 

涵式宣告完成後,引入方式則是透過@include,下方code「.box_4」直接引用circle涵式,「.box_5」另外給三個變數新的值。

 

    
        .box_4  {
        	@include circle;
        }       
    

 

    
        .box_5  {
        	@include circle(150px, 50%);
        }       
    

完成後的結果如下,在沒有給變數定義新的值時,就會以預設的值來編譯。

 

※Sass中的mixin函數引用也可使用「+」。

 

    
        .box
        	+circleSass
    

 

Mixin的使用可以省去重複相同CSS樣式的編寫,例如最常使用的垂直置中就可利用mixin引入的方式,適應不同的區塊大小。

 

 

 

Import

一個比較大型的網站開發,如果將所有樣式都放在同一個CSS檔案不是一個很好的方式,程式碼動則幾千行,非負責的開發人員,要馬上了解樣式的內容可就不是一件簡單的事情。所以在開發中會將CSS程式碼切成好幾份來做管理,最後再編譯合併成一個CSS檔案。

 

透過import就可以將相關檔案載入。以下圖來說,將專案切分成三個檔案來管理,最後再將三個檔案彙整在main.css裡。

 

­­­

在main.scss上加上這3行。

 

    
        @import  "base/head ";
        @import  "base/body ";
        @import  "base/footer ";
    

不曉得你有沒有發現檔案名稱前面都有加上「_ 」?其實目的是要在編譯的過程中,將這些檔案排除掉,不會轉換成CSS格式。而加上下底線就是方便讓編譯的程式判別,最後僅需對main.scss編譯成main.css。

 

 

 

Extend

CSS重複的代碼越多,除了造成檔案變大外,相對的在網頁讀取時就會影響到SEO的品質分數了。因此在開發過程中會將相同樣式的的內容合併起來方便管理,例如下圖中的「.box」。

 

 

CSS​

 

在純CSS狀況下,就必須要在html中將對應的元素的class加上box。當編碼很多的狀況下,就必須不斷的切換檔案,影響到專注度。而Sass中的繼承(extend)就可以解決這問題。

 

以上面案例來說,將.box改為「%boxAll」,其中boxAll為合併樣式的名稱。

 

在後續編寫中,遇到要使用相同格式的,就不需要在切換到HTML中添加class名稱,直接在目前編寫的樣式中加入「@extend %boxALl」。

 

 

Scss

 

編譯後,就會將code中繼承的合併在一起。

 

 

CSS

 

有些人可能會感覺跟@mixin很像,到底要怎麼用比較適合?就以代碼是否需要修改來判定吧!假使今天的樣式是固定不需要修改,也就你不需要以@mixin中變數的來修改外觀。那使用@extend會比較適合。

 

 

 

進階應用:

前面我們有提到變數的應用,不過變數可並不是只能存放單一資料,也可存放多個資料型態中,也就是接下來會提到的「陣列」與「物件」。舉個例子,在開發過程中,我們一定會針對某項設定定義多個變數,例如,網頁視覺色、字體、尺寸…等,就可以將同類型的變數透過「List」或是「Map」來歸納整理。

 

 

 

List(陣列)

下面的例子宣告了一個名為color的變數,並使用陣列方式宣告了三個顏色。

 

    
        $color :  #fff, #7d3a3a, #f67070;
    

 

透過nth(變數,索引) 來引用List中的資料,例如下方「.p1」使用了變數$color中的第2個索引值,也就是「#7d3a3a」。

 

    
        .p1 {
        	color :  nth($color, 2);
        }

        .p2 {
        	color :  nth($color, 3);
        }
    

 

    
		<p class ="p1">這是使用nth($color,2)</p>
		<p class ="p2">這是使用nth($color,3)</p>
    

 

結果如下:

 

 

 

Map(物件)

物件與陣列不一樣的地方在於Map可自訂每個資料的鍵名,以下面來說,定一了一個名為btnColorChange的變數,用來設定按鈕在滑鼠hover時的顏色變化。其中Default與hover就是鍵名,#afd5e6與#7f99a5就是對應的鍵值。

 

    
        $btnColorChange :  (
        	default :  #afd5e6,
        	hover :  #7f99a5,
        );
    

 

 

引用方式透過map-get(變數,鍵名) 來取得

 

    
        .btn {
        	background-color :  map-get($btnColorChange, default);
        	&:hover {
			background-color :  map-get($btnColorChange, hover );
        	}
        }
    

 

完成如下:

 

 

 

Function(涵式)

如果有javascript或是其他程式語言背景的人,看到上面的List與Map是不是非常熟悉?其實Sass本身還提供了一些好用的函式,也可自訂函式使用,靈活度相當大,以上面的例子來說,也可透過if的判斷涵式可以將code修改如下:

 

將按鈕有關的變數以名稱為btnColor的map編寫,並在@mixin引用if判斷式來完成按鈕hover前後背景與文字的顏色變化。

 

    
        $btnColor :  (
        	bgDefault :  #afd5e6,
        	bgHover :  #7f99a5,
        	textColorDefault :  #000,
        	textColorHover :  #fff,
        );

        @mixin  btnColorChange ($status) {
		@if  $status == default {
			background-color :  map-get($btnColor, bgDefault );
			color :  map-get($btnColor, textColorDefault );
		}  @else  {
			background-color :  map-get($btnColor, bgHover );
			color :  map-get($btnColor, textColorHover );
		}
    	}
    

 

原本按鈕的編碼就省略了許多,在開發中就可省去許多重複編碼的出現,執行中如果要修改顏色,也僅需要調整$btnColor變數內的鍵值就可以。

 

    
        .btn {
        	@include btnColorChange(default);
        	&:hover {
			@include btnColorChange(hover);
        	}
        }
    

 

 

這篇文章的介紹也只是Sass的功能一部分,如果想要深入了解函式的功能可以參考這裡

 

前端設計人員要學習的內容很多,但重點不是要會,而是要能幫助你提升開發效率才是重點,如同文章一開始所提的,如果只是寫寫個小網頁,你可能會覺得光學習與習慣sass就需要不少時間成本,可能划不來。但如果是站在整個專案維護的角度來看,Sass就是一個不錯的選擇,可在修改內容時,不用在一堆碼海中找到目標,對於其他人來了解你的內容也會比較快速。

 

如果你覺得這篇文章很實用,也別忘了分享給你的親友們,相信對他們一定很有幫助!

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w