###発生している問題・エラーメッセージ
SCSSでCSSを出力した際に同じセレクタが二重に出力されるため、この事象を解消したいです。
現在、for文,mixinを利用してmarginを指定する汎用的なセレクタの作成をしているのですが、CSSに出力した際に同じセレクタが二重に出力されてしまいます。
ex.css
1//最初の出力 2.u-mt1 { 3 margin-top: 1px; 4} 5 6.u-mt2 { 7 margin-top: 2px; 8} 9 10//数行後に二重に出力される 11.u-mt1 { 12 margin-top: 1px; 13} 14 15.u-mt2 { 16 margin-top: 2px; 17} 18 19
###該当のソースコード
for文の内部にmixinを指定しており、mixinでレスポンシブに対応したスタイルを作成しています。
ex.scss
1 2//margin(1px〜50pxまで)を指定する 3$margin-min: 1; 4$margin-max: 50; 5 6@for $i from $margin-min through $margin-max { 7 @include _responsive(".u-mt#{$i}"){ 8 margin-top: #{$i}px; 9 } 10} 11 12// @desc - class名とルールセットを指定することで、レスポンシブに対応したスタイルを生成します。 13// @param {String} - 共通のclass名をクウォートとドットをつけて渡します(e.g. `.foo`)。 14// @param {Strind} - 使用するブレイクポイントを定義した変数を渡します。 15// @example scss - Usage 16// @include _responsive(".display-none") { 17// display: none; 18// } 19// @example css - CSS output 20// .display-none { 21// display: none; 22// } 23// @media screen and (min-width: 400px) { 24// .display-none-sm { 25// display: none; 26// } 27// } 28 29// min-width 30$_breakpoint-up: ( 31 'sm': 'screen and (min-width: 400px)', 32 'md': 'screen and (min-width: 768px)', 33 'lg': 'screen and (min-width: 1000px)', 34 'xl': 'screen and (min-width: 1200px)', 35) !default; 36 37 38@mixin _responsive($class, $bp: $_breakpoint-up) { 39 #{$class} { 40 @content; 41 } 42 @each $suffix, $value in $bp { 43 @media #{$value} { 44 #{$class}-#{$suffix} { 45 @content; 46 } 47 } 48 } 49}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。