Customize

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

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

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

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

@use '../path/to/node_modules/@lism-ui/core/scss/query' with (
  $breakpoints: (
    'sm': '480px',
    'md': '720px',
    'lg': '960px',
    'xl': '1200px',
  ),
  $support_bp: 'lg',
  $is_container_query: 1,
);

@use '../path/to/node_modules/@lism-ui/core/scss/setting' with (
  $props: (
    ...
  )
);

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

↓カスタマイズ例

@use '../path/to/node_modules/@lism-ui/core/scss/query' with (
  $breakpoints: (
    'sm': '400px', // smサイズを変更する
  ),
  $support_bp: 'md',  // デフォルトでは mdサイズまでのユーティリティクラス
  $is_container_query: 0, // media query で出力する
);

@use '../path/to/node_modules/@lism-ui/core/scss/setting' with (
  $props: (
    'fz': (
      important: 1, // fzのユーティリティクラスに対して !important を出力する
    ),
    'p': (
      bp: 'xl', // 'p'のユーティリティクラスは、xl サイズまで出力する
    ),
    'fx': (
      bp: 1, // 'fx'のユーティリティクラスもブレイクポイントに対応させる
    ),
  )
);

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

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