[Sass]學習筆記

Sass 是一個CSS 預處理器。

Sass 是CSS 擴展語言，可以幫助我們減少CSS 重複的代碼，節省開發時間。

Sass 完全兼容所有版本的CSS。

Sass 擴展了CSS3，增加了規則、變量、 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinCodingCheling[Sass]學習筆記Sass(英文全稱：SyntacticallyAwesomeStylesheets)是一個最初由HamptonCatlin設計並由NatalieWeizenbaum開發的層疊樣式表語言。

Sass是一個CSS預處理器。

Sass是CSS擴展語言，可以幫助我們減少CSS重複的代碼，節省開發時間。

Sass完全兼容所有版本的CSS。

Sass擴展了CSS3，增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。

Sass生成良好格式化的CSS代碼，易於組織和維護。

寫完Sass透過編譯成CSS給瀏覽器讀取的優點：可以寫較少的程式碼、可讀性高、提供巢狀結構和變數管理及運算功能、模組化好維護。

為什麼使用Sass?Sass是一款強化CSS的輔助工具，它在CSS語法的基礎上增加了變量(variables)、嵌套(nestedrules)、混合(mixins)、導入(inlineimports)等高級功能，這些拓展令CSS更加強大與優雅。

使用Sass以及Sass的樣式庫（如Compass）有助于更好地組織管理樣式文件，以及更高效地開發項目。

CSS本身語法不夠強大，導致重複編寫一些代碼，無法實現復用，而且在代碼也不方便維護。

Sass引入合理的樣式複用機制，增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。

以下整理Sass特性。

註解Sass的註解有兩種，/**/和//。

兩者不僅僅是多行註解與單行註解的差異，//是不會被編譯出來的。

Nesting：巢狀降低父元素重複性。

轉譯後的CSS樣式：.parent{color:blue;}.parent.child{font-size:12px;}轉譯前：.parent{color:blue;.child{font-size:12px;}}這樣如果需要修改.parent名稱，就只需要改一個地方。

要避免過度巢狀，如果包太多層，選擇器階層性過長，會導致瀏覽器渲染時間會比較久。

Sass嵌套規則與屬性Sass嵌套CSS選擇器類似於HTML的嵌套規則。

如下我們嵌套一個導航欄的樣式：Sass代碼：nav{ul{margin:0;padding:0;list-style:none;}li{display:inline-block;}a{display:block;padding:6px12px;text-decoration:none;}}實例中，ul,li,和a選擇器都嵌套在nav選擇器中，將以上代碼轉換未CSS代碼，如下所示：Css代碼：navul{margin:0;padding:0;list-style:none;}navli{display:inline-block;}nava{display:block;padding:6px12px;text-decoration:none;}Sass嵌套属性很多CSS屬性都有同樣的前綴，例如：font-family,font-size和font-weight，text-align,text-transform和text-overflow。

在Sass中，我們可以使用嵌套屬性來編寫它們：Sass代碼：font:{family:Helvetica,sans-serif;size:18px;weight:bold;}text:{align:center;transform:lowercase;overflow:hidden;}將以上代碼轉換未CSS代碼，如下所示：Css代碼：font-family:Helvetica,sans-serif;font-size:18px;font-weight:bold;text-align:center;text-transform:lowercase;text-overflow:hidden;Variables：變量Sass支援定義變數。

變數以美元符號（$）作為開頭。

變數用冒號（:）賦值。

變數的資料型態可以是Numbers（可以有單位或無單位）、Strings、Booleans、null值（視為空值），甚至可以使用Lists、Maps。

$text-color:#f00;1.變數使用時機變數使用時機：全域樣式設定時常需要設定的樣式如果需要修改樣式時，只需要修改變數的數值，就可以快速修改全部網頁的樣式，不需要逐一修改程式碼。

