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