---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/27(二) 每日任務
## 題目

在 all.scss 檔中，載入的檔案順序正確是非常重要的事，請回覆下方的順序需要怎麼修改，以及原因

@import "layout"
@import "reset"
@import "variable"

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：

@import "variable"
@import "reset"
@import "layout"

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
答案：（可直接撰寫答案及原因）
Codepen：https://codepen.io/Bingbingboom/pen/ZEexrxe
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/wvJQgam
-->

<!-- 2.孫 sunne
https://codepen.io/Sunne/pen/vYxqLaK -->

<!--3.alpha
@import "variable"
@import "reset"
@import "layout"

需要先把參數設定匯入後再做將預設清除最後才是把layout放入才能讀取前幾個的參數
-->

<!-- 4.肉鬆
codepen: https://codepen.io/klrkicog/pen/gOWvbYN
-->

<!--5.Jasmin
@import "variable"
@import "reset"
@import "layout"
載入變數設定 再載入清除預設 最後載入layout
-->

<!-- 6.Jean
codepen: https://codepen.io/jean-liu/pen/ExmQaxo
-->

<!-- 7. natsu
@import "variable"
@import "reset"
@import "layout"
-->

<!-- 8. Vic
@import "variable" // 變數優先，之後的檔案才吃的到
@import "reset" // 在開始撰寫前，先清除預設設定
@import "layout" // 開始撰寫，無預設設定也能使用變數
-->

<!-- 9.sarah
@import "variable" 先載入變數，後面才能使用
@import "reset" 清除預設樣式
@import "layout" 最後載入共用區塊
-->

<!-- 10.WilsonHan
@import "variable"
@import "reset"
@import "layout"
需要先載入變數之後做清除CSS的動作，最後再匯入layout檔
-->

<!-- 11. Karen Huang
@import variable 先載入變數
@import reset 在variable之後載入reset 可清除變數的css
@import layout 最後載入layout可吃到前面兩支檔案的設定 -->

<!-- 12. 雷古娜
codepen:https://codepen.io/tinahopo/pen/GRmQgJb -->

<!-- 13. Lina Chen
@import "variable";
@import "reset";
@import "layout";
由於 css 樣式會從上至下讀取，variable 變數須放置最上層，後續檔案有使用到變數才可讀取。
且 css 樣式後面會覆蓋前面，會優先將 reset 先清除，再由後面 layout 的樣式覆蓋。
-->

<!-- 14. yijun
@import "variable"
@import "reset"
@import "layout"
最上面放變數，再來是css reset，最後放layout，這樣layout才能吃到前面的變數及樣式才可以作覆蓋。
-->

<!-- 15. Tsai 明達
Codepen: https://codepen.io/bmzpfyxe/pen/GRmKayN?editors=0100
-->

<!-- 16 Sz
@import "variable" // 變數先導入後才可以供後續使用
@import "reset" // 清除瀏覽器預設樣式，後續才不會因瀏覽器不同效果不同
@import "layout"
-->
<!-- 17陳sam
@import "variable"//導入預設變數
@import "reset"//清除預設樣式，或是增加基本樣式
@import "layout"//增加基本樣式，且還可以使用上方變數
-->

<!-- 18. 大衛
@import “variable”
@import "reset”
@import "layout”
先放入變數，讓後面檔案都可以吃到變數，在對樣式進行清除，最後放layout覆蓋樣式
-->

<!-- 19. Cate Chang
@import "variable" //變數最優先載入，讓後面吃得到變數設定
@import "reset" //再載入 reset 清除瀏覽器預設樣式
@import "layout" //最後載入共同版面設定
-->

<!-- 20. lumei
@import "variable"
@import "reset"
@import "layout"
優先載入變數，這樣後面才吃得到
再來是css reset
最後是共同版面設定
-->
<!-- 21 LiShang
@import "variable" //優先載入變數，讓後面的檔案也能應用到
@import "reset" //清除瀏覽器預設樣式，讓layout可以正確設定(不會以預設的樣式來設定)
@import "layout" //最後在載入共同版面設定
-->

<!-- 22.roger
@import "variable" 首先需載入變數後面的layout設定才能吃到相關樣式
@import "reset" 清除預設樣式
@import "layout"
-->

