[筆記] SASS / SCSS | PJCHENder 未整理筆記

2024-09-21

文章推薦指數： 80 %

投票人數：10人

[筆記] SASS / SCSS · 目錄 · 資料型態（Data Types） · 建立變數（variable） · 建立函式（function directive) · Partials · mixins · Extend/ ... Skiptomaincontent這個網站放置的是未發佈或未完整整理的筆記內容，若想檢視正式的筆記內容請到PJCHENder那些沒告訴你的小細節。

PJCHENderOfficialDocsBlogGitHubFacebookLinkedinSearchCSS[筆記]SASS/SCSSOnthispagelighten($color,$amount)//Makesacolorlighter.darken($color,$amount)//Makesacolordarker.SASSPlaygroundSASSavailablefunctionSASSGuideSASSAPI目錄[TOC]資料型態（DataTypes）SASSScript支援8種資料型態：數值（number）：1.2,13,10px字串（strings）："foo",'bar',baz（可以有引號或沒有）顏色（color）：blue,#04a3f9,rgba(255,0,0,0.4)nulls：nulllistsofvalue：1.5em1em02em,Helvetica,Arial,sans-serifmapsfromonevaluetoanother：(key1:value1,key2:value2)functionreferencesDataTypes@SASSReferenceStringInterpolation在SASS中可以使用#{}，裡面的內容會被SASS編譯：@mixintooltip($background){background-image:url(#{$background});}ListsLists是在SASS中用來表徵CSS樣式的方式，像是margin:10px15px00或font-family:Helvetica,Arial,sans-serif。

Lists就是一系列的值，並且可以透過空格或逗號加以分隔，裡面的每個值稱作item，實際上任何單一的值也是lists，他就是只有一個item的lists。

lists本身被沒有太多作用，在透過SASSScriptlistfunctions則讓lists變得非常好用。

nthfunction：可以讀取lists內的item。

joinfunction：可以將多個lists連結再一起。

appendfunction：可以將items添加到lists內。

@eachdirective可以為list中的每一個item添加樣式。

除了包含單一值之外，lists也可以包含其他lists，舉例來說，1px2px,5px6px是一個包了兩個lists的lists，其中第一個item是list1px2px，另一個item則是list5px6px。

如果裡面的lists和外面的lists有相同的分隔符號（即，空格或逗號），那麼則需要使用括號來定義清楚，舉例來說，(1px2px)(5px6px)和前面一樣，都是包有兩個lists的lists。

當lists被轉換成CSS時，SASS不會添加任何括號，因為CSS並不了解他們，也就是說(1px2px)(5px6px)和1px2px5px6px在它們轉換成CSS之後，都是一樣的，但在轉換之前他們是不同的。

Lists也可以不包含任何items，這樣的lists可以用()表示（這也同樣是空的map），他們沒辦法被直接轉換成CSS。

MapsMaps在SASS中用來表徵key和values的關係，和lists不同，maps總是必須要透過括號包著，並且用逗號分隔：$map:(key1:value1,key2:value2,key3:value3,);和Lists類似，maps經常透過SASSScriptfunctions來使用：map-get可以找出在map裡面的value。

map-merge：可以添加值到map當中。

@eachdirective：可以用來為map中的每一個key/valuepair添加樣式。

Maps也可以用來任和lists可以用的地方，當對maps使用lists的函式時，map會被視為alistofpairs，舉例來說，(key1:value,key2:value2)，將會被視為key1value1,key2value2的list。

但Lists並不能被當作maps使用，除了空的lists()之外，()可以用來同時表示沒有item的lists或是沒有key/valuepairs的Maps。

Maps並沒有辦法轉換成CSS，透過inspect($value)可以用來檢視某個maps的內容，方便debug使用。

建立變數（variable）keywords:!global,!default在SASS中可以使用關鍵字$來建立變數。

在SASS所定義的變數中，底線（_）和連結線（-）的使用可以互換，舉例來說，雖然下面定義的變數名稱是$bg_black，但是一樣可以透過$bg-black提取：$bg_black:#333;.block1{background-color:$bg_black;}.block2{background-color:$bg-black;}全域變數（!global）這些變數只有在它所定義的階層中有效，因此如果想定義的是全域變數，可以使用$將變數定義在最外層，或者是用!global標籤來定義全域變數：$black:'#CCC';body{background-color:$black;$width:100%!global;//這個$width會變成全域變數width:$width;}預設變數（!default）對某一個變數後方加上!default後，如果這個變數有被賦值過，則使用該值，如果沒有被賦值過，則使用預設值：//SCSS$gray:#eaeaea;$black:#333!default;//$black沒被賦值過，所以會套用預設值$gray:#cacaca!default;//$gray被賦值過，所以不會套用預設值.block{background-color:$black;color:$gray;}編譯後：/*CSS*/.block{background-color:#333;color:#eaeaea;}建立函式（functiondirective)$grid-width:40px;$gutter-width:10px;@functiongrid-width($n){@return$n*$grid-width+($n-1)*$gutter-width;}#sidebar{width:grid-width(5);}FunctionDirective@SASSDocumentationPartialskeywords:@import在SASS中會以底線開頭的方式來為partials檔案命名，例如_partial.scss，SASS會知道底線開頭的檔案是partial，因此不會產生一支獨立的CSS檔。

在主要的SASS檔中則可以透過@import來載入partial檔。

若想載入名為_partial.scss的partial檔，只需在主要的檔案使用@import，同時partial檔的底線（_）和副檔名（.scss）可以不用寫出來：//main.scss@import'partial';mixinskeywords:@mixin,@include,@content使用關鍵字@mixin來建立函式；使用關鍵字@include來載入函式。

