---
# System prepended metadata

title: 第四週課程-3(scss教學)

---

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

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

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/914d5576-5343-4ca5-9133-2f242155922a/螢幕快照_2021-08-10_下午6.44.38.png](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F914d5576-5343-4ca5-9133-2f242155922a%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-10_%E4%B8%8B%E5%8D%886.44.38.png?table=block&id=f8af76e9-22f9-4e2e-b6f1-d3e738de675d&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=2380&userId=&cache=v2)

## 寫法重點：

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

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9b9857c5-174b-48ed-9f11-63a88f25dbd6/螢幕快照_2021-08-10_下午10.37.29.png](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9b9857c5-174b-48ed-9f11-63a88f25dbd6%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-10_%E4%B8%8B%E5%8D%8810.37.29.png?table=block&id=a24a4198-3100-477d-b54e-9ea09dabebb0&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=1340&userId=&cache=v2)

- scss支援純css寫法
- scss的響應式就直接寫在同一句下方，不要集中在最後面(比較好管理)
    
    :::spoiler 圖片
    ![image alt](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0e22ae7b-de60-4b8c-b966-ccb78fb7f296%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-10_%E4%B8%8B%E5%8D%8810.42.42.png?table=block&id=cc1d972b-b14f-47df-9d4d-867d3ab00324&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=770&userId=&cache=v2)
    ::: 
    
- 寫的順序: header>content>footer
- &用法:    &代表上層class名稱的縮寫

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

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

## 變數介紹:

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

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

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

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

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

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

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

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a4a20414-9012-4d10-818c-f6eabd3b69f1/螢幕快照_2021-08-10_下午11.11.47.png](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa4a20414-9012-4d10-818c-f6eabd3b69f1%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-10_%E4%B8%8B%E5%8D%8811.11.47.png?table=block&id=44d71540-cf0e-4acf-afdb-91ff391f1547&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=960&userId=&cache=v2)

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

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

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/12704249-f8e3-4bcd-8a06-f1e4516a1199/螢幕快照_2021-08-10_下午11.37.11.png](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F12704249-f8e3-4bcd-8a06-f1e4516a1199%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-10_%E4%B8%8B%E5%8D%8811.37.11.png?table=block&id=fdaa7d82-53f4-4a55-b073-6f3a67eaded8&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=960&userId=&cache=v2)

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

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

   
@import"_index.scss";    
 
```

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

```scss
$red: #ff0000;
```

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

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

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

```scss
.header{};
.footer{};
```

#### #`_index.scss` (放首頁的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網頁名，就比較不會撞名(如下圖)
![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/50fedbd1-a468-40c3-acf5-0ae2e43accee/螢幕快照_2021-08-11_上午12.30.36.png](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F50fedbd1-a468-40c3-acf5-0ae2e43accee%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-11_%E4%B8%8A%E5%8D%8812.30.36.png?table=block&id=008967a3-ae7d-4ded-825b-426fda37764b&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=1150&userId=&cache=v2)

## **上一梯大神的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 分析
    ```sass= 
    @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 分析
    ```sass= 
    //這個學姊分很細，新手一開始可以先不要分這麼細
    @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` 就要特別寫路徑了(可以跟前面學姊比較)
    ![image alt](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb508909e-205a-4775-90ed-77e73caca0c8%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2021-08-11_%E4%B8%8A%E5%8D%8812.42.54.png?table=block&id=b066d6b7-f7ff-4f45-af5b-63343ee4f564&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=4900&userId=&cache=v2)
    ```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`的寫法

    ```scss=
    @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 分析
    ```scss
    @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
    ```scss
    // 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
    ```
    ::: 

     