2.變數格式數字，1,2,13,10px字符串，有引號字符串與無引號字符串，"foo",'bar',baz顔色，blue,#04a3f9,rgba(255,0,0,0.5)布林類型，true,false空值，null數組(list)，用空格或逗号作分隔符，1.5em1em02em,Helvetica,Arial,sans-serifmaps,相當于JavaScript的object，(key1:value1,key2:value2)比較常用的為前三項。

數值$flex:2;$fontsize-m:16px;字串$ffm:"'NotoSansTC',sans-serif";$imge:'../../photo.png';顏色$white:white;$color-1:#FFF000;$color-2:rgb(0,0,0,.5);運算Sass支持數字的標準運算（加+、減-、乘*、除/和取餘%），並且，如果需要的話，也可以在不同單位間做轉換：//scssp{width:1in+8pt;}/*編譯css*/p{width:1.111in;}Sass的陣列雖然說陣列的英文應該是Array，但是Sass裡面只有List，但用法相同。

Sass的陣列索引是從1開始，陣列通常是用來存放沒有鍵名的變數。

$color:#000,#FFF,#222;//透過nth()使用List。

p{color:nth($color,2);}//當然你也可以傳入索引變數$index:3;a{color:nth($color,$index);}/*編譯CSS*/p{color:#FFF;}a{color:#ABC;}Sass的物件雖然說物件的英文應該是Object，但是Map裡面只有maps，但用法相同。

Map和List不同的地方在於你可以自訂每個資料的鍵名，也就是他們的名稱。

