コンテンツにスキップ
SpiraCSS v0.3.2-beta

SCSS セクション構成

各 Block の SCSS ファイルは、次の順番でセクションを並べます：

  1. 基本構造: Block のレイアウト + Variant
  2. --shared: Block 配下専用の共通クラス（必要なときだけ）
  3. --interaction: 状態変化やインタラクション関連（必要なときだけ）

SCSS ファイル全体の構造例

.sample-block {
  // 基本構造 -----------------------------------
  display: block;


  &[data-variant="primary"] { ... }


  > .sample-header {
    // 子 Block / Element のレイアウト
  }


  > .sample-body {
    // 子 Block / Element のレイアウト
  }


  // --shared ----------------------------------------
  .btn {
    // この Block 配下だけで使う共通スタイル
  }


  // --interaction -----------------------------------
  @at-root & {
    &:hover { ... }
    &[data-state="active"] { ... }
    &[aria-expanded="true"] { ... }
  }
}

基本構造セクション

「原則の一文」を具体化したもの。詳細なルールは Stylelint が検証します。

プロパティ配置の早見表

カテゴリ代表的なプロパティ例書く場所
コンテナ側display:flex/grid, gap, justify-*, align-*Block 本体
アイテム側（親から）margin-top, flex, order, align-self親 Block の > .child
内部text-align, line-height, padding子 Block / Element 自身

判断基準

  • コンテナ側: 直下の子をどう並べるか → Block 本体に書く
  • アイテム側: 親の都合で子のサイズ・位置・余白を変える → 親 Block の > .child に書く
  • 子が複雑になった: 子要素が「自分の子を並べる役割」を持つ → 新しい Block として切り出す

—shared セクション

Block 配下ツリー内だけで使い回す共通クラスをまとめます。

// --shared ----------------------------------------

記述ルール:

  • 任意の子孫要素を対象にしてよく、> の強制はなし
  • ルート Block 直下に配置

—interaction セクション

状態変化やインタラクション関連スタイルをまとめます。

// --interaction -----------------------------------
@at-root & {
  // ...
}

@at-root & は Stylelint ルールとの整合性のために使用します。
詳細は interaction-scope ルール を参照。

対象:

  • data-state / aria-* 状態
  • :hover, :focus-visible, :active
  • アニメーション・トランジション関連

記述ルール:

  • ルート Block 直下に配置
  • 疑似クラスは対象セレクタにネストして書く

記述例:

.button-container {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;


  // --interaction -----------------------------------
  @at-root & {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;


    > .icon {
      &:hover {
        opacity: 0.8;
      }
    }


    &[data-state="visible"] {
      opacity: 1;
      transform: translateY(0);
    }


    &:hover {
      transform: translateY(-2px);
    }
  }
}