Customizing

The SassMods styles are written to enable customizing with either Sass variable overrides when compiling or using CSS variables both before and after compiling. The variables are self-contained within the associated style module and can be viewed in the source code examples on the docs pages.

Sass variables

The Sass variables used for property values can be customized using overrides with a @use map as follows:

@use 'sassmods/scss/sassmods' with (
  $h1-font-size: 2rem,
  $button-radius: 0.25rem,
  $blue: royalblue,
);

Overrides need to be loaded prior to SassMods and can included in a seperate document:

@use "overrides";
@use "sassmods/scss/sassmods" as *;
@include blue-variables-css;
@include typography-css;
@include forms-buttons-css;

As a module they can also be included with the styles:

@use 'sassmods/scss/sassmods' with (
  $h1-font-size: 2rem,
  $button-radius: 0.25rem,
  $blue: royalblue,
);
@use "sassmods/scss/sassmods" as *;
@include blue-variables-css;
@include typography-css;
@include forms-buttons-css;

CSS variables

A majority of the styles use property values inherited through fallbacks for empty CSS variables, as mentioned above and demonstrated with the example the variables are self-contained within the associated style module:

$h1-font-size:  var(--h1-fs, 2.125rem) !default;
$h2-font-size:  var(--h2-fs, 1.75rem) !default;
etc.

As the CSS variables have no preset values they can be used globally for theme design or to create localised styles:

:where(html) {
  --h1-fs: 2.2rem;
  --h2-fs: 1.8rem;
}
header {
  --h1-fs: 3rem;
}
header + h2 {
  --h2-fs: 2rem;
}

Or used after compiling with inline HTML styles to customize specific elements:

<h1 style="--h1-fs:4rem;">Hello world!</h1>

The color utilities and theme colors both leverage the CSS variables this way to create the colored options for SassMods styles, components and utilities. As the only integrated modules included with SassMods both have been designed to demonstrate the scoping flexibility of using fallback values instead of preset root level variables.

If the fallback method doesn't suit your styles, or you want to change the variable names and/or default fallback values, you can customize them as required using the Sass variable overrides as described above.

More information

As SassMods is not pre-compiled and all the styles are self-contained there are a lot of different ways the Sass can be used and customized that are currently not documented here, for more information see the Sass docs website.