質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2918閲覧

SCSS(SASS)でCSSを出力した際に二重に出力される

YumaYamada

総合スコア30

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/10/23 12:29

編集2022/01/12 10:55

###発生している問題・エラーメッセージ
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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

以下のコードを実行しましたが、質問文にあるような現象を再現できませんでした。質問文に記述していないコードなどに原因があるのかもしれませんが、質問文の内容のみからでは原因を特定することは出来ません。

SCSS

1$_breakpoint-up: ( 2 'sm': 'screen and (min-width: 400px)', 3 'md': 'screen and (min-width: 768px)', 4 'lg': 'screen and (min-width: 1000px)', 5 'xl': 'screen and (min-width: 1200px)', 6) !default; 7 8$margin-min: 1; 9$margin-max: 50; 10 11@mixin _responsive($class, $bp: $_breakpoint-up) { 12 #{$class} { 13 @content; 14 } 15 @each $suffix, $value in $bp { 16 @media #{$value} { 17 #{$class}-#{$suffix} { 18 @content; 19 } 20 } 21 } 22} 23 24@for $i from $margin-min through $margin-max { 25 @include _responsive(".u-mt#{$i}") { 26 margin-top: #{$i}px; 27 } 28}

投稿2018/01/13 11:07

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問