<!-- 23. Gill
@import "variable"; //載入變數設定才可供後面檔案做使用(reset, layout才能吃到相對應變數)
@import "reset"; //清除瀏覽器預設樣式
@import "layout"; //最後載入共同版面樣式
-->

<!-- 24. Gui
@import "variable" // 先載入變數檔，讓後面都能存取
@import "reset" // 先清除預設樣式，才不會影響後續開發
@import "layout" // 最後載入共同版面樣式設定
-->

<!-- 25. Jun Chan
Codepen: https://codepen.io/chujunchan/pen/zYwRGKX
-->

<!-- 26. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/OJmQVpj?editors=0110
-->

<!-- 27. SihLe Huang
@import "variable" -> 要放在最前面，讓其他有設定變數的檔案使用
@import "reset" -> 清除預設樣式，要放前面，不然會被其他設定覆蓋
@import "layout" -> 共用的版面設定要放前面，可能會使用變數，所以在變數之後
-->

<!-- 28. Joy Cheng
codepen : https://codepen.io/joycheng5432/pen/oNWEXox?editors=0010

-->

<!-- 29. 葉小嵐
載入的檔案順序:會影響權限使用，所以先清除預設在來設定layout, 利用參數的內容快速寫css。

@import "variable" ->變數。
@import "reset" ->清除預設樣式。
@import "layout" ->共用的版型css。

-->

<!-- 30. Dory Hung
載入的檔案順序:會影響權限使用，所以先清除預設在來設定layout, 利用參數的內容快速寫css。

@import "reset" ->清除預設樣式。
@import "variable" ->變數。
@import "layout" ->共用的版型css。

-->

<!-- 31. huanan
@import "variable"
@import "reset"
@import "layout"
變數優先載入，再來是清除預設樣式
-->

<!-- 32. curry
@import "variable"//導入預設變數
@import "reset"//清除預設樣式，或是增加基本樣式
@import "layout"//增加基本樣式，且還可以使用上方變數
-->

<!-- 33. Hi Annie
@import "reset" //清除預設樣式
@import "variable" //變數
@import "layout" //共用版型 ex:表頭表尾
-->

<!-- 34. hellocrab
@import "variable"
@import "reset"
@import "layout"
-->

<!-- 35. Erin Huang
@import "variable" //變數可能應用於任一個scss檔案，順序為最優先
@import "reset" //樣式的reset檔案，確保寫新樣式之前已清理乾淨瀏覽器既定樣式
@import "layout" //網頁的共通版型
-->

<!-- 36. Joey
@import "variable"
@import "reset"
@import "layout"
-->

<!-- 37.黃士桓
@import "variable" 通常變數定義的數值需要最先被引用
@import "reset" 再來是做瀏覽器預設樣式的清除 也或許會使用到變數定義的數值
@import "layout" 共通版型頁面類的通常會是接在reset後作為優先度交高的引用

<!-- 38. 群嘉
@import 'variable' 紀錄變數
@import 'reset' 預設樣式清除
@import 'layout' 共通樣式，會放在變數與樣式清除之後，因為放在變數前會無法使用變數，放在reset前layout部分樣式會被清除
-->

<!-- 39. Ruby Chiang
@import "variable" 最優先匯入參數(後面的才能吃到參數設定)
@import "reset" 清除預設樣式 (也許會用到valriable裡定義的參數)
@import "layout" 再來才匯入共通版型 (也許會用到valriable裡定義的參數)
-->

<!-- 40. ZY Hsu
@import "variable"
@import "reset"
@import "layout" -->

<!-- 41. PHIL
@import "varible" 設定參數
@import "reset" 在自行設定預設樣式時或許會用到變數
@import "layout" 網頁共用樣板也會需要用到變數
-->

<!-- 42. axlrock1021
codepen : https://codepen.io/andy1021/pen/PomQzgv
-->

<!-- 43. Sam li
@import "variale" 先放變數 以免搜尋不到變數
@import "reset" 清除預設樣式
@import "layout" 網頁共用樣板
-->

<!-- 44. 魚魚
@import "variable" //先載入變數，讓後面的檔案吃到
@import "reset" //清除瀏覽器預設樣式
@import "layout" //最後載入共同版面樣式
-->

<!-- 45. 沈依蓉
@import "variable"
@import "reset"
@import "layout"
先載入變數後面才能使用，再清除css瀏灠器預設，最後匯入自已寫的layout
-->