$linkColor:('dark':#000,'light':#FFF,'red':#791229,);p{color:map-get($linkColor,dark);}/*編譯CSS*/p{color:#000;}Mapsfunctionmap-get(map,key)，取出指定的值map-merge(map1,map2)，合併多個mapmap-remove(map,key)，移除指定的值map-keys(map)，列出指定map的全部keymap-values(map)，列出指定map的全部valuemap-has-key(map,key)，確認map中是否有指定key@import@import可以將CSS程式碼切成好幾份來做檔案管理，最後編譯出來合併成一個CSS檔案，方便管理。

在檔案名稱前面加上_，檔案將不會被編譯，例如_reset.sass。

利用Sassimport功能，就可以將程式碼切成各糢組區塊，程式碼較少，同時也較能準確聚焦欲修改的區塊。

@mixin使用Sass@mixin的好處：省去重複撰寫相同CSS樣式的時間建立CSS技巧資料庫，快速取用以指令@mixin宣告，並以指令@include呼叫。

如果撰寫SASS格式：@mixin為=符號@include為+符號@mixin範例：@mixintable-base{th{text-align:center;font-weight:bold;}td,th{padding:2px}}#data{@includetable-base;}/*編譯css*/#datath{text-align:center;font-weight:bold;}#datatd,#datath{padding:2px;}向混入傳遞變量混入可以接收參數。

我們可以向混入傳遞變量。

定義可以接收參數的混入：實例/*混入接收兩個參數*/@mixinbordered($color,$width){border:$widthsolid$color;}.myArticle{@includebordered(blue,1px);//調用混入，並傳遞兩個參數}.myNotes{@includebordered(red,2px);//調用混入，並傳遞兩個參數}以上實例的混入參數為設置邊框的屬性(color和width)。

將以上代碼轉換未CSS代碼，如下所示：Css代碼：.myArticle{border:1pxsolidblue;}.myNotes{border:2pxsolidred;參數預設值@mixin還可以附帶參數並給予預設值，如果沒有給值就會將預設值帶入。

@mixinbordered($color:blue,$width:1px){border:$widthsolid$color;}在包含混入時，你只需要傳遞需要的變量名及其值：實例@mixinsexy-border($color,$width:1in){border:{color:$color;width:$width;style:dashed;}}p{@includesexy-border(blue);}h1{@includesexy-border(blue,2in);}將以上代碼轉換未CSS代碼，如下所示：Css代碼：p{border-color:blue;border-width:1in;border-style:dashed;}h1{border-color:blue;border-width:2in;border-style:dashed;}@each在@each中，定義了一個變量，其中包含列表中每個項目的值。

語句@each$varin下面簡要解釋語法。

$each：它表示變量的名稱。

@each規則將$var設置到列表中的每個項目，並使用值$var輸出樣式。

：這些是SassScript表達式，將返回列表或映射。

$list方法：@each$colorinred,green,yellow{.p_#{$color}{background-color:#{$color};}}$map方法：$colors:(color1:red,color2:green,color3:yellow);@each$key,$colorin$colors{.p_#{$color}{background-color:$color;}}使用each+SassMaps來設計程式碼：//scss程式碼$types:(primary:#428bca,success:#5cb85c,)!default;//按鈕@each$name,$colorin$types{.btn-#{$name}{background:$color;color:#fff;border:1pxsoliddarken($color,5%);}}]//編譯出來的CSS.btn-primary{background:#428bca;color:#fff;border:1pxsolid#357ebd;}.btn-success{background:#5cb85c;color:#fff;border:1pxsolid#4cae4c;}我們一一來解析這樣的程式碼：SassMapsSassMaps是Sass3.3所提供另一種變數的設定方式，有點像是json富有key與value的概念，所以一開始就把你這網站有哪些樣式整理好後，key就寫此顏色的名稱，valuse就寫他的色碼：$types:(primary:#428bca,success:#5cb85c,info:#5bc0de,warning:#f0ad4e,danger:#d9534f)@each@each$name,$colorin$types各別的意思是，$types就是去讀取你的SassMap裡面的變數，看裡面有幾組，他的迴圈就會跑幾次。

$name、$color這兩個變數你可以自己命名，只要知道第一個變數$name會去找冒號前面的內容，第二個變數$color會找冒號後面的值即可。

${}插補變數沒辦法直接接字串，如果你希望變數可以連結字串的話，變數就必須使用插補包起來，所以我each裡面迴圈的程式碼，就可以透過插補動態產生class名稱，所以.btn-#{$name}跑第一次迴圈時，自然會先找到primary，組合起來就變成.btn-primary，後面就依序組合各別的Class名稱。

@content@content的用途主要是拿來傳遞內容到@mixin裡面去的，像是一般的@mixin大家所認知的就是他能夠傳遞變數進去，一般的@mixin如下程式碼：@mixinbg($text-color,$bg-color){background:$bg-color;color:$text-color;}.box{@includebg(#fff,#000);}/*編譯css*/.box{background:000;color:#fff;}使用@content就能在@mixin裡面繼續寫額外的東西@mixinbg($text-color,$bg-color){background:$bg-color;color:$text-color;@content;//增加一個@content}.box{@includebg(#fff,#000){border:1pxsolidlighten(#000,10);//將額外的程式碼寫在@include中括號裡面}}/*編譯css*/.box{background:#000;color:#fff;border:1pxsolid#1a1a1a;/*對應@content*/}舉個例子@content可以用在狀態樣式的表示：//連結樣式@mixinlink{&:link,&:visited{@content;}}//被點擊後的樣式@mixinlink-hover{&:hover,&:focus,&:active,&.active{@content;}}.box{height:50px;@includelink{color:#fff};@includelink-hover{color:#000};}/*編譯css*/.box{height:50px;}.box:link,.box:visited{color:#fff;}.box:hover,.box:focus,.box:active{color:#000;}利用此方法可以不用每次都要手寫hover、active、focus的樣式。

另外@content的使用還可以在media-queries、animation的keyframes定義，還有為瀏覽器兼容的定義等等。

RWD搭配@mixin也可以用在RWD斷點設計：$pc:1024px;$mobile:768px;@mixinrwd($width){@media(max-width:$width){@content;}}.box{float:left;width:30%;@includerwd($mobile){float:none;width:100%;}}/*編譯css*/.box{float:left;width:30%;}@media(max-width:768px){.box{float:none;width:100%;}}@extend@extend為合併樣式，將相同樣式的選擇器合併，並且可以繼續延續新增新的樣式。

@extend語法：.box1{background-color:#FFDDDD;border:1pxsolidyellow;}.box2{@extend.box1;border-color:pink;}/*編譯css*/.box1,.box2{background-color:#FFDDDD;border:1pxsolidyellow;}.box2{border-color:pink;}注意合併樣式的先後順序。

.box2{@extend.box1;border-color:pink;}.box1{background-color:#ffdddd;border:1pxsolidyellow;}/*編譯css*/.box2{border-color:pink;}.box1,.box2{background-color:#ffdddd;border:1pxsolidyellow;}如果是這樣，box2的樣式將會被覆蓋。

佔位符選擇器%foo(PlaceholderSelectors:%foo)從Sass3.3開始，可以在同一行中使用最近選擇器引用&來實現高級選擇器，比如：.foo{&-bar{color:red;}}/*編譯CSS*/.foo-bar{color:red;}種方式通常被用來配合BEM全名方式使用。

Sass額外提供了一種特殊類型的選擇器：佔位符選擇器(placeholderselector)。

與常用的id與class選擇器寫法相似，只是#或.替換成了%。

必須通過@extend指令調用。

當佔位符選擇器單獨使用時（未通過@extend調用），不會編譯到CSS文件中。

假如我們要建立一個樣式，但又不會去呼叫它，只是用來繼承，這時可以使用%符號。

Sass對這種選取項型態稱作Placeholders，只有當使用@extend才會有作用。

使用%符號，並不會被Sass編譯成CSS：a%drink{font-size:2em;background-color:$lemon-yellow;}.lemonade{@extend%drink;/*more*/}/*編譯css*/a.lemonade{font-size:2em;background-color:yellow;}.lemonade{/*more*/}@extend與@mixin的差異性1.@extend@extend主要用於合併相同程式碼。

若程式碼中有部分的CSS段落都長一樣，就可以呼叫@extend將樣式合併，有點類似JavaScript的繼承。

2.@mixin@mixin主要用於壓縮程式碼段落。

對於許多CSS段落需要重複使用，建議可以使用@mixin整理，此外，可以透過代入參數的特性重複使用，有點類似JavaScript的多型。

@extend與繼承@extend指令告訴Sass一個選擇器的樣式從另一選擇器繼承。

如果一個樣式與另外一個樣式幾乎相同，只有少量的區別，則使用@extend就可能很有用。

以下Sass實例中，我們創建了一個基本的按鈕樣式.button-basic，然後我們定義了兩個按鈕樣式.button-report與.button-submit，它們都繼承了.button-basic，它們主要區別在於背景顏色與字體顏色，其他的樣式都是一樣的。

Sass代碼：.button-basic{border:none;padding:15px30px;text-align:center;font-size:16px;cursor:pointer;}.button-report{@extend.button-basic;background-color:red;}.button-submit{@extend.button-basic;background-color:green;color:white;}將以上代碼轉換未CSS代碼，如下所示：.button-basic,.button-report,.button-submit{border:none;padding:15px30px;text-align:center;font-size:16px;cursor:pointer;}.button-report{background-color:red;}.button-submit{background-color:green;color:white;}使用@extend後，我們在HTML按鈕標籤中就不需要指定多個類class=”button-basicbutton-report”，只需要設置class=”button-report”類就好了。

@extend很好的體現了代碼的複用。

Sass規範第十章Sass規範—竹白記事本參考及推薦筆記：竹白@chupai的SASS筆記@HackMDrunoobSass教程Sass中文網--MorefromCodingChelingFront-endWebDevelopmentBlogbyChelingLiaoReadmorefromCodingChelingAboutHelpTermsPrivacyGettheMediumappGetstartedChelingLiao16FollowersFollowMorefromMediumAlexMathesonDemiseofanOverheadTechnologyEmilyWillowinWisdomBodyCollectiveEasterEggPinkSuperMoonJoseph-JosueLifeasweknowitAmazingPeopleGraduation!HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable