# 第四週課程-3(scss教學)
## 整體流程：

原本在app/assets/style裡面的`all.scss` 經過編譯會變成dist/assets/style的`all.css`


## 寫法重點：

- 思考需不需要一定要繼承，還是可以抽離出來(以五層為限)
- 編譯錯誤就沒辦法寫出來，可以在終端機看到除錯問題


- scss支援純css寫法
- scss的響應式就直接寫在同一句下方，不要集中在最後面(比較好管理)

:::spoiler 圖片
:::

- 寫的順序: header>content>footer
- &用法: &代表上層class名稱的縮寫

//scss
.menu a{
    color: red;
    &:hover: green;     &是拿來搭配hover效果使用在本例如同.menu a:hover 但他們是同層的
}

//在css的效果
.menu a{
    color:red ;
}
.menu a:hover{
    color:green;
}

## 變數介紹:

- 能幫你的css(ex顏色.距離.大小)取名字

$primary: #ff0000;   //主色叫做#ff0000
$font-xl: 24px;      //font-xl的大小是24px

.header{
    color: $primary;    //顏色要用主色#ff0000
    font-size: $font-xl;   //大小用$font-xl的大小
}

- 變數有先後順序，要被用到的放前面

//錯誤示範，這樣color抓不到$primary是什麼

.header{
    color: $primary;    //顏色要用主色#ff0000
    font-size: $font-xl;   //大小用$font-xl的大小
}
$primary: #ff0000;   //主色叫做#ff0000
$font-xl: 24px;      //font-xl的大小是24px

- 也可以透過終端機除錯，編譯出錯就不會更新all.css


## scss如何切檔案？ 學長姐scss切檔案案例

- 從原本把scss全部都寫在一起，開始把它分離


- 載入其他scss(假如你寫好`_reset.scss`、`_index.scss`)

@import"_variable.scss"; //也可以縮寫成 @import"variable"
@import"_reset.scss";
@import"_layout.scss";

   
@import"_index.scss";    
 

#### #`_variable.scss`(放變數的scss)

$red: #ff0000;

#### #`_reset.scss`(放cssreset的scss)

直接貼上[cssreset](https://meyerweb.com/eric/tools/css/reset/)

#### #`_layout.scss` (放表頭表尾的scss)

.header{};
.footer{};

#### #`_index.scss` (放首頁的scss)

.title{
	color: $red;     //搭配_variable.scss的$red
}

## **SCSS 結構參考**

@import "variable";// 變數
@import "reset";  // reset.css
@import "layout"; // 共同框架,第一層
@import "index";
@import "page1";

## 問與答：

1.請問寫scss要像css一樣載入在html嗎？
A:不用，他是透過編譯變成css，我們在載入那隻css

2.為什麼我們的檔案要寫成`_main.scss`而不是`main.scss` ?
A:寫成`_main.scss` 就不會被編譯成`main.css` ，只會被拿來整合在`all.scss`裡面，我們再透過`all.scss` 編譯成`all.css` ，方便統一管理(不會有一大堆css檔)。

3.`$primary`會出現在`all.css`裡面嗎？
A:不會，他只是拿來給scss觀看用而已，所以`_variable.scss`、`_mixin.scss`裡面的code就不會顯示在`all.css`裡面

4.scss是可以跨檔案吃到樣式的，但要記得放對順序，所以網頁裡面的變數我們就統一放在`_variable.scss` 裡面再去抓

5.scss檔案擺放順序是否很重要？
A:超級重要！！！！通常`"variable"` 、 `"reset"` 會放`"index"` 前面

6.多頁的class要怎麼命名？一直衝突到
A:在最外面先寫一個div網頁名，就比較不會撞名(如下圖)

## **上一梯大神的code(請跪著看wwww)**

- Vicky 學姐：[GitHub Repo](https://github.com/peggyted0129/HexSchoolTraining/tree/main/week4gulp/scss)、[GitHub Pages](https://peggyted0129.github.io/HexSchoolTraining/week4gulp/index.html)

:::spoiler 分析

    @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap); //兩個字體
    @import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap);
    @import "variable"; //變數
    @import "reset";    //reset

    @import "base";
    @import "mixin";     //組合技
    @import "utils/forms-min"; 
    @import "utils/buttons-min";
    @import "layout";    //可以參考一下表頭表尾怎麼寫
    @import "index";     //可以參考一下首頁怎麼寫
    @import "location";
    @import "faq";

