「いまさら聞けないSCSSとSASSの違い」完全初心者向け完全ガイド

CSS

2023.01.082026.04.09

SCSS設計テンプレート完全版（結論）

そのまま使える実務レベルの構成を提示します。
**「BEM × コンポーネント設計 × ファイル分割」**を前提にしています。

ディレクトリ構成（そのまま使える）

scss/
  foundation/
    _reset.scss
    _base.scss
    _variables.scss
    _mixins.scss

  layout/
    _header.scss
    _footer.scss
    _container.scss

  component/
    _button.scss
    _card.scss
    _modal.scss

  project/
    _home.scss
    _about.scss

  utility/
    _spacing.scss
    _display.scss
    _text.scss

  style.scss

エントリーファイル（style.scss）

@use "foundation/reset";
@use "foundation/base";
@use "foundation/variables";
@use "foundation/mixins";

@use "layout/header";
@use "layout/footer";
@use "layout/container";

@use "component/button";
@use "component/card";
@use "component/modal";

@use "project/home";
@use "project/about";

@use "utility/spacing";
@use "utility/display";
@use "utility/text";

@use "foundation/reset";
@use "foundation/base";
@use "foundation/variables";
@use "foundation/mixins";

@use "layout/header";
@use "layout/footer";
@use "layout/container";

@use "component/button";
@use "component/card";
@use "component/modal";

@use "project/home";
@use "project/about";

@use "utility/spacing";
@use "utility/display";
@use "utility/text";

SCSS

foundation（基盤）

_variables.scss

// 色
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-danger: #e74c3c;

// フォント
$font-base: 16px;

// 余白
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;

// 色
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-danger: #e74c3c;

// フォント
$font-base: 16px;

// 余白
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;

SCSS

_mixins.scss

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-base {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-base {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

SCSS

_base.scss

body {
  font-size: $font-base;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

body {
  font-size: $font-base;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

SCSS

layout（レイアウト）

_header.scss

.header {
  background: #fff;
  border-bottom: 1px solid #ddd;

  &__inner {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.header {
  background: #fff;
  border-bottom: 1px solid #ddd;

  &__inner {
    max-width: 1200px;
    margin: 0 auto;
  }
}

SCSS

_container.scss

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md;
}

SCSS

component（コンポーネント）

_button.scss

.button {
  @include button-base;

  &--primary {
    background: $color-primary;
    color: #fff;
  }

  &--secondary {
    background: $color-secondary;
    color: #fff;
  }

  &--danger {
    background: $color-danger;
    color: #fff;
  }

  &--large {
    padding: 12px 24px;
  }
}

.button {
  @include button-base;

  &--primary {
    background: $color-primary;
    color: #fff;
  }

  &--secondary {
    background: $color-secondary;
    color: #fff;
  }

  &--danger {
    background: $color-danger;
    color: #fff;
  }

  &--large {
    padding: 12px 24px;
  }
}

SCSS

_card.scss

.card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: $spacing-md;

  &__title {
    font-size: 18px;
    margin-bottom: $spacing-sm;
  }

  &__text {
    font-size: 14px;
  }
}

.card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: $spacing-md;

  &__title {
    font-size: 18px;
    margin-bottom: $spacing-sm;
  }

  &__text {
    font-size: 14px;
  }
}

SCSS

_modal.scss

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;

  &--active {
    display: block;
  }

  &__overlay {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
  }

  &__content {
    background: #fff;
    padding: $spacing-md;
    max-width: 500px;
    margin: 100px auto;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;

  &--active {
    display: block;
  }

  &__overlay {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
  }

  &__content {
    background: #fff;
    padding: $spacing-md;
    max-width: 500px;
    margin: 100px auto;
  }
}

SCSS

utility（ユーティリティ）

_spacing.scss

.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }

.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }

SCSS

_display.scss

.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

SCSS

_text.scss

.text-center { text-align: center; }
.text-bold { font-weight: bold; }

.text-center { text-align: center; }
.text-bold { font-weight: bold; }

SCSS

project（ページ単位）

_home.scss

.home {
  &__hero {
    background: $color-primary;
    color: #fff;
    padding: $spacing-lg;
  }
}

.home {
  &__hero {
    background: $color-primary;
    color: #fff;
    padding: $spacing-lg;
  }
}

SCSS

HTML使用例

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">説明文</p>
  <button class="button button--primary mt-md">ボタン</button>
</div>

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">説明文</p>
  <button class="button button--primary mt-md">ボタン</button>
</div>

HTML

実務ルール（重要）

① 命名

必ずBEM
.block__element--modifier

② ネスト

最大3階層まで
深くしない

③ ファイル分割

1コンポーネント = 1ファイル

④ 再利用

共通処理は mixin / variables に寄せる

拡張テンプレ（上級）

indexファイルでまとめる

// component/_index.scss
@forward "button";
@forward "card";
@forward "modal";

// component/_index.scss
@forward "button";
@forward "card";
@forward "modal";

SCSS

// style.scss
@use "component";

// style.scss
@use "component";

SCSS

最終まとめ

このテンプレの強み

保守しやすい
チーム開発対応
スケール可能
コピペで即使える

結論

迷ったらこの構成でOK

記法 → SCSS
命名 → BEM
設計 → コンポーネント分割
管理 → @use / @forward

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

SCSS設計テンプレート完全版（結論）

ディレクトリ構成（そのまま使える）

エントリーファイル（style.scss）

foundation（基盤）

_variables.scss

_mixins.scss

_base.scss

layout（レイアウト）

_header.scss

_container.scss

component（コンポーネント）

_button.scss

_card.scss

_modal.scss

utility（ユーティリティ）

_spacing.scss

_display.scss

_text.scss

project（ページ単位）

_home.scss

HTML使用例

実務ルール（重要）

① 命名

② ネスト

③ ファイル分割

④ 再利用

拡張テンプレ（上級）

indexファイルでまとめる

最終まとめ

結論

広告ブロッカーが検出されました