2018年10月17日 星期三

【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 都還看不懂呀!原來斷點的寫法是如此的深奧@@,這部分先跳過,之後學會了再來寫心得。



沒有留言: