Using SassMods

SassMods are self-contained Sass documents ready to be used and customized in custom SCSS, the source files are available for downloading or cloning from Github and requires Dart Sass v1.23.0+ for compiling.

Source files

Module mixins

The styles are all configured as individual Sass @mixin to enable selectively compiling them where required in custom SCSS using @include. To use SassMods load sassmods.scss in custom SCSS using the @use rule with the * namespace value then include the mixins required anywhere below.

@use "sassmods/scss/sassmods" as *;
@include blue-variables-css;
@include typography-css;
@include accordions-css;
@include borders-css;

The individual mixin names for each of the modules are provided on the docs pages with instructions on usage as per the example above. The pages also showcase the different elements as styled with HTML examples where required, and include the source code for each module demonstrating how the styles are compiled.

Responsive modifiers

The majority of the layout utilities and some of the text and border utilities also include responsive modifier mixins to include in custom breakpoints, each uses the following naming convention for the responsive classes:

.block | .block-xl | .block-lg | .block-md | .block-sm | .block-xs

Breakpoint sizes are then determined in custom SCSS and responsive modules included only where required:

@use "sassmods/scss/sassmods" as *;
@include block-css;

@media (width <= 1024px) {
  @include block-md-css;
}
@media (width <= 480px) {
  @include block-xs-css;
}

Sass variables

The Sass variables in each module can be used to create custom styles, with modules like the icons the Sass mixins used to compile the styles can also be combined with the variables to create custom utilities and components.

@use "sassmods/scss/sassmods" as *;

.menu a {
  --ico: #{$yellow-4};
  color: $yellow-4;
  padding: $padding-2;
  background-color: $blue-6;
}

.menu a:before {
  @include icon-mask;  
}

.menu .home {
  --svg: #{$house};
}

.menu .profile {
  --svg: #{$user};
}

.menu .contact {
  --svg: #{$email};
}

.menu a:is(:hover, :focus) {
  --ico: #{$yellow-6};
  background-color: $blue-7;
}

As demonstrated if using Sass variables for CSS variable values the #{} interpolation is required to embed the styles. See the Sass docs about interpolation and custom properties (CSS variables) for more information.