Customize

This content is not available in your language yet.

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

`@layer`をオフにする

lism-css/main.css(lism-css/scss/main.scss)ではなく、lism-css/main_no_layer.css(lism-css/scss/main_no_layer.scss)を読み込むことで、@layerをオフにすることができます。

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

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

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

// @layer を使わないようにするなら main ではなく main_no_layer を読み込んでください
// @use '../path-to/node_modules/lism-css/scss/main_no_layer';

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

カスタマイズ例

ブレイクポイントを変更する

// 設定カスタマイズ
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $breakpoints: (
    'sm': '400px', // smサイズを変更する
    'xl': '1200px', // xlサイズを追加で定義する
  ),
  $common_support_bp: 'lg',  // lgサイズまでのユーティリティクラスを生成する
);

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

コンテナクエリではなくメディアクエリを使用する

// 設定カスタマイズ
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $is_container_query: 0, // media query で出力する
);

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

// @layer を使わないようにするなら以下を読み込んでください
// @use '../path-to/node_modules/lism-css/scss/main_no_layer';

Prop Classの出力をカスタマイズする

// 設定カスタマイズ
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $default_important: 1, // Prop クラスに対してデフォルトで !important を付与する
  $props: (
    'fz': (
      // fzのユーティリティクラスに対して !important を出力する
      important: 1,
    ),
    'h': (
      // 'h'のブレイクポイント対応クラスを出力しないようにする
      bp: 0,
    ),
    'i': (
      // 'inset'のクラスもブレイクポイントに対応させる
      bp: 1,
    ),
    'p': (
      // 'p'のユーティリティクラスは、 lg サイズまで出力する
      bp: 'lg',
      //.-p:box{padding:2em} を出力
      utilities: ('box': '2em'),
    ),
  )
);

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

ビルド処理について

ビルドコードによって、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);
      });
  }