SCSS/CSS 學習筆記

文章推薦指數: 80 %
投票人數:10人

Sass/Scss運作. 早期Sass底層是以Ruby語言來撰寫,因此要使用Sass需要有Ruby環境,但官方已經於2019/03 ...       Published LinkedwithGitHub Like6 Bookmark Subscribe #SCSS/CSS學習筆記 ######tags:`OKR``SCSS` #####2020/05/24(Update:2020/06/23) ##網站資源 [SCSS官方網站](https://sass-lang.com/) [SCSS官方網站-中文](https://sass.bootcss.com/) ##Sass/Scss運作 早期Sass底層是以Ruby語言來撰寫,因此要使用Sass需要有Ruby環境,但官方已經於2019/03/26表示不再維護RubySass!現階段比較主流的是DartSass及LibSass,DartSass可讓Sass被編譯到JavaScript庫中,而LibSass最常見的就是因應Node.js而推出的Node-sass,目前我們正在使用的則是LibSass。

##Scss與Sass差異 ###CSS寫法 ``` .menu{..} .menuul{..} .menuli{..} .menua{..} ``` ###SCSS寫法 目前公司也是採用SCSS,優點如下: -相關教學可參考SCSS官方網站 -因為撰寫風格跟CSS很像,巢狀式架構可把區塊群組化,但要記得階層性建議不要超過3~4層內會比較好,以避免影響網頁渲染效能。

還有層次結構變多的,反而會讓CSS變的更不彈性,反而不好維護。

-可以兼容CSS,應用到比CSS更強大的變數功能。

``` .menu{..} .menuul{..} .menuli{..} .menua{..} ``` ###SASS寫法 可少寫括號與分號,但若資料量越大後,自己閱讀性不太容易判別錯誤,目前也不太習慣使用這種寫法 ``` .menu .. ul .. li .. a .. ``` ##SCSS引用管理 -SCSS的好處是可以讓專案各頁功能所需要的樣式群組化,不用通通擠在同一支CSS底下去撰寫,可以寫入很多支的SCSS,藉由引用(import)來彙整編譯成一支CSS。

