見出し画像

SCSSのファイル分割【仮】

エル×WEB制作・デザイン勉強中！

とりあえずで自分で考えた内容↓↓
調べたら違う構造が出てきたからこれは【仮】


SCSS構造


SCSS  ー   style.scss
　　   ー　page ー_header.scss
          ー   setting ー_color.scss
                            ー_font.scss
                            ー_breakpoints.scss

ポイント

・まずstyle.scssですべてのファイルを読み込むが、breakpointのmixinのための記述は別で記述する必要がある
@use "sass:map";
@mixin mq($breakpoint: lg) { @media #{map.get(breakpoints.$breakpoints,$breakpoint)} { @content; }

・各ページごとに使う変数を入れたファイルを読み込む＆mixinのための記述が必要がある。
その際、ファイルの読み込みは一度ファイルから出てsettingのファイルを読み込むため@use "../setting/color";のように../を記述する必要がある
　

 style.scssの記述例

@use "sass:map";
@use "setting/color";
@use "setting/font";
@use "setting/breakpoints";

@use "page/header";


@mixin mq($breakpoint: lg) {
  @media #{map.get(breakpoints.$breakpoints,$breakpoint)} {
    @content;
  }
}


header.scss(他のpageも一緒)の記述例

@use "sass:map";
@use "../setting/color";
@use "../setting/font";
@use "../setting/breakpoints";

@mixin mq($breakpoint: lg) {
  @media #{map.get(breakpoints.$breakpoints,$breakpoint)} {
    @content;
  }
}

font.scss　（color等も同様）の記述例

// fonts
$main-fonts-ja: "Noto Sans JP", sans-serif;
$main-fonts-en: "Courgette", cursive;
$sub-fonts-ja: "Kiwi Maru", serif;
$sub-fonts-en: "Josefin Sans", serif;

breakpoints.scssの記述例

@use "sass:map";
// breakpoints
$breakpoints: (
  "sm": "screen and (min-width:600px)",
  "md": "screen and (min-width:768px) ",
  "lg": "screen and (min-width:900px)",
  "xl": "screen and (min-width:1200px)",
  "xxl": "screen and (min-width:1700px)",
) !default;


この記事が気に入ったらサポートをしてみませんか？