不帶參數的mixin/***建立基本的mixin**/@mixinlarge-text{font:{family:Arial;size:20px;weight:bold;}color:#ff0000;}.page-title{@includelarge-text;padding:4px;margin-top:10px;}帶有參數的mixin/***建立帶參數和預設值的mixin**/@mixinsexy-border($color,$width:1px){border:{color:$color;width:$width;style:dashed;}}p{@includesexy-border(blue);}h1{@includesexy-border(blue,2px);}@content在使用@mixin時搭配@content可以把@include中的內容載入，這很適合用在RWD的media-query使用：//SCSS@mixinapply-to-ipad{@mediascreenand(max-width:768px){@content;}}@mixinapply-to-iphone{@mediascreenand(max-width:375px){@content;}}@includeapply-to-iphone{#logo{background-image:url(/logo.gif);}}@includeapply-to-ipad{#logo{background-image:url(/logo2x.gif);}}編譯後：@mediascreenand(max-width:375px){#logo{background-image:url(/logo.gif);}}@mediascreenand(max-width:768px){#logo{background-image:url(/logo2x.gif);}}Extend/Inheritancekeywords:@extend,placeholderclassextendplaceholderclass（%）//scss%center-center{display:flex;align-items:center;justify-content:center;}.icon{@extend%center-center;color:white;}.banner{@extend%center-center;width:100%;}編譯出來的結果會是這樣：%center-center的內容並不會被編譯出來，因此在程式碼中並不能直接使用.center-center這個樣式.banner,.icon{display:flex;align-items:center;justify-content:center;}.icon{color:white;}.banner{width:100%;}extend另一個class除了使用placeholderclass之外，也透過@extend直接繼承另一個class內的樣式：//scss.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{@extend.message;border-color:green;}.error{@extend.message;border-color:red;}編譯後的CSS會是這樣：在程式碼中可以直接使用.message這個class：/*CSS*/.message,.success,.error{border:1pxsolid#ccc;padding:10px;color:#333;}.success{border-color:green;}.error{border-color:red;}嵌套（nested）keywords:&使用關鍵字&來表示父層元素：//SCSS//意思是.nav:hover{...}.nav{&:hover{color:#ccc;}}NestedProperties在CSS中許多的屬性都帶有相同的"namespaces"，例如font-family,font-size,font-weight；在SASS中則提供了可簡便的寫法，你只需要寫一次namespace即可：//SCSS.foo{font:{family:fantasy;size:30em;weight:bold;}}SASS會自動編譯成：/*CSS*/.foo{font-family:fantasy;font-size:30em;font-weight:bold;}註解（Comments）keywords:/*...*/,//...在SASS中提供了兩種註解的方式，一種是多行註解/*...*/，另一種是單行註解//...，在編譯成CSS檔後，多行註解會被保留但單行註解會被移除。

Directives和Functions常用darken(#ccc,12);lighten(#ccc,12);adjust-hue(#F05941,20%);SASS::Script::Functions@SASSDocumentation@root透過@root可以把原本被牽套在內的樣式拉到最外層：@root@SassLang@mixinapply-to-webp($child){@at-roothtml.webp#{$child}{@content;}}@mixinapply-to-no-webp($child){@at-roothtml.no-webp#{$child}{@content;}}.block-reviews{//透過&可以選到當前的CSS選擇器@includeapply-to-webp(&){background-image:url('~images/background/coffee_shop.webp');}//透過&可以選到當前的CSS選擇器@includeapply-to-no-webp(&){background-image:url('~images/background/coffee_shop.png');}}//編譯出來後html.webp.block-reviews{background-image:url('~images/background/coffee_shop.webp');}html.no-webp.block-reviews{background-image:url('~images/background/coffee_shop.png');}@eachkeywords:@each$varin,@each$var1,$var2,...in//SCSS//withonevariableinlist@each$animalinpuma,sea-slug,egret,salamander{.#{$animal}-icon{background-image:url('/images/#{$animal}.png');}}//withmultiplevariablesinlist@each$animal,$color,$cursorin(puma,black,default),(sea-slug,blue,pointer),(egret,white,move){.#{$animal}-icon{background-image:url('/images/#{$animal}.png');border:2pxsolid$color;cursor:$cursor;}}//SCSS//withmultiplevariablesinmap@each$header,$sizein(h1:2em,h2:1.5em,h3:1.2em){#{$header}{font-size:$size;}}map_merge透過map_merge($map1,$map2)可以用來合併兩個map：#map_merge($map1,$map2)範例：map-merge(("foo":1),("bar":2))=>("foo":1,"bar":2)map-merge(("foo":1,"bar":2),("bar":3))=>("foo":1,"bar":3)map_get透過map_get可以取得map中某個key相對應的value：map-get($map,$key)//Returnsthevalueinamapassociatedwithagivenkey.map-get(("foo":1,"bar":2),"foo")=>1map-get(("foo":1,"bar":2),"bar")=>2參考資料SASS/SCSS簡明入門教學@TechBridgeSASSGuide@SASSPrevious[CSS]ratingstarNext[CSS]滑鼠選軸滾動scroll目錄資料型態（DataTypes）StringInterpolationListsMaps建立變數（variable）全域變數（!global）預設變數（!default）建立函式（functiondirective)Partialsmixins不帶參數的mixin帶有參數的mixin@contentExtend/Inheritanceextendplaceholderclass（%）extend另一個class嵌套（nested）NestedProperties註解（Comments）Directives和Functions常用@root@eachmap_mergemap_get參考資料