sassを使って色を管理しようとしています。
メインの色(赤,青,,,)の明度を変えたものを変数にし、htmlクラスに応じて色を変更するためmixinとifで効率化したいのですが、良い記述の方法はありますでしょうか?
よろしくお願いいたします。
sass
1$color_blue: #00f; 2$color_blue_white: lighten($color_blue, 49%); 3$color_blue_black: darken($color_blue, 40%); 4$color_blue_gray_dark: mix($color_blue_white, $color_blue_black, 30%); 5$color_blue_gray_light: mix($color_blue_white, $color_blue_black, 70%); 6 7$color_red: #f00; 8$color_red_white: lighten($color_red, 49%); 9$color_red_black: darken($color_red, 40%); 10$color_red_gray_dark: mix($color_red_white, $color_red_black, 30%); 11$color_red_gray_light: mix($color_red_white, $color_red_black, 70%); 12 13@mixin bg_gray_light($color) { 14 @if $color == blue { 15 background: $color_blue_gray_dark; 16 } @else if $color == red { 17 background: $color_red_gray_dark; 18 } @else { 19 } 20} 21@mixin bg_white($color) { 22 @if $color == blue { 23 background: $color_blue_white; 24 } @else if $color == red { 25 background: $color_red_white; 26 } @else { 27 } 28} 29body { 30 &.blue { 31 @include bg_white(blue); 32 ul{ 33 li { 34 span { 35 @include bg_gray_light(blue); 36 } 37 } 38 } 39 } 40 &.red { 41 @include bg_white(red); 42 ul{ 43 li { 44 span { 45 @include bg_gray_light(red); 46 } 47 } 48 } 49 } 50}
あなたの回答
tips
プレビュー