Lism Tips

SCSS で設定する

SCSS の変数を書きかえて、Lism CSS が出すクラスやブレイクポイントを調整する方法をまとめます。lism.config.js を使わない構成向けです。

Lism CSS の SCSS ファイルを自分でコンパイル（CSS に変換）している場合は、SCSS の変数を書きかえて、どのクラスを出すか、ブレイクポイントをいくつにするかを変えられます。この方法は、lism.config.js も @lism-css/plugin も入れていないときに使います。ほかの方法との選び方は カスタマイズの選び方 にあります。

どんなときに使う？#

  • @lism-css/plugin を入れずに、SCSS だけで Lism を組み立てたいとき
  • コンテナクエリとメディアクエリを切り替えたいとき
  • ある Property Class のブレイクポイントのクラスを減らしたり、値を足したりしたいとき
補足

SCSS で足した値は、React・Astro のコンポーネントには伝わりません。コンポーネントで使う方法は、下の「足した値をコンポーネントで使う」を見てください。

書きかえられる変数#

変数は lism-css/scss/_setting.scss に書かれています。@use … with (…) という書き方で、値を差し替えます。

変数 何を決めるか
$breakpoints ブレイクポイント（レイアウトを切り替える画面の幅）の大きさ
$is_container_query 1 ならコンテナクエリ、0 ならメディアクエリで出す
$default_important Property Class に、最初から !important を付けるか（0・1）
$props Property Class ごとの細かい設定

コンテナクエリは「親の箱の幅」で、メディアクエリは「画面の幅」で切り替えるしくみです。

補足

@layer を使わない版では、$default_important は無視され、いつも !important が付きます。

基本の形#

先に setting の変数を書きかえ、そのあとで main.scss を読み込みます。

scss
// 1. 設定の変数を書きかえる
@use '../path-to/node_modules/lism-css/src/scss/setting' with (
  $breakpoints: (
    'sm': '400px', // 1つだけ書きかえてもよい
  ),
  $is_container_query: 0,   // 1 = container query / 0 = media query
  $default_important: 1,    // 0 / 1
  $props: (
    // Property Class ごとの設定
  )
);

// 2. main.scss を読み込む（@layer を使わないなら main_no_layer.scss）
@use '../path-to/node_modules/lism-css/src/scss/main';
補足
  • @layer を使うかどうかを決める変数はありません。読み込むファイルを main.scss か main_no_layer.scss から選びます（CSS ファイルの種類）
  • main_no_layer.scss・full_no_layer.scss では、設定がどうであっても、Property Class へいつも !important が付きます。どうしても外したいときは、main_no_layer.scss の中身を自分の SCSS に写し、最初の @use を @use '../path-to/node_modules/lism-css/src/scss/mixin' with ($layer_mode: 0, $default_important: 0) に変えます
  • Astro では、@use 'lism-css/scss/setting' のように、パッケージの名前から書けます

$props で1つずつ設定する#

$props では、Property Class ごとに、ブレイクポイントのクラスを絞ったり、-p:box のような値を足したりできます。

設定 意味
important 1 で、そのクラスに !important を付ける
bp ブレイクポイントのクラスを出すか（下の表）
utilities 値を足す（'box': '2em' なら -p:box ができる）
scss
@use '../path-to/node_modules/lism-css/src/scss/setting' with (
  $props: (
    'fz': (
      important: 1, // fz のクラスに !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/src/scss/main';

bp に書ける値は3つです。

bp の値 意味
1 $breakpoints に幅があるブレイクポイントすべてで出す
0 ブレイクポイントのクラスを出さない
('sm', 'md') のような並び 書いたブレイクポイントだけで出す（「〜から〜まで」ではない）
注意

並びの中に、使えないブレイクポイント（幅が 0 か、書かれていないもの。最初の状態の xs・xl など）を入れると、そのブレイクポイントは出ず、ビルドのときに警告が出ます。

足した値をコンポーネントで使う#

SCSS で足した値は、コンポーネントには伝わりません。コンポーネントでは、値の前に : を付けて、むりやりクラスにします（Lism Props（コンポーネントの指定））。HTML なら、そのままクラスを書けば使えます。

scss
@use '../path-to/node_modules/lism-css/src/scss/setting' with (
  $props: (
    'p': (
      utilities: (
        'box': '2em',
      ),
    ),
    'lts': (
      utilities: (
        '2xl': 'var(--lts--2xl)',
      ),
    ),
  )
);

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

// トークンを足す
@layer lism-base {
  :root {
    --lts--2xl: 0.15em;
  }
}
jsx
<Box p=":box" lts=":2xl">...</Box>
// → <div class="l--box -p:box -lts:2xl">...</div>

少しだけ足すなら CSS に書く#

足す値が少ないなら、SCSS を使わずに、ふつうの CSS（global.css など）に書いてもかまいません。

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

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

ブレイクポイント（xs・xl）を使えるようにする#

最初は使えない xs・xl は、$breakpoints に幅を書くと使えるようになります。

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

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

最初の幅の値と、CSS が大きくなる点は、lism.config.js で設定する で説明しています。

CSS が出てくる順番に気をつける#

SCSS を自分でコンパイルすると、自分のスタイルと Lism のスタイルが、思っていたのと違う順番で CSS に並ぶことがあります。順番が変わると、どちらのスタイルが勝つかも変わります。Lism を読み込む @use の前に自分のスタイルを書くか、後に書くかに気をつけてください。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