# Sass
管理CSS之用途。 處理解決的問題
## Sass原理
scss檔案透過編譯方式轉成css檔案，程式碼都寫在scss裡面
- sass是程式語言，有兩種寫法
1. SCSS 也可以純粹的css
2. Sass 不寫大刮號 =={}== 不寫分號 ==;==
### Sass 與 SCSS的不同之處
- Sass格式
1. 冒號後面一定要有一個空白 程式碼單行結束不需要寫分號
2. 兩個空白或一個tab鍵為一個階層的區別

menu 
    li
        color: red
        line-height: 2

[Sass格式程式碼示範及編譯結果](https://codepen.io/ztion/pen/ZEqgBej)
- SCSS格式 以括號為階層的區別

menu{
    li{
    color: red;
    line-height: 2;
    }
}

[SCSS格式程式碼示範及編譯結果](https://codepen.io/ztion/pen/dygxORP)
### Sass編譯方式
1. 軟體編譯 (例如:prepros)
2. gulp webpack 前端任務/打包工具 (需要了解到JavaScript)
3. 編輯器內建的插件 (VScode延伸套件「Live Sass Compiler」)

[Sass編譯環境設定](https://ithelp.ithome.com.tw/articles/10273399#%E5%8F%83%E6%95%B8%E8%A7%A3%E6%9E%90)

### &連結符號 教學
連結與上一層的作用

    .header {
        height: 500px;
        .logo {
            background: #000;
            a {
                color: #000;
                &:hover {
                    color: pink;
                }
                &:active {
                    text-decoration: none;
                }
            }
        }
    }

[&連結符號示範及編譯結果](https://codepen.io/ztion/pen/RweXoZa?editors=1100)
## SCSS - Sass變數(variables)常用語法
範例

    //SCSS 程式碼
    //先宣告變數
    $link-color: #ff0000;
    //後面導入變數
    .header a {
        width: 500px;
        color: $link-color;
    }

編譯順序是從上到下的，變數要在檔案前面宣告，在編譯時才找到已宣告的變數

[變數運用示範及編譯結果](https://codepen.io/ztion/pen/QWZeGqa)
### 註解方式
- ==//== 不會編譯到css檔案的註解
- ==/**/== 會編譯到css檔案的註解

### 變數格式

- 格式
- 數字：10、1px、3em
- 字串：'test'、"../image/big/"
- 顏色：red、#000000、rgb(255,255,255,0.9)
- 布林：true、flase
- 空值：null

- 支援運算(1em+1em、6px*2)
#### 數字運算範例

    // SCSS格式程式碼
    $link-color: #ff0000;
    $font-m: 16px-3px;
    $font-l: $font-m * 1.2;
    
    .header a {
        font-size: $font-m;
        width: 500px;
        color: $link-color;
    }
    .header h1 {
        font-size: $font-l;
    }

[數字運算示範及編譯結果](https://codepen.io/ztion/pen/eYPqByQ?editors=1100)
#### 字串管理範例
文字內容請用單引號或雙引號包起來

    //SCSS格式程式碼
    $link-color: #ff0000;
    $font-l: 18px;
    $font-family-base: "Helvetica,Arial,sans-serif";
    $font-family-title: "monospace";
    
    body {
        font-family: $font-family-base;
    }
    .header {
        a {
            width: 500px;
            color: $link-color;
        }
        h1 {
            font-size: $font-l;
        }
    }
    .content {
        a {
            color: $link-color;
        }
        h2 {
            font-family: $font-family-title;
        }
    }

[字串示範及編譯結果](https://codepen.io/ztion/pen/RweXoyG?editors=1100)
#### 顏色範例

    // SCSS規格程式碼
    $base-color: #008000
    
    .box {
        width: 100px;
        height: 100px;
        margin: 20px;
    }
    .box1 {
        background: $base-color;
    }
    .box2 {
        background: darken($base-color,20%)
    }
    .box3 {
        background: lighten($base-color,30%)
    }

[顏色示範及編譯結果](https://codepen.io/ztion/pen/bGmXgWm?editors=1100)

## 從基礎到進階的變數管理技巧

    $primary: $blue;
    //主色系設定

## @import(匯入)
可將SCSS檔案彙整成一隻CSS檔

[SCSS 最新版本引入檔案方式](/oousfdvzQTOd9erCbb4saw)

### import+變數雙向管理

下底線SCSS檔案名稱(ex:==_variable.scss==)
下底線名命的scss檔案為偽檔案==不能單獨被編譯成css檔案==，需要被其他檔案引入使用。
在主要的SCSS檔案內導入該檔案

    // _variable.scss程式碼內容
    $link-color: #ff0000;
    $text-color: #5eff00;
    $font-l: 18px;
    $font-family-base: "Helvetica,Arial,sans-serif";
    $font-family-tile: "monispace";

    // all.scss程式碼內容
    @import "_variable.scss"
    
    body{
        family-font-base: $font-family-base;
        color: $link-color;
    }
    
    .header {
        a {
            width: 500px;
            color: $link-color;
        }
        h1 {
            font-size: $font-l;
        }
    }
    .content {
        a {
            color: $link-color;
        }
        h2 {
        font-family: $font-family-base;
        }
    }
    .footer {
        a {
            color: $link-color;
        }
    }

    /* 編譯後css程式碼內容 */
    body {
        font-family: "Helvetica,Arial,sans-serif";
        color: #5eff00;
    }

    .header a {
        width: 500px;
        color: #ff0000;
    }
    .header h1 {
        font-size: 18px;
    }
    .content a {
        color: #ff0000;
    }
    .content h2 {
        font-family: "monospace";
    }
    .footer a {
        color: #ff0000;
    }

all.scss多為引入其他scss檔案的總合檔案
## @Mixin
能夠定義一個包含一組css屬性和值的區塊，然後在需要的地方引用該區塊，從而避免在多個地方重複輸入相同的css，可以獨立一個==mixin==的scss檔案。

/* 設定mixin */
@mixin button-style {
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
}
/* 引用mixin設定，使用@include引入 */
.button {
    @include button-style;
}

.another-button {
    @include button-style;
    background-color: #ff6347;
}

## RWD使用@mixin設定方式
將需設定的@media裝置的設定，統一設定@mixin，使用時，只需 ==@include==， ==@mixin==設定，一定要在@mixin的巢狀中，寫 ==@include==，才可以在引入後，再寫樣式設定。

    /* 平板設定 */
@mixin table {
    @media (max-width: 768px){
        @content
    }
};
    /* 手機設定 */
@mixin mobile {
    @media (max-width: 375px){
        @content
    }
};
    /* @content裡面為自己撰寫的CSS樣式 */

    /* 實際範例 */
@mixin pad {
    @media (max-width: 768px) {
        @content
    }
}
@mixin iphone5 {
    @media (max-width: 320px) {
        @content
    }
}

.header {
    width: 100px;
    heigth: 100px;
    @include pad(){
        height: auto;
    }
    @include iphone5(){
        height: 30px;
    }
    a {
        color: #000;
        @include iphone5(){
            display: none;
        }
    }
}

    /* 實際範例編譯完成的css檔案 */
.header {
    width: 100px;
    heigth: 100px;
    @media (max-width: 768px) {
        .header {
            heigth: auto;
        }
    }
}
    @media (max-width: 320px) {
        .header {
            height: 30px;
        }
    }
.header a {
    color: #000;
    @media (max-width: 320px)
        .header a {
            display: none;
        }
}

## 繼承 @extend 可全站共用
將相同scss的樣式設定，共用一份樣式設定在編譯後的css集合在一起呈現。
在撰寫的時候，建議放在scss檔案的上方，避免被覆蓋。
==百分比(%)開頭專門被繼承的樣式==，如使用 ==點(.)== 開頭則不會繼承樣式

 // 使用百分比(%)開頭撰寫方式，相同樣式會統一集合在一起呈現
%aButton {
    display: inline-block;
    text-direction: none;
}

a {
    @extend %aButton;
    width: 100%;
    height: 20px;
    line-height: 20px;
}

[Codepen](https://codepen.io/ztion/pen/GRwVpxK?editors=1100)

.button {
    display: inline-block;
    text-direction: none;
}
.button-red {
    background-color: red;
}
a {
    @extend .button;
    @extend .button-red;
    width: 100px;
    heigth: 20px;
    line-height: 20px;
}
a {
    @extend .button-red;
    width: 100px;
    heigth: 20px;
    line-height: 20px;
}

## @fuction 計算變數

- 建立函式與返回結果
- 添加並傳入其餘參數
- 添加並傳入可選參數
- 添加並傳入關鍵字參數

$baseLineHeight: 10px;

@function line($count: 1) {
    @return $baseLineHeight * $count;
}

.aa {
    padding: line(2);
}
.bb {
    padding: line(1);
}
.cc {
    padding: line(3);
}

[參考資訊](https://awdr74100.github.io/2020-06-01-scss-function-return/)
## CSS Reset (meyerweb與Normalize的差異)

- meyerweb 清空所有瀏覽器的預設樣式

- Normalize 有保留部份的瀏覽器的預設樣式 (bootstrap使用此CSS Reset)

## 整合Reset流程
1. 基本樣式變數
2. reset
3. 自己寫的css
4. 外部引入

[Sass/CSS 模組化設計模式](/DIscniCiTtCSPNJcWC6tNw)

## import設計
1. 變數
2. reset
3. 斷點 grid.scss
4. layout.scss
5. index

## 常見Sass檔案分離規劃
1. 主要Sass檔案(Main Sass Files):
- `_variables.scss`：存儲全局變數，如顏色、字體大小、間距等。
- `_mixins.scss`：定義Mixin，用於生成可重複使用的樣式片段。
- `_functions.scss`：定義函式，用於處理複雜的樣式計算和操作。
- `_base.scss`：包含網站或應用的基本樣式，例如重置、一般的HTML元素樣式等。
- `_layout.scss`：定義佈局相關的樣式，如網格系統、容器大小等。
2. 模組Sass檔案(Module Sass Files)：
- `_header.scss`：==頁面頭部==相關的樣式。
- `_navigation.scss`：==導航菜單==相關的樣式。
- `_sidebar.scss`：==側邊欄==相關的樣式。
- `_button.scss`：==按鈕==樣式。
- `_form.scss`：==表單元素==的樣式。
3. 主題Sass檔案(Thems Sass Files)：
- `_theme-light.scss`：==淺色主題==的樣式。
- `_theme-dark.scss`：==深色主題==的樣式。
- `_theme-color.scss`：定義==主題相關==的顏色變數。
4. 頁面Sass檔案(Page Sass Files)：
- `_home.scss`：==首頁==的特定樣式。
- `_about.scss`：==關於頁面==的特定樣式。
- `_contact.scss`：==聯絡頁面==的特定樣式。
5. 專案特定Sass檔案(Project-specific Sass Files)：
- `_project-specific.scss`：與專案特定元素相關的樣式，例如自定義組件的樣式。

[sass結構化、模組化](https://s103071049.coderbridge.io/2021/07/09/sass-%E7%B5%90%E6%A7%8B%E5%8C%96%E8%88%87%E6%A8%A1%E7%B5%84%E5%8C%96/)
[Sass / SCSS 預處理器-OOCSS、SMACSS、BEM模組化方法](https://awdr74100.github.io/2020-06-19-scss-oocss-smacss-bem/)
[css設計模式系列-Sass 7-1 pattern篇](https://israynotarray.com/css/20200523/116058774/)