-參考學習[sass-7+1結構](https://gist.github.com/rveitch/84cea9650092119527bc) ###模組化管理 依專案所需規劃可建立一支專門引用SCSS的管理頁,這樣可以很清楚知道專案有引用那些SCSS 規劃檔案的結構 ```sass (有底線代表不會被編譯成一支檔,合併使用) _variable.scss//專門放相關變數 _mixin.scss//專門放相關mixin函式 _mixinRwd.scss//rwdmedia _base.scss//全域設定SCSS _index.scss//專案頁面SCSS ``` 例如建立一支main.scss 依據上方的結構,這頁專門import上述的scss==>最後編譯成main.css 引用格式如下: ```sass @import"variable"; @import"mixin"; @import"mixinRwd"; @import"base"; //你也可以建立分類的資料夾 @import"/page/index"; @import"abstracts/variables","abstracts/functions","abstracts/mixins"; ``` 也可以導入CSS文件 ImportswheretheURLendswith.css. ImportswheretheURLbeginshttp://orhttps://. ImportswheretheURLiswrittenasaurl(). ```sass @import"theme.css"; @import"http://fonts.googleapis.com/css?family=Droid+Sans"; @importurl(theme); ``` ##SCSS使用 ###支援類別(ValueTypes) -Numbers:可能有也可能沒有單位,例如12或100px。

-Strings:可以帶或不帶引號,例如"HelveticaNeue"或bold。

-Colors:可以通過其十六進制表示形式或名稱(如#c6538c或)來引用,也可以blue從函數(如rgb(107,113,127)或)返回hsl(210,100%,20%)。

-Listsofvalues:可以由空格或逗號並且其可以被包含在方括號或沒有括號可言,等進行分離1.5em1em02em,Helvetica,Arial,sans-serif或[col1-start]。

-boolean:true和false。

-null:預設先給空值。

-Maps:將值與鍵相關聯的地圖,例如("background":red,"foreground":pink) ###註解功能 有兩種註解方式: -使用「//」兩個斜線來備註內容,而這些內容不會被SCSS編譯出來,只有自己才會看得到。

-若是想要被顯示出來,則使用「/*標註文字內容*/」 ###文檔註解功能 在@mixin中我們可以增加各種功能詳細描述,可參考`project_template`公司公版,裡面正在慢慢擴充一些常用的@mixin,以便共享於各專案使用。

使用「///」符號來註解,更多的註解用途可參考[SassDoc](http://sassdoc.com/annotations/) ```sass @example描述功能名稱,實際應用在什麼地方 @param是用來記錄@mixin或function的參數 ///@exampletab分頁樣式-4種樣式 ///@param{String}$tab-type參數請填tab名稱,預設為'underLineTab' ///@param{Size}$line_Height參數請填tab底線高度,預設為'3px' ///@param{Color}$line_Color參數請填底線顏色 ``` ###變數功能Variable -客製變數設定,變數名稱前面記得都要加`$`符號 -相同的變數名稱,擺在後面的會蓋掉前面的。

-變數名稱,可以使用「-」「_」,官方提到$font-size和&font_size都會引用相同的變數,請二選一。

-將變數放到相同需要對應的SCSS裡面,CSS編譯結果會自動顯示出來 ####基本變數寫法 ```sass //變數設定 $text-color:#3F51B5; $font-xl:20px; //將變數放置對應地方 .abc{ font-size:$font-xl; background:$text-color; border:1pxsolid$text-color; color:red; } ``` 編譯結果如下 ```sass .abc{ font-size:20px; background:#3F51B5; border:1pxsolid#3F51B5; color:red } ``` ###進行數值運算calc() -可以進行加減乘除的運算,也可能定位。

-必須注意在使用+和-的時候,在前後一定要加上空白,不然會被誤為是給了個負值。

*和/可以不用加,但為了格式統一方便和閱讀建議還是加一下。

-要注意若是加上其它變數一起計算,要記得變數因為是字串,所以要記得要上#{變數名稱} ```sass /*加減乘除運算*/ width:calc(100%-50px); /*定位*/ top:calc(50%-1px); /*變數計算,記得加上字串辨識*/ line-height:calc(#{$select-height}-15px); ``` ###選擇器selector應用組合 符號可以放在第一層,也可以放第二層,或是在兩者的之間 ```sass ul>{ li{ list-style-type:none; } } h2{ +p{ border-top:1pxsolidgray; } } p{ ~{ span{ opacity:0.8; } } } ``` -星號*可以同時被用於子對象選擇器中 ```sass #container*{ border:1pxsolidblack; } ``` -X+Y相鄰兄弟選擇器 選擇後面同層的第一個元素class賦予狀態 ```sass /*h2相鄰的兄弟p,增加border-top灰線*/ h2{ +p{ border-top:1pxsolidgray; } } ``` -X~Y相鄰兄弟選擇器 選擇後面同層的所有相同class賦予狀態 ```sass /*h2相鄰的所有兄弟p,增加border-top灰線*/ p{ ~{ span{ opacity:0.8; } } } ``` -&替代符號 ```sass p{ &:hover{} .active&{} :not(&){} } ``` ```sass /*編譯結果*/ p:hover{} .activep{} :not(p){}//選擇所有不是p的元素,[補充]:not它的作用是防止特定的元素被選中 ``` &符號搭配BEM結構撰寫時非常好用,而無須多次撰寫較長的class,看以下範例就可以得知,目前公司專案也是儘量採BEM結構模式撰寫。

```sass .accordion{ /*...*/ &__copy{ /*...*/ &--open{ /*...*/ } } } ``` ```sass /*編譯結果*/ .accordion{/*...*/} .accordion__copy{/*...*/} .accordion__copy--open{/*...*/} ``` -#{}插入值 通常會應用在放入className,或是css名稱,css名稱可拿來應用在有多種屬性值時,例如left/right/top/bottom,範例如下 ```sass @mixinxxx($className,$top-or-bottom,$left-or-right){ .icon-#{$className}{ #{$top-or-bottom}:0; #{$left-or-right}:0; } } @includexxx('mail',top,right) ``` ```sass /*編譯結果*/ .icon-mail{ top:0; right:0; } ``` -CSS-nth-child選擇器 ```sass /*first-child代表第一個*/ li:first-child{ border:0; border-top-left-radius:$border-radius; border-top-right-radius:$border-radius; } /*last-child代表最後一個*/ li:last-child{ border:0; border-bottom-left-radius:$border-radius; border-bottom-right-radius:$border-radius; } /*nth-child(n)代表指定選擇第幾個,從(1)開始*/ li:nth-child(1){ border:0; border-bottom-left-radius:$border-radius; border-bottom-right-radius:$border-radius; } /*nth-child(odd)奇數*/ p:nth-child(odd){ background:red; } /*nth-child(even)偶數*/ p:nth-child(even){ background:blue; } /*:nth-child(an+b)若是使用計算方式,n則可從(0)開始*/ tr:nth-child(3n+1){ background-color:#69C; } ``` -unique-id()自動產出名稱 官方有這個功能,會自動產生9個字串的字母數字,例如"uat4r38ew",雖然目前未曾實際應用於專案上,但有篇文章提到可以使用在CSSCache上感覺滿適合的,可參考下方連結:
[SCSSUniqueIdforCacheBustingyourCSS](https://medium.com/@defrian.yarfi/sass-unique-id-for-cache-busting-your-css-fbb58d126d2d) 所謂CSSCache緩衝是以前有曾經遇過的狀態,就是SCSS內裡面可能會引用CSS/圖片等,但有可能發生有檔案名稱一樣,但有新版本資料,卻發生明明已更新資料,但網頁上看到的是舊資料問題,這時候就可以透過添加版本參數來更新。

```sass /*上方文章分享-圖片緩衝*/ $ver:unique_id(); @mixinimageCacheBust($url){ background-image:#{'url("'}#{$url}#{'?v='}#{$ver}#{'")'}; } .sprite{ @includeimageCacheBust('asset/images/logo.png'); } ``` ```sass /*編譯結果*/ .sprite{ background-image:url('asset/images/logo.png?v=u95ab40e0'); } ``` ###SassMap變數組合應用 Sassmap是類似json的一種變數,可以使用SassMap來定義基本的元件變數,與json最大的差異是使用`()`取代`{}`。

三種function ```sass //列出指定map的key map-keys($map) //列出指定map的value map-values($map) //判別布林值trueorfalse map-has-key($map,$key) ``` ```sass $color:( primary:#cccccc; secondary:#000000; ) /*編譯結果*/ //以下只是展示範例回傳的結果,僅供參考 map-keys($color,primary); .test{ color:primary } map-values($color,#cccccc); .test{ color:#cccccc } map-has-key($color,primary); .test{ color:true } ``` #####範例一顏色組合 ```sass /*variables組合*/ //"$key":$value //可以依據不同的元件用一個群組,方便辨識,例如border.button.text.link..等等 $primary-color:#098081; $primary2-color:#c4dbd5; $primary3-color:#6e6d6d; //可以在依網站的顏色去自訂名稱,方便記憶 $border-set:( "border-primary1":$primary-color, "border-primary2":$primary2-color, "border-primary3":$primary3-color ); ``` ```sass /*variables使用*/ //使用map-get()取值 .button{ color:map-get($border-set,border-primary3) } ``` #####範例二按鈕組合 上面是只有單純顏色的組合,若像是按鈕這種會包含多樣式種類的,可以寫成以下組合 ```sass /*variables組合*/ //定義按鈕的不同狀態設定 $btn-config:( default:( class:'default', color:#333, bg:#fff, border-color:#ccc ), primary:( class:'primary', color:#fff, bg:#009AFF, border-color:#009AFF ), danger:( class:'danger', color:#fff, bg:#D84315, border-color:#009AFF ) ); ``` 然後賦予基本button的結構+搭配mixin()來完成多組按鈕組合,詳細可參考分享網站[透過SassMap製作多個樣式](https://wcc723.github.io/css/2016/12/25/sass-map/) ```sass /*首先刻出一個按鈕基本結構*/ .btn{ /*......*/ &:hover,&:focus{ color:#333; background-color:#e6e6e6; } } /*@mixin*/ //通常按鈕結構最常變更的是背景顏色、外框顏色、還有文字顏色 @mixinbutton-set($color,$background,$border-color){ color:$color; background-color:$background; border-color:$border-color; &:hover,&:focus,&:active{ color:$color; background-color:darken($background,5%); border-color:darken($border-color,5%); } } ``` ```sass /*@each+map-get()+@include*/ //$key,$value @each$keyname,$valuein$btn-config{ $class:map-get($value,class); $color:map-get($value,color); $bg:map-get($value,bg); $border-color:map-get($value,border-color); .btn-#{$class}{ @includebutton-set($color,$background,$border-color) } } ``` ```htmlmixed /*html結構*/ //這樣就可以寫出類似像bootstrapbtn不同class的btn 這是一個按鈕 這是一個按鈕 這是一個按鈕 ``` ###好用的SCSS組合應用 ####mixin相類似參數寫法 若CSS有相類似的語法,範例如下 ```sass /*原本這樣寫*/ @mixinbanner($image,$bg-size:cover,$bg-height:500px,$bg-position:50%50%){ backgorund-image:$image; background-repeat:no-repeat; background-size:$bg-size; background-position:$bg-position; max-width:100%; height:$bg-height; } ``` ```sass /*後來這樣寫*/ @mixinbanner($image,$bg-size:cover,$bg-height:500px,$bg-position:50%50%){ max-width:100%; height:$bg-height; background:{ image:$image; repeat:no-repeat; size:$bg-size; position:50%50%; } } ``` ####@mixin+@if布林值判斷 -返回true或false -@elseifor@else ```sass /*mixin建立組合*/ @mixinavatar($size,$circle:false){ width:$size; height:$size; @if$circle{ border-radius:$size/2;//返回true } } .square-av{@includeavatar(100px,$circle:false);} .circle-av{@includeavatar(100px,$circle:true);} ``` ```sass /*編譯結果*/ .square-av{ width:100px; height:100px;//返回false,所以沒有border-radius } .circle-av{ width:100px; height:100px; border-radius:50px;//返回true } ``` 另一種寫法 例如判斷是否需要border-radius(沒有外框為0/有外框就給數值),寫法如下: ```sass /*mixin建立組合*/ @mixinsquare($size,$radius:0){ width:$size; height:$size; @if$radius!=0{ border-radius:$radius;//假如不等於0 } } .text{ @includesquare(100px,$radius:4px); } ``` ```sass /*編譯結果*/ .text{ width:100px; height:100px; border-radius:4px; } ``` ####區塊共用 有時網頁會有很多區塊會共用到不同的背景或圖片樣式,這時候都還要特別幫那個區塊給一個class或是直接將css寫在那個區塊裡,使用mixin()來建立組合,有需要就直接引用到區塊裡 ```sass /*mixin建立組合*/ @mixinsection-background($color){ #{if(&,'&.section-background','.section-background')}{ background-color:$color; color:#000000; } } ``` ```sass /*include使用*/ .sidebar{ @includesection-background(#cccccc); } ``` ```sass /*編譯結果*/ .sidebar.section-background{ background-color:#cccccc; color:#000000; } ``` ####多類型@mixin合併+@error報錯提示 舉例來說,若有多種類型的tab分頁style,原本一種tab就寫一支@minxin,那要如何使用@mixin來合併,引用時只要判斷類型輸入即可呢?答案就是使用`@if`,範例說明如下: ```sass /*mixin多類型建立組合*/ //可以在@mixin裡放置預置的變數 //日後若有新的tab種類,即可依序新增下去.. //@error為編譯時若有錯誤會編譯失敗並停止,顯示錯誤訊息提醒,@warn也是一種錯誤提醒,但sass雖會報錯,但還是會繼續編譯,所以反而使用@error會更好 @mixinnavTab( $tab-type:underLineTab//預設的tab種類 $selector:"*",//若父層底下有子層的內容,可以使用*來代表 ){ @if$tab-type==underLineTab{ /*這裡放第一種tab的css*/ }@elseif$tab-type==borderTab{ /*這裡放第二種tab的css*/ }@elseif$tab-type==squareTab{ /*這裡放第三種tab的css*/ }@elseif$tab-type==nogutterTab{ /*這裡放第四種tab的css*/ }@else{ @error"請填寫$tab-type正確參數:underLineTab/borderTab/squareTab/nogutterTab"; } } ``` ####@mixin+@content 網路上提到常見斷點參考 iPad-768px iPad以下-767px iPhone6Plus-414px(視專案族群) iPhone6-375px(視專案族群) iPhone5、SE-320px 使用在rwd範例,以下參考bootstrap斷點設計 ```sass //rwdbreakpoint設定各種斷點,也可以在陸續新增自訂的尺寸 $col-xl:1200px; $col-lg:992px; $col-md:768px; $col-sm:576px; @mixinrwd($col-xl){ @media(max-width:$col-xl){ @content; } } @mixinrwd($col-lg){ @media(max-width:$col-lg){ @content; } } @mixinrwd($col-md){ @media(max-width:$col-md){ @content; } } @mixinrwd($col-sm){ @media(max-width:$col-sm){ @content; } } ``` ```sass .circle-image2{ @includecircle(blue,$white,$size); //一樣使用@include引用 @includerwd($col-xl){ width:$size/2; height:$size/2; line-height:$size/2; font-size:15px; } @includerwd($col-sm){ width:$size/2; height:$size/2; line-height:$size/2; font-size:13px; } } ``` ```sass //編譯結果 .circle-image2{ background:blue; border-radius:99%; width:500px; height:500px; line-height:500px; font-size:100px; color:#fff; text-align:center; } @media(max-width:1200px){ .circle-image2{ width:250px; height:250px; line-height:250px; font-size:15px; } } @media(max-width:576px){ .circle-image2{ width:250px; height:250px; line-height:250px; font-size:13px; } } ``` ###@each迴圈 @eachin{...} each迴圈可以設定一個變數群組然後分別套用 ```sass $sizes:40px,50px,80px; @each$sizein$sizes{ .icon-#{$size}{ font-size:$size; height:$size; width:$size; } } ``` ```sass /*編譯結果*/ .icon-40px{ font-size:40px; height:40px; width:40px; } .icon-50px{ font-size:50px; height:50px; width:50px; } .icon-80px{ font-size:80px; height:80px; width:80px; } ``` 替換背景顏色方法範例 ```htmlmixed ``` ```sass //設定顏色群組 //"$key":$value, $colorset:( "primary":#ccc, "danger":#dd4444, "secondary":#3e5bbb ); //scss變數寫法:#{$key} @each$key,$valuein$colorset{ .box-#{$key}{ background:$value; } } ``` 顯示效果如下 ![](https://i.imgur.com/VDlBcXp.png) ###@for迴圈 透過scss可以搭配@for迴圈來使用連續變數的功能,例如以下顏色漸變範例 ```htmlmixed ``` ```sass //box基本屬性 .box{ height:150px; width:150px; float:left; background:#ccc; } //box1~box5給予連續漸變顏色效果,設定$i(1~5)數值為變數 //@for迴圏from-through(跑1到5數值);from-to(跑1到4數值),兩者須注意有不同 //scss變數寫法:#{$i} @for$ifrom1through5{ .box#{$i}{ background:darken(white,$i*10%); } } ``` 顯示效果如下 ![](https://i.imgur.com/jCP3W0A.png) ###@debug偵測錯誤 跟console.log一樣,幫你查看打印出來的值是否正常。

以下為一個簡單的例子,實際專案下執行webpack編譯時就會看到訊息。

但另外有發現VscodeLiveSass使用@debug不會出現,看了一下它的說明與更新內容好像本來就沒有進一步支援。

```sass $font-sizes:10px+20px; $style:( color:#bdc3c7 ); .container{ @debug$style; @debug$font-sizes; } ``` ```sass /*打印結果,會出現類似畫面*/ Line7CSS:(color:#bdc3c7) Line8CSS:30px ``` ###@at-root跳脫子層 可以將一個或多個樣式規式跳出子層,而不是嵌在父層selector裡面,範例如下: ```sass .parent{ ... @at-root.child{....} } ``` ```sass /*編譯結果*/ .parent{...} .child{...} ``` ```sass .parent{ ... .step-child{...} @at-root{ .child1{...} .child2{...} } } ``` ```sass /*編譯結果*/ .parent{...} .parent.step-child{...} .child1{...} .child2{...} ``` ###@use與@forward 分享一篇看到寫的很清楚的文章,文章提到[詳解Sass新特性-模塊](https://blog.csdn.net/qq_36380426/article/details/103502336)的內容。

內容提到sass團隊正在推行sass模塊化機制,建議大家使用@use.@forward,但目前僅DartSass1.23.0完全支援這兩種特性,加上[官網@import說明](https://sass.bootcss.com/documentation/at-rules/import)上也有提到Sass團隊不鼓勵繼續使用@import規則,預計在未來幾年會逐步淘汰它,雖然還不是現在,但或許在淘汰前可能要慢慢去研究@use+@forward。

文件中提到@use與@import最主要的差異(待須實際試用): @import:假如不同的頁面引用了相同的scss,樣式可能會被重覆加載,導致重複代碼 @use:不管使用了多少次樣式表,都只會引用和執行一次 6 × Signin Email Password Forgotpassword or Byclickingbelow,youagreetoourtermsofservice. SigninviaFacebook SigninviaTwitter SigninviaGitHub SigninviaDropbox SigninviaGoogle NewtoHackMD?Signup



請為這篇文章評分?