Customize

This content is not available in your language yet.

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: 'md',
  $is_container_query: 1,
  $layer_mode: 1,
  $props: (
    ...
  )
);

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

↓カスタマイズ例

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

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

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

ビルド処理について

ビルドコードによって、lism-cssのCSSと異なる内容になる可能性があります。

コアパッケージのビルド処理部分のコードは以下のようになっていますので、できるだけ同じ処理でビルドするようにしてください。

//sass
const sass = require('sass');

// postcss
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

  try {
    // dart sass コンパイル
    const compiledCSS = sass.compile(srcPath, {
      style: 'expanded', // 圧縮はcssnanoに任せる
    });

    // postcss実行
    postcss([autoprefixer, cssnano])
      .process(compiledCSS.css, { from: undefined })
      .then((postcssResult) => {
        writeCSS(distPath, postcssResult.css);
      });
  }