---
title: 'SCSS'
disqus: hackmd
---

###### tags: `CSS` `SCSS` `Sass`

SCSS
===

## Table of Contents

[TOC]

## 什麼是SCSS?

Sass是一個將指令碼解析成CSS的手稿語言，即SassScript。Sass包括兩套語法。最開始的語法叫做「縮排語法」，與Haml類似，使用縮排來區分程式碼塊，並且用換行將不同規則分隔開。而較新的語法叫做「SCSS」，使用和CSS一樣的塊語法，即使用大括號將不同的規則分開，使用分號將具體的樣式分開。通常情況下，這兩套語法通過.sass和.scss兩個副檔名區分開。

>[name=維基百科]

主要提供幾個功能，變數(Variable)、巢狀(Nesting)、混用(Mixin)、繼承(Extend)

>題外話：因為原本只寫過CSS，發現用SCSS好像也沒有不適感耶XDD因為跟原本的很像，而且還更方便這樣。

變數(Variable)
---
用$符號表示變數。

# SCSS
$sample-color: #04B;

.article.header {
    color: #FFF;
    background-color: $sample-color;
}

.article p {
    color: $sample-color;
}

# CSS
.article.header {
    color: #FFF;
    background-color: #04B;
}

.article p {
    color: #04B;
}

> 如果有個主題顏色會很好用，全設定好，若想改另個顏色當主題顏色的話，更動那個變數就好!!!不用像以前要往返去更動。

巢狀(Nesting)
---
透過巢狀式的排列，可以清楚知道階層關係。也不用一直重複寫同樣的開頭。

# SCSS
.article {
    .header {
        font-size: 20px;
    }

    p {
        font-size: 12px;
        color: #999;
    }

    a {
        text-decoration: none;
    }
}

# CSS
.article .header {
    font-size: 20px;
}

.article p {
    font-size: 12px;
    color: #999;
}

.arctle a {
    text-decoration: none;
}
    

混用(Mixin)
---
1. 用來混用的CSS
使用@mixin來創建要用來混用的CSS

2. 混用
使用@include來使用@mixin

你可以帶入參數做更動。

# SCSS
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.message {
    @include border-radius(10px);
}

.article-btn {
    @include border-radius(5px);
}

#CSS
.message {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

.article-btn {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}
    

繼承(Extend)
---
若有很多重複的程式碼，就可以使用繼承這個功能來精簡程式碼。

1. 用來繼承的CSS
想保留使用 "." , 不保留在前面加個 "%"

2. 繼承
通過 @extend 來使用

# SCSS
.message {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #000;
}

.message-success {
    @extend .message;
    color: #3c763d;
}

.message-danger {
    @extend .message;
    color: #a94442;
}

# CSS
.message, .message-success, .message-danger {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #000;
}

.message-success {
    color: #3c763d;
}

.message-error {
    color: #a94442;
}

> 這個訊息框，有分原本、成功、失敗的樣式。可以看到成功跟失敗繼承原本並可覆蓋原本的color。若只需要成功跟失敗的樣式，就可以將 .message 改成 %message

> 其他議題
1. 繼承(Extend) VS 混用(Mixin)
https://ithelp.ithome.com.tw/articles/10157149

> 參考資料:
https://www.w3schools.com/sass/
https://icguanyu.github.io/categories/scss/

> 其他相關連結：
https://www.cssportal.com/scss-to-css/
https://medium.com/%E4%BC%81%E9%B5%9D%E4%B9%9F%E6%87%82%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88/vue%E5%B0%88%E6%A1%88%E4%B8%AD%E7%9A%84css%E7%AE%A1%E7%90%86%E7%AD%96%E7%95%A5-%E5%88%A9%E7%94%A8scss%E5%B0%87%E6%A8%A3%E5%BC%8F%E6%A8%A1%E7%B5%84%E5%8C%96-47c1d337c5fd

## Appendix and FAQ

:::info
**Find this document incomplete?** Leave a comment!
:::