_variables.scss → 新增修改顏色、間距

  • 從 // Color system 一路新增 $$theme-colors: map-merge( )
  • $theme-colors: map-merge$spacers: map-merge
    • 需在 $theme-colors: () !default; 上方寫上要新增的顏色變數,再於 $theme-colors: map-merge() 內新增上變數名稱。( 如果只在 $colors: () !default; 上面新增變數,不會有主題顏色,例如 : 背景色、文字顏色等 )
    • 認明 map-merge 並在裡面做修改 ,雖然還不知道原理,但在裡面修改再套 class 是可成功的。像 BS 內 _variables.scss 的 font-size 就沒有 map-merge ,所以就須自己寫 @each 做編譯。

_variables.scss → 新增字體大小 + 自訂響應式

複製 BS 中的 _variables.sccss 到自己的專案做修改。下方 _mixin.scss 加入斷點,複製同學的寫法 XD

// _variables.scss
/*  font-size */
$font-size-base: 1rem;
$font-size: () !default;
$font-size: map-merge(
  (
    'xs': ($font-size-base * 0.75),
    'sm': ($font-size-base * 0.875),
    'base': $font-size-base,
    'lg': ($font-size-base * 1.25),
    'xl' :($font-size-base * 1.5),
    '2xl': ($font-size-base * 1.75),
    '3xl': ($font-size-base * 2),
    '4xl':($font-size-base * 2.5),
  ),
  $font-size
);
// _mixin.scss
@each $breakpoint in map-keys($grid-breakpoints) {
    @each $size, $value in $font-size {
        @include media-breakpoint-up($breakpoint) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            .text#{$infix}-#{$size} {
                font-size: $value !important;
            }
        }        
    }
}

//自己練習寫了一個@each 但就沒有斷點功能 XD
@each $size , $value in $font-size{
    .text-#{$size}{
        font-size: $value !important;
    }
}

可參考 : Sass教學 (28) – @each+Sass Maps批次新增各元素樣式

資料來源

六角學院

文章

最後修改日期: 30 12 月, 2020

作者