<!-- 46.Fleur
@import "variable"
@import "reset"
@import "layout"
變數放第一個是確保後面css都可以吃到變數的設定，再來放reset清除瀏覽器預設，最後才放layout
-->

<!-- 47.阿瓜
@import "variable" //所有全域變數與Mixin
@import "reset" //reset.css
@import "layout" //共同框架，第一層

先讀取變數，後面的有用到變數的地方才讀得到變數
先清除預設才開始寫框架
-->

<!-- 48. Jerry Yen
@import "variable"
@import "reset"
@import "layout"
先載變數>RESET>最後開始撰寫LAYOUT
-->

<!--49. 阿和
@import "variable"
@import "reset"
@import "layout"
先讓變數載入>接著讓CSSreset重製預設樣式>再接著載入layout
-->

<!--50.童筱涵
@import "variable" 先載入變數確保後面都吃得到變數
@import "reset" 清除預設樣式
@import "layout" 最後再寫共通區塊
-->

<!--51.anna
@import "variable"
@import "reset"
@import "layout"
要先載入變數，再進行reset重置，某則會找不到變數
-->

<!--52. Cheng Pei-hsuan
@import "layout" --3.
@import "reset" --2.
@import "variable" --1.
scss是由上到下編譯，要先載入變數，避免後續檔案有使用到變數會造成編譯錯誤
-->

<!--53. YuriT
@import "variable"
@import "reset" --2.
@import "layout" --1.
SCSS由上到下編譯檔案,應先讓變數設定載入,再RESET瀏覽器預設樣式,最後才是載入我們寫的SCSS
-->

<!--54. Jim Hwang
1.@import "variable"
2.@import "reset"
3.@import "layout"
variable最先是因為此scss定義了各scss檔所需用到的變數，包含reset跟layout。
第二個是reset，原因是reset內設定的標籤屬性必須先被載入，才不會被layout內的標籤屬性覆蓋掉，
所以layout最後。
-->

<!--55. jimmyFang
@import "layout"
@import "reset"
@import "variable"

1.先匯入 @import "variable" 先定義scss檔的所需用到的各種參數

2.再匯入 @import "reset" ，並清除所有預設的css樣式，再重新撰寫客製化樣式

3.最後匯入 @import "layout"，才能讀取到前面所設定的scss參數數值及樣式，並編譯成css
-->

<!-- 56. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/wvdypvw
-->

<!-- 57. Tina Yen
variable->reset->layout
先設定好變數，再將reset清空將遊覽器d4預設歸零，而後再來做每一頁都會出現的layout.
-->

<!-- 58. ZOE WU

載入順序修正為：
@import "reset" 清除瀏覽器預設樣式
@import "variable"
@import "layout"

說明：
檔案讀取順序是由上而下，因此建議檔案載入順序需調整為 reset 跟變數放在前面，layout 放在後面
，先清除瀏覽器預設樣式，並且定義變數之後再開始撰寫 layout 共通區塊，後續頁面設定才能順利讀取前面的設定。
-->

<!--59.kk
@import "variable" 因為讀檔順序是由上而下，先定義scss檔的所需用到的各種參數，先載入確保後面的檔案都讀得到設定
@import "reset" 清除瀏覽器預設樣式
@import "layout" 最後再寫共通區塊
-->

<!--60. Irene Wang
codepen:https://codepen.io/irene-wang-the-looper/pen/gOWvqPM
-->

<!-- 61. KatieZhao
@import "variable"
@import "reset"
@import "layout"
參數設定匯入> 清除預設 > 載入 layout
-->

<!-- 62. Meng
@import "variable"
@import "reset"
@import "layout"
先將參數載入，再將css清除設定，之後才是把layout匯入網站
-->

<!-- 63. Jamie
@import "variable"
@import "reset"
@import "layout"
通常會將變數放在最前面，再來須先設定css reset，才能進行後續的css開發
-->

<!--64. Jocelyn
@impor "variable"
@import "reset"
@import "layout"
因為scss是由上而下編譯的，所以要先載入變數，再加入css reset將預設樣式取消，最後在放共同區塊，以確保載入的內容都能被吃到。-->

<!-- 65. Riley
@import "variable"
@import "reset"
@import "layout"
因為scss程式碼是由上往下編譯，先放開發會使用到的各種變數，接著在把css reset放入，確保css樣式是乾淨的，最後才放上我們自己寫的layout
-->

