SCSS Customization

You can adjust the generated classes and breakpoints by overriding SCSS variables. This approach is for setups that don’t use lism.config.js and @lism-css/plugin. Values you add on the SCSS side don’t reach components, so use them from components either by writing the class directly in your HTML or by forcing the class output with :value notation (such as p=":box") — see below.

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

Override the setting variables, then 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 values such as -p:box.

@use '../path-to/node_modules/lism-css/scss/setting' with (
  $props: (
    'fz': (
      important: 1,
      // Add !important to fz's Property Class
    ),
    '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. 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.

Using added values in components

Unlike lism.config.js, values you add in SCSS don’t reach components. To use them from a component, force the class output with the Lism Props :value notation, or write the class directly in your HTML.

@use '../path-to/node_modules/lism-css/scss/setting' with (
  $props: (
    'p': (
      utilities: (
        'box': '2em',
      ),
    ),
    'lts': (
      utilities: (
        '2xl': 'var(--lts--2xl)',
      ),
    ),
  )
);

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

// Append token definition
@layer lism-base {
  :root {
    --lts--2xl: 0.15em;
  }
}

<Box p=":box" lts=":2xl">...</Box>

↓ Output

<div class="l--box -p:box -lts:2xl">...</div>

For a small number of additions, you can skip SCSS and hand-write the rules directly in global.css instead.

@layer lism-base {
  :root {
    --lts--2xl: 0.15em;
  }
}

/* Property Classes are not wrapped in @layer */
.-lts\:2xl {
  letter-spacing: var(--lts--2xl);
}

Enabling xs / xl breakpoints

xs / xl, which are disabled by default, can be enabled by specifying sizes in $breakpoints. For the default values, the effect on CSS size, and pairing with CSS Purge, see lism.config.js.

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

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

CSS output order

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).