Customize

SCSSの変数を上書きすることで、出力するCSSのカスタマイズが可能です。

lism-css/scss/query
- $breakpoints: 各ブレイクポイントのサイズを指定できます。map型
- $common_support_bp: どのサイズまでのブレイクポイントをサポートするかを指定できます。文字列型
- $is_container_query: メディアクエリではなくコンテナクエリで出力するかを指定できます。数値型
lism-css/scss/setting
- $props: 各CSSプロパティに関する設定を指定できます。map型
- $utilities: 各ユーティリティクラスに関する設定を指定できます。map型

ブレイクポイントの基本設定を変更する

↓ 設定カスタマイズの書き方と各初期値

@use '../path/to/node_modules/lism-css/scss/setting' with (
  $breakpoints: (
    'sm': '480px',
    'md': '720px',
    'lg': '960px',
  ),
  $common_support_bp: 'lg',
  $is_container_query: 1,
  $props: (
    ...
  )
);

// lism の scssファイルを読み込む
@use '../path/to/node_modules/lism-css/scss/all';

↓カスタマイズ例

// 設定カスタマイズ
@use '../path/to/node_modules/lism-css/scss/setting' with (
  $breakpoints: (
    'sm': '400px', // smサイズを変更する
    'xl': '1200px', // xlサイズを追加で定義する
  ),
  $common_support_bp: 'md',  // デフォルトでは mdサイズまでのユーティリティクラスしか生成しないようにする
  $is_container_query: 0, // media query で出力する
  $props: (
    'fz': (
      // fzのユーティリティクラスに対して !important を出力する
      important: 1,
    ),
    'h': (
      // 'h'のブレイクポイント対応クラスを出力しないようにする
      bp: 0,
    ),
    'fx': (
      // 'fx'のユーティリティクラスもブレイクポイントに対応させる
      bp: 1,
    ),
    'p': (
      // 'p'のユーティリティクラスは、xl サイズまで出力する
      bp: 'xl',
      //.-p:box{padding:2em} を出力
      utilities: ('box': '2em'),
    ),
  )
);

// lism の scssファイルを読み込む
@use '../path/to/node_modules/lism-css/scss/all';

Astroの場合は../path/to/node_modules/は不要です。