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

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

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

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

CSS

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

Q&A

解決済

1回答

4180閲覧

Sass(SCSS)をコンパイルするとCSSで記述が重複してしまう問題

退会済みユーザー

退会済みユーザー

総合スコア0

Sass

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

CSS

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

0グッド

0クリップ

投稿2019/08/13 14:26

編集2019/11/01 18:38

現在Sassを用いてWebページを作成しています。

_reset.scssや_mixin.scssなどファイルを複数に分割し、それらを@importしたstyles.scssをコンパイルしたのですが、作成されたstyles.css内で_base.scss部分のみが重複してしまいます。

同様にstyle.scssに@importされている_reset.scssなどは問題ないのですが、_base.scssのみhtml,body,aが重複します。

どなたか原因が分かる方がいらっしゃいましたらご教授願います。
よろしくお願いいたします。

ソースコード

【 _base.scss 】※ 問題のファイルです。

scss

1// compileOnSave: false 2 3// ========================================================================== 4// BASE CSS 5// ========================================================================== 6html { 7 // ルートのフォントサイズを10pxに設定しておく 8 font-size: 62.5%; 9} 10 11body { 12 // ルートのフォントサイズを1.6em(16px)に設定 13 font-size: 1.6em; 14 font-family: YuGothic, -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", "Yu Gothic Medium", sans-serif; 15} 16 17a { 18 color: inherit; 19 text-decoration: none; 20 display: block; 21} 22 23// ========================================================================== 24// MEDIA QUERIES 25// ========================================================================== 26$layout-width-inner: 1024px; 27$breakpoints: ( 28 "sp": "screen and (max-width: 767px)", 29 "tab": "screen and (min-width: 768px)", 30 "pc": "screen and (min-width: #{$layout-width-inner})" 31); 32 33@mixin mq($breakpoint: sp) { 34 @media #{map-get($breakpoints, $breakpoint)} { 35 @content; 36 } 37} 38

【 styles.scss 】

scss

1// compileExpanded: ../css/$1.css 2 3// ========================================================================== 4// Foundation 5// ========================================================================== 6@import "foundation/_reset"; 7@import "foundation/_base"; 8 9// ========================================================================== 10// Layout 11// ========================================================================== 12@import "layout/_footer"; 13@import "layout/_header"; 14@import "layout/_main"; 15@import "layout/_sidebar"; 16 17// ========================================================================== 18// Object 19// ========================================================================== 20@import "object/_basic"; 21@import "object/_button"; 22@import "object/_logo"; 23@import "object/_nav"; 24 25// ========================================================================== 26// Utility 27// ========================================================================== 28@import "utility/_colors"; 29@import "utility/_margin"; 30@import "utility/_mixin"; 31 32// ========================================================================== 33// Styles 34// ==========================================================================

【 styles.css 】※ 一部を引用しております。

css

1html { 2 font-size: 62.5%; 3} 4 5body { 6 font-size: 1.6em; 7 font-family: YuGothic, -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", "Yu Gothic Medium", sans-serif; 8} 9 10a { 11 color: inherit; 12 text-decoration: none; 13 display: block; 14} 15 16// 上記と同じ記述が繰り返されています。 17 18html { 19 font-size: 62.5%; 20} 21 22body { 23 font-size: 1.6em; 24 font-family: YuGothic, -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", "Yu Gothic Medium", sans-serif; 25} 26 27a { 28 color: inherit; 29 text-decoration: none; 30 display: block; 31}

補足情報(FW/ツールのバージョンなど)

OS:Windows10
エディタ:Atom
Sassコンパイル:Atomの「Sass Autocompile」パッケージ

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

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

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

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

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

guest

回答1

0

ベストアンサー

自己解決しました。

コンパイル後にstyles.cssへ出力される記述を含んだSCSSファイルをインポートしていたことが原因でした。

解決策として、styles.scss以外のファイルで@importするファイルには@mixin等のコンパイル時に書き出されないコードのみを書くようにいたしました。

初歩的な質問で申し訳ございませんでした。


【 追記 】

そもそもの問題ですが、styles.scssでファイルをインポートする順番を考えるだけで別ファイルにインポートする必要がなくなりますね。

投稿2019/08/15 09:59

編集2019/11/01 18:37
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問