Lism CSS
Docs
検索

SCSS でのカスタマイズ

SCSS の変数を上書きすることで、出力されるクラスやブレイクポイントを調整できます。lism.config.js と @lism-css/plugin を使わない構成向けの方法です。SCSS で追加した値はコンポーネント側には届かないため、コンポーネントからは HTML に直接クラスを書くか、:value 記法（p=":box" など）で強制的にクラス化して使います（後述）。

上書き可能な変数

lism-css/scss/_setting.scssで定義している変数を @use ... with (...) で上書きできます。

↓
_setting.scss
@use 'sass:map';
@use 'sass:string';
@use './prop-config.gen' as props;

// $default_important: lism.config.js の defaultImportant を prop-config.gen 経由で既定値に読む。
// `@use ... with ($default_important: ...)` で明示上書きされた場合は、!default が無効化されそちらが優先される。
$default_important: props.$default_important !default;
$is_container_query: 1 !default;

// breakpoints: サイズ 0 は「無効」（_query.scss の bp-up / bp-down がスキップする）。
$breakpoints: () !default;
$breakpoints: map.merge(props.$breakpoints, $breakpoints);

$props: () !default;
$props: map.deep-merge(props.$props, $props);
変数 用途
$breakpoints ブレイクポイントのサイズ定義
$is_container_query コンテナクエリで出力するか（1 = container query / 0 = media query）
$default_important Property Class にデフォルトで !important を付与するか（0 / 1）。@layer なし版では無視され、常に付与されます
$props Property Class ごとの個別出力設定

基本フォーマット

setting の変数を上書きしてから lism-css/scss/main.scss を読み込むと、スタイルをカスタマイズできます。

↓
SCSS変数の上書きフォーマット
// 1. 設定変数を上書き
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $breakpoints: (
    'sm': '400px', // 個別キーの上書き可
  ),
  $is_container_query: 0,   // 1 = container query / 0 = media query
  $default_important: 1,    // 0 / 1
  $props: (
    // 個別 prop の設定（後述）
  )
);


// 2. main.scss を読み込む（@layer を使わない場合は main_no_layer.scss）
@use '../path-to/node_modules/lism-css/scss/main';
  • @layer を切り替える変数はありません。読み込むファイルを main.scss / main_no_layer.scss で切り替えてください（CSSファイルの種類）。
  • main_no_layer.scss / full_no_layer.scss では、$default_important や $props の個別 important の値にかかわらず Property Class に常に !important が付きます。どうしても外す場合は、main_no_layer.scss の内容を自分の SCSS ファイルにコピーし、先頭の @use を @use '../path-to/node_modules/lism-css/scss/mixin' with ($layer_mode: 0, $default_important: 0) に置き換えてください。
  • Astro では、パスを付けず @use 'lism-css/scss/setting' のようにパッケージ名から書けます。

$props の個別カスタマイズ

各 Property Class について、出力するブレイクポイントを絞ったり、-p:box のような値を追加したりできます。

↓
Property Classの出力をカスタマイズする
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $props: (
    'fz': (
      important: 1,
      // fz の Property Class に !important を付ける
    ),
    'h': (
      bp: 0,
      // 'h'のブレイクポイント対応クラスを出力しないようにする
    ),
    'p': (
      bp: ('sm', 'md'),
      // 'p'のブレイクポイント対応クラスは sm / md のみに制限する
      utilities: (
        'box': '2em',
      ),
      //.-p:box{--p:2em} を追加する
    ),
  )
);


@use '../path-to/node_modules/lism-css/scss/main';

bp には次の値を指定できます。

bp の値 意味
1 $breakpoints でサイズが定義された全ブレイクポイントで出力する
0 ブレイクポイント対応クラスを出力しない
('sm', 'md') などのリスト 列挙したブレイクポイントだけを出力する（範囲ではなく明示指定）

リスト形式は「この prop だけ特定のブレイクポイントに絞りたい」ときに使います。リストに無効なブレイクポイント（$breakpoints でサイズが未定義のもの。デフォルトの xs / xl など）を含めた場合、そのブレイクポイントは出力されず、ビルド時に警告が出ます。

追加した値をコンポーネントから使う

lism.config.js とは違い、SCSS で追加した値はコンポーネント側には届きません。コンポーネントからは、Lism Props の :value 記法で強制的にクラス化するか、HTML に直接クラスを書いて使います。

↓
SCSS で値を追加し、:value 記法で使う
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $props: (
    'p': (
      utilities: (
        'box': '2em',
      ),
    ),
    'lts': (
      utilities: (
        '2xl': 'var(--lts--2xl)',
      ),
    ),
  )
);


@use '../path-to/node_modules/lism-css/scss/main';


// トークン追記
@layer lism-base {
  :root {
    --lts--2xl: 0.15em;
  }
}
<Box p=":box" lts=":2xl">...</Box>


↓ 出力結果


<div class="l--box -p:box -lts:2xl">...</div>

追加が少数なら、SCSS を使わず global.css に手書きしても構いません。

global.css
@layer lism-base {
  :root {
    --lts--2xl: 0.15em;
  }
}


/* Property Class は @layer を付けない */
.-lts\:2xl {
  letter-spacing: var(--lts--2xl);
}

ブレイクポイント（xs / xl）の有効化

デフォルトで無効な xs / xl は、$breakpoints にサイズを指定すると有効になります。デフォルト値や CSS サイズへの影響、CSS Purge との併用については lism.config.js でのカスタマイズ を参照してください。

@use '../path-to/node_modules/lism-css/scss/setting' with (
  $breakpoints: (
    'xs': '360px',
    'xl': '1440px',
  )
);


@use '../path-to/node_modules/lism-css/scss/main';

CSS の出力順について

SCSS を直接コンパイルする構成では、最終的な CSS に出力される自分のスタイルと lism-css のスタイルの順序が想定とずれることがあります。順序が崩れると詳細度・カスケードの解決結果が変わり、意図しないスタイルが適用される場合があるため、@use の記述順（lism-css を読み込む前後どちらに自分のスタイルを置くか）に注意してください。

© 2026 Lism CSS.