現在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」パッケージ
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。