:::

- carrie 學姐：[GitHub Repo](https://github.com/echocarriet/layoutWeek4)、[GitHub Pages](https://echocarriet.github.io/layoutWeek4/index.html)

:::spoiler 分析

    //這個學姊分很細，新手一開始可以先不要分這麼細
    @import "variable";        //變數
    @import "mixins";          //組合技
    @import "css reset";         //reset

    @import "utilities";
    @import "components";

    // Page
    @import "layout";            //表頭表尾
    @import "layout-product";
    @import "index";             //首頁
    @import "ProductOP";
    @import "location";
    @import "blog";
    @import "faq";

:::

- chiayutsai 學姐：[GitHub Repo](https://chiayutsai.github.io/week4_glasses/)、[GitHub Pages](https://github.com/chiayutsai/week4_glasses)

:::spoiler 分析
如果scss太多的話，我們還能拆分資料夾把它做整理(學姊用這招)，但`all.scss` 就要特別寫路徑了(可以跟前面學姊比較)

    @import 'helpers/variables';
    @import 'layout/grid';
    @import 'base/reset';

    @import 'helpers/mixin';
    @import 'helpers/background';
    @import 'helpers/text';
    @import 'helpers/spacing';
    @import 'helpers/flex';
    @import 'helpers/sizing';

    @import 'components/recommend';
    @import 'components/form';
    @import 'components/product';
    @import 'components/pagination';       //老師說學姊components區有點寫錯~
    @import 'components/location_card';
    @import 'components/post';
    @import 'components/breadcrumb';

    @import 'layout/header';
    @import 'layout/footer';

    @import 'page/index';
    @import 'page/series';
    @import 'page/location';
    @import 'page/blog';

:::

- 東京自耕農學長(poscss)：[GitHub Repo](https://github.com/overactive1988/lesson3_homework/tree/master/src/css/css/_include)、[GitHub Pages](https://overactive1988.github.io/HexSchool_webslicinglesson2020/week03/)

:::spoiler 分析
他不是用scss寫但還是可以看看
:::

- 老師[2014 MOPCON](https://github.com/gonsakon/mopcon2014/blob/master/sass/all.sass)

:::spoiler 分析
老師是用`sass`的寫法

    @import compass/reset
    @import compass
    @import susy

    @import variables

    @import module
    @import base     //共通的，通常是全站樣式
    @import layout
    @import header
    @import partial
    @import news
    @import session
    @import location
    @import sponsor
    @import speakers
    @import community
    @import menu

:::

- 老師[2018 The F2E](https://github.com/gonsakon/theF2EPK/blob/master/source/sass/all.sass)
:::spoiler 分析

    @import 'susy'
    @import 'plugins/svg-grid'

    @import "config/variables"
    @import "config/reset"
    @import "config/reboot"
    @import "config/typography"

    @import 'col/grid'

    @import 'helper/flex'
    @import 'helper/spacing'
    @import 'helper/_hidetext.scss'
    @import 'helper/_display.scss'

    @import 'layout/header'
    @import 'layout/footer'       //老師開始把layout拆成header.footer
    @import 'layout/hero'

    @import 'element/_form.sass'
    @import 'module/card'                  //module是模組系列，很像元件類的放這裡
    @import 'module/pagination.sass'       //可以看第六和第八週的課程

    @import 'page/index'
    @import 'page/product'
    @import 'page/login'                   //頁面設定
    @import 'page/cart'
    @import 'page/checkout'

:::
- [Bootstrap](https://github.com/twbs/bootstrap/tree/master/scss)
:::spoiler 分析

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

    :::