【SCSS】2.9用SCSS寫root（第一次就失敗）

Bootstrap的SCSS資料夾內，有一枚 _root.scss，這個檔案轉譯之後就像是CSS註解，可以把一些設定的基本規則寫在上面。

Bootstrap的 _root.scss 的寫的很簡單，只有顏色定義、跟斷點。
顏色的寫法很簡單，只用到 Variables(變數) + @each 迴圈
然後我就滿心歡喜寫下了這個

SCSS

:root {

// Custom variable values only support SassScript inside `#{}`.

@each $color, $value in $colors {

  --#{$color}: #{$value};

}

@each $color, $value in $theme-colors {

  --#{$color}: #{$value};

}

}

結果他出乎我意料地跑出了這個，



(((ﾟДﾟ;)))....我的人生不是已經開始順遂了嗎？Error!!是怎麼回事？！
查了很久（不要問我有多久），是我自己幹了蠢事...

在BootStrap裡，@import 的順序也是有意義的


SCSS

@import "functions";

@import "variables";

@import "mixins";

@import "root";

@import "reset"; @import "utilities";

前三行：funtion、veriables、mixins，先被引入，後面才能依照這個基礎去做計算，跑迴圈
結果我將 @import "root";  拉到第一行
SCSS如果是人類的話應該會說：『喵的嘞！連變數 @import "variables"; 是哪些都沒告訴我，是要我執行3小？！』

調整 @import 以後，root 就被順利的轉譯完成了



=========我是題外話的分割線===========


Bootstrap的_root.scss，裡面還有一段，轉譯後會產出定義的斷點

SCSS

@each $bp, $value in $grid-breakpoints {

  --breakpoint-#{$bp}: #{$value};

}

轉譯後CSS

--breakpoint-xs: 0;

--breakpoint-sm: 576px;

--breakpoint-md: 768px;

--breakpoint-lg: 992px;

--breakpoint-xl: 1200px;

看到練習了許久的 @each 結構，當然是先去找到_variables.scss ，看看  $grid-breakpoints  的map是怎麼寫的，看了以後心得就是：我不會！這段太難了啦！！完全看不懂。

有點像是剛搞懂一元一次方程式，就要去解微積分一樣，我連最簡單的 funtion 都還看不懂呀！原來斷點的寫法是如此的深奧@@，這部分先跳過，之後學會了再來寫心得。