Day05-讓CSS不再難讀！SCSS

在開始介紹SCSS 之前先來介紹一下SASS，在前一篇的CSS 選擇器中相信大家寫久之後會有一個感想，每次都要寫一大串的選擇器真的是非常麻煩，有時候寫太快還會不小心寫錯 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinAndy的技術分享blogDay05-讓CSS不再難讀！SCSS什麼是SCSS在開始介紹SCSS之前先來介紹一下SASS，在前一篇的CSS選擇器中相信大家寫久之後會有一個感想，每次都要寫一大串的選擇器真的是非常麻煩，有時候寫太快還會不小心寫錯，於是SASS就被創造出來了，而SASS的寫法有分為舊版的縮排語法以及新的SCSS，由於SCSS為CSS的超集合，此一特性不但讓SCSS能兼容全部的CSS語法也讓大多數的人都選擇寫SCSS，而且Codepen也有支援SCSS的寫法喔！只要在設定的地方選擇CSSPreprocessor就可以了。

範例在開始介紹下方的範例之前，筆者提供一個非常適合練習SCSS的網站，大家不妨可以到這個網站練習看看SCSS的語法。

變數與運算變數最大的好處在於只要改變變數的值就可以直接改變全部有用到此變數的內容，最常被拿來當變數的就是顏色了，有了變數宣告就不用一直複製顏色代碼了，而且也不用擔心未來修改顏色時可能會忘記修改到某些元素的顏色。

變數的宣告相當簡單，只要加個$而:後方接上變數的值即可，寫法跟CSS很像，如下圖。

宣告完之後只要在有需要引用此變數的地方寫上此變數的名稱即可，如下圖。

既然都可以宣告變數了，當然也可以進行變數的四則運算，如下圖。

巢狀結構(Nesting)寫SCSS最厲害的地方就在於他的巢狀結構了，有了巢狀結構就不用花一堆心力寫一堆選擇器了，大家不妨可以猜猜看以下程式碼轉換成CSS後會長成什麼樣式，這邊附上轉換後的解答。

.container{display:block;.box{width:50px;height:50px;}+.container2{display:inline-block;}&:hover{color:red;cursor:pointer;}}可以發現巢狀結構的解析就是一層一層往下累加選擇器的class，如果沒有指定選擇器則預設為空白，而&:這個符號就是給偽類別以及偽元素使用，這種寫法讓選擇器不再那麼麻煩而且也變得直觀許多。

匯入其他SCSS檔案(@import)SCSS的檔案是可以互相被引用的，只要寫上@import'file.scss'即可，引用的好處在於假如我有一個base.scss裡面就是定義一些基本的style，之後在寫其他的SCSS時就不用重新在寫一次基本的樣式。

混合(@mixin)混合就如其名，就是要讓一個自訂的樣式可以融入指定的元素，概念有點像是變數但不一樣的是混合是要寫完整的樣式而非只有單純的值而已，也因此@mixin的樣式在轉換成CSS後是不會存在的，如果要引用混合所宣告的組合則需使用@include，通常用於大量且基本的樣式以減少開發時的CSS程式碼，@mixin寫法如下。

@mixinblock{display:block;width:100px;height:100px;}.container{@includeblock;}轉換的結果可以參考這裡。

延展(@extend)延展的概念跟混合可以說是一模一樣，不一樣的地方在於@extend只能用在已存在的class，這邊用選擇器的觀念去思考的話可以把@extend想成逗號這個選擇器，所以轉換後樣式不但都會被保留而且都會共用一樣的樣式，這點就跟@mixin有著非常大的差別了，@extend的寫法如下。

.container{display:block;width:100px;height:100px;}.container2{@extend.container;background-color:blue;}轉換後的結果可以參考這裡。

函式(@function)SCSS也可以寫函式來進行簡單的運算，而且也具備一些基本的程式語法像是：@if、@return、@for等等，而SCSS也內建了許多函式可以使用，詳細的函式庫可以參考這個網站，@function的寫法如下。

@functioncalc-margin($value){@return$value*2;}.container{margin:calc-margin(5);}轉換後的結果可以參考這裡。

總結今天的範例就來把昨天的範例改寫成SCSS的寫法吧！寫習慣SCSS後真的會回不去原本的CSS寫法，巢狀結構不但讓CSS的可讀性變更高同時也讓選擇器不再過於冗長，未來在寫CSS時不妨利用SCSS來增加開發速度吧！--MorefromAndy的技術分享blog嗨嗨我是Andy，用嘴巴工作的工程師😂，喜歡學習不同領域的內容，專長為網頁開發，歡迎大家跟我聊技術～ReadmorefromAndy的技術分享blogAboutHelpTermsPrivacyGettheMediumappGetstartedAndyChen381Followers嗨嗨我是Andy，用嘴巴工作的工程師😂，喜歡學習不同領域的內容，專長為網頁開發，歡迎大家跟我聊技術～FollowMorefromMediumLeobaseballStateoftheA’s:SiftingThroughthePainScottFiedlerinI’mNotAHeadlineGuy…TheBaltimoreBeatdown…MatthewScherberTheRedSoxStink.Ohwait….SoniaVerChromatics:DoubleExposure:AnIntimateSetHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable