SCSS Customization

You can adjust the generated classes and breakpoints by overriding SCSS variables. This approach is for plain SCSS setups and other cases where you are not using the Vite / Astro plugin.

Overridable variables

The variables defined in lism-css/scss/_setting.scss can be overridden via @use ... with (...).

@use 'sass:map';
@use 'sass:string';
@use './prop-config.gen' as props;

// $default_important: lism.config.js の defaultImportant を prop-config.gen 経由で既定値に読む。
// `@use ... with ($default_important: ...)` で明示上書きされた場合は、!default が無効化されそちらが優先される。
$default_important: props.$default_important !default;
$is_container_query: 1 !default;

// breakpoints: サイズ 0 は「無効」（_query.scss の bp-up / bp-down がスキップする）。
$breakpoints: () !default;
$breakpoints: map.merge(props.$breakpoints, $breakpoints);

$props: () !default;
$props: map.deep-merge(props.$props, $props);

Basic format

After defining your overrides, import lism-css/scss/main.scss to apply the customized styles.

// 1. Override configuration variables
@use '../path-to/node_modules/lism-css/scss/setting' with (
  $breakpoints: (
    'sm': '400px', // individual keys can be overridden
  ),
  $is_container_query: 0,   // 1 = container query / 0 = media query
  $default_important: 1,    // 0 / 1
  $props: (
    // Per-Prop settings (see below)
  )
);

// 2. Load main.scss (use main_no_layer.scss to disable @layer)
@use '../path-to/node_modules/lism-css/scss/main';

Customizing individual $props

For each Property Class, you can limit which breakpoints are generated or add utility classes.

@use '../path-to/node_modules/lism-css/scss/setting' with (
  $props: (
    'fz': (
      important: 1,
      // Output !important for fz utility classes
    ),
    'h': (
      bp: 0,
      // Disable breakpoint-responsive classes for 'h'
    ),
    'p': (
      bp: ('sm', 'md'),
      // Limit breakpoint support classes for 'p' to sm / md only
      utilities: (
        'box': '2em',
      ),
      // Add .-p:box{--p:2em}
    ),
  )
);

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

The following values are accepted for bp:

The list form is for cases where you want to restrict a specific prop to certain breakpoints. When specifying this in lism.config.js, use an array: bp: ['sm', 'md']. Note that including a disabled breakpoint (one with no size defined in $breakpoints, such as xs or xl by default) in the list will produce no output for that entry, and a warning will be emitted at build time.

Enabling xs / xl breakpoints

The default breakpoints are xs: 0 (disabled) / sm: 480px / md: 800px / lg: 1120px / xl: 0 (disabled). A value of 0 means “disabled — no CSS query is output”.

If you are using lism.config.js, specifying breakpoints there is the easiest approach (see lism.config.js). For projects using SCSS directly, you can enable xs / xl by overriding the $breakpoints SCSS variable:

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

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

Notes on SCSS compilation

When you compile SCSS directly, the order of your own styles and the lism-css styles in the final CSS may differ from what you expect. A broken order changes how specificity and the cascade resolve, which can apply styles you did not intend — so pay attention to your @use order (whether you place your own styles before or after loading lism-css).