<!-- 66. Calon
@import "variable";
@import "reset";
@import "layout";

Sass 是從上開始編譯，先擺變數不然可能會因為找不到變數而使 Sass 編譯失敗，第二個擺 reset 是為了避免之後頁面的樣式被一樣權重的 reset 樣式蓋過去
-->

<!-- 67. Benson
@import "variable";
@import "reset";
@import "layout";

Sass從上至下編譯,variable擺最上頭以避免之後的檔案會用到，reset擺第二個是避免之後自訂的樣式被reset覆蓋
-->
<!--icy
@import "variable"
@import "reset"
@import "layout"
scss 編譯 是由上而下，若要其他的scss都能吃到變數，需擺在最上頭，reset是為了避免後續的頁樣式被reset覆蓋。-->

<!-- 69. Una(點子數位)
@import "variable"
@import "reset"
@import "layout"
-->

<!-- 70. 文文
@import "variable"
@import "reset"
@import "layout"

1. 變數統一放在variable，並且第一個import進來，其他支SCSS就可以吃到，也便於管理SCSS變數
2. reset用於預設CSS設定
3. layout用於版型，相同的區塊放這裡
總之，共用性愈大的東西放在愈上面
-->

<!-- 71.Shani
@import "variable"
@import "reset"
@import "layout"
變數最先以利後面其他scss檔案能夠使用
reset清除預設樣式
layout為頁面共同區塊在其他page前引入-->

<!-- 72. Tori
@import "variable" => 載入自訂變數 ( reset 中可能也會有變數 )
@import "reset" => 清除瀏覽器的預設樣式
@import "layout" => 載入自訂 CSS 樣式
-->

<!-- 73. 三隻小貓
@import "variable" - 先載入變數以免後面有使用到會無法讀取
@import "reset" - 先將畫面初始化
@import "layout" - 再載入客製的畫面，才不會被reset洗掉
-->

<!-- 74. AKI
@import "variable" //為使所有scss能吃到變數，須放在一開始載入
@import "reset" //清除預設樣式
@import "layout" //載入自訂樣式
-->

<!-- 75. Jessie Cheng
@import "variable" // 一開始就載入，讓所有 scss file 都可使用
@import "reset" // reset 一定要放在所有頁面 scss 前面，否則會把頁面的樣式都 reset
@import "layout"
-->

<!-- 76.ellie
先載入變數variable讓接下來的scss都可以吃到，在載入reset清出預設樣式，最後才是 layout自訂cssu樣式。-->

<!-- 77. WA
@import "variable" 變數優先載入
@import "reset" 格式化預設樣式
@import "layout" 載入自訂樣式
-->

<!-- 78. shanglin
@import "layout"
@import "reset"
@import "variable"
因為scss是由上往下編譯的,需先加入變數再加css reset,這樣就能將原本預設的樣式取消,且能夠確保程式碼的樣式不會被更動或是覆蓋到
接著再放入我們自己寫的layout即可
-->

<!-- 78. Min Chun Tsai
SCSS讀取順序為由上到下，故
@import "variable" 變數最先載入供全體使用
@import "reset" 初始化樣式設定(有些會用到變數)
@import "layout" 上列基礎設定好後才開始設計樣板版型 --!>

<!-- 79.Page
scss讀取順序為由上而下
1.@import "variable" ->先載入變數，確保後面所有scss檔都讀的到變數，以免有些檔案有用到變數，但卻讀不到
2.@import "reset" ->將預設的css樣式先進行清除，避免客製化樣式時還看的到殘留的預設樣式
3.@import "layout" ->載入客製化的樣式設定
-->

<!-- 80.ted31539
scss讀取順序為由上而下
1先載入變數
2清除變數預設css
3layout才可以使用變數
-->

<!-- 81.陳品宏
@import "variable"
@import "reset"
@import "layout"
先載入變數讓後面所有的檔案都可看見，再清除預設樣式，最後載入自定義的區塊
-->

<!-- 82. YOYO
@import "variable"
@import "reset"
@import "layout"
1.最優先載入變數variable
2.載入初始化reset
3.自己撰寫的layout
-->
<!--83. Keep
https://codepen.io/keep-/pen/eYRMWad
-->