📝

Sassのファイル構成 (node-sass)

2021/09/06に公開

僕が使っているファイル構成を記載します。
良かったら参考にしてみてください。

- sass
  ├ base
  │ ├ _base.scss
  │ └ _reset.scss
  ├ function
  │ ├ _convert-rem.scss
  │ ├ _convert-vw.scss
  │ ├ _mediaquery.scss
  │ └ _strip-unit.scss
  ├ setting
  │ ├ _breakpoints.scss
  │ ├ _color.scss
  │ ├ _zindex.scss
  │ └ _typography.scss
  ├ layout
  ├ object
  │ ├ components
  │ ├ projects
  │ └ utility
  ├ plugin
  └ index.scss

base

初期設定のファイルを入れます。
_reset.scssをリセットCSSを入れています。
_base.scssはプロジェクト毎に記載したいベースのCSSがあれば入れています。

リセットCSSはこちら。

function

mixinの関数を定義するフォルダになります。
関数を使うと他の人が保守した時に読み込まないと理解できなくなるので、保守性の観点から最小限に押さえています。

僕が使っているのは以下の4つ

pxをremに変換する

_convert-rem.scss

@function rem($pixels) {
  @return $pixels / 16 * 1rem;
}

僕はpxではなく、remで記述しているのdえ、この関数はめちゃくちゃよく使います。
基本的にpxではなくrem()という形で数値を記述する形になります。

参考

pxをvwに変換する

_convert-vw.scss

@function vw($size, $viewport: 375) {
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

メディアクエリの記述 (メディアクエリの変数は別で定義してます)

_mediaquery.scss

@mixin mq($mediaquery: md) {
  @media #{map-get($mediaquerys, $mediaquery)} {
    @content;
  }
}

単位を削除して値だけ取り出す

_strip-unit.scss

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

setting

変数を定義するフォルダになります。

ブレイクポイント、メディアクエリーの変数

_mediaquery.scss

$breakpoints: (
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
);

$mediaquerys: (
  sm: "screen and (min-width: #{map-get($breakpoints,'sm')}px)",
  md: "screen and (min-width: #{map-get($breakpoints,'md')}px)",
  lg: "screen and (min-width: #{map-get($breakpoints,'lg')}px)",
  xl: "screen snd (min-width: #{map-get($breakpoints,'xl')}px)",
  ie: "(-ms-high-contrast: active), (-ms-high-contrast: none)",
);

ブレイクポイントはTailwindを参考に決めています。

カラーの変数

_color.scss

// 汎用色
$pallette-black: #000;
$pallette-white: #fff;

// テーマカラー
$primary-main: ;
$primary-lighter: ;
$primary-darker: ;
$secondry-main: ;
$secondary-lighter: ;
$secondary-darker: ;

// その他
$bg-main:;
$text-black:;

カラーの変数は特に決まっているわけではありませんが、上記をベースに頻出するカラーを定義します。
あまり使われないカラーは特に変数に入れて直接指定することも多いです。

z-indexの変数

_zindex.scss

$layer: (
  modal: 100,
  drawer: 50,
  floating: 40,
  header: 30,
  footer: 20,
  front: 10,
  defalt: 1,
  background: -10,
);

z-indexは変数で管理しないとカオスになるため、基本コンポーネントでz-indexを管理しています。
z-indexを調整するときは上記の変数を基準に defalt + 1 のようにプラスマイナスで管理をしていきます。

フォントの変数

_typography.scss

// フォントファミリー
$base-font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo, serif;

body {
  font-family: $base-font-family;
}

// フォントウェイト
$thin: 100;
$extralight: 200;
$regular: 300;
$normal: 400;
$medium: 500;
$semibold: 600;
$bold: 700;

基本のフォントファミリーは変数化してbodyに指定しています。
フォントウェイトはTailwindを参考に変数化。（不要な気がするので要検討）

layout

Flocssのlayout要素がここに入ります。

object

components

最小単位かつ、共通化が見込まれるコンポーネントはこちらに入れます。
基本的にボタンや見出し、リスト要素等

カードなど最小単位でないものや共通化しない最小単位はprojectsに入ります。

projects

layout, components以外の要素は全てここに入ります。

utility

PCとスマホ表示の display:none; の切り替えや、明朝体の切り替え等はutilityで行います。

plugin

外部のライブラリで使うCSSはこちらに入れて使います。

index.scss

全ての変数を読み込んで一つのファイルとして出力します。