Styling your sites with Sass...

A Sass utility framework built from placeholder selectors (%) instead of classes. Inspired by Bootstrap and Tailwind CSS, it aims for the best of both: you only load the styles you use, and you don't need npm.

You @extend the utilities you want onto your own selectors, so your markup stays semantic and your compiled CSS contains only the rules you actually use. If you would rather use classes in your HTML, a full build with every utility as a class is also available.

@use "sassy/src" as sassy

.card
    @extend %bf-p-3
    @extend %bf-p-5-md
    @extend %bf-rounded
    @extend %bf-shadow-1

.card-title
    @extend %bf-c-primary
    @extend %bf-font-weight-700

compiles to (alongside Normalize, Sassy's custom properties and the wrap classes):

.card-title {
  font-weight: 700;
}
.card {
  padding: 0.75rem;
}
.card {
  border-radius: var(--sassy-radius, 0.375rem);
}
.card {
  box-shadow: 0 0.125rem 0.25rem color-mix(in oklab, var(--sassy-shadow-colour, #000) 7.5%, transparent);
}
.card-title {
  color: var(--sassy-theme-primary);
}
@media (min-width: 768px) {
  .card {
    padding: 1.25rem;
  }
}

Is it for you?

Sassy suits:

• static sites and site generators, such as Hugo, Jekyll or Eleventy
• component libraries and design systems

It is less suited to:

• projects without a Sass build - Sassy needs one
• teams who want utility classes in their HTML - a class-based framework such as Tailwind will suit them better
• sites that must support older browsers - see Limitations

Getting started

Sass

Sassy needs Dart Sass 1.79.0 or later, the first version that understands oklch() colours. Add it to your project, for example as a git submodule:

git submodule add https://github.com/bfren/sassy.git sassy

then load it once, in your site's main stylesheet:

@use "sassy/src" as sassy

Use a single entry stylesheet per site: each stylesheet that loads Sassy also outputs Normalize and the font and theme custom properties on :root.

Classes

dist/full.css contains every utility as a class (.bf-p-3, .bf-col-4-md and so on), for use straight from HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bfren/[email protected]/dist/full.min.css" />

Script

Tabs and tooltips also need dist/sassy.js, a small script with no dependencies - see Components:

<script src="https://cdn.jsdelivr.net/gh/bfren/[email protected]/dist/sassy.min.js" defer></script>

Naming

Every placeholder follows the same pattern:

%bf-{utility}-{value}-{breakpoint}

The breakpoint is optional - see Responsive. Names use British spelling: centre, colour, capitalise, grey.

Module	Examples
Layout	%bf-p-2, %bf-mt-3, %bf-mx-auto, %bf-m-centre, %bf-width-50, %bf-viewheight-100, %bf-max-width-100, %bf-position-sticky, %bf-top-0, %bf-z-index-3, %bf-overflow-hidden
Display and flex	%bf-d-flex, %bf-d-none, %bf-flex-justify-between, %bf-flex-align-items-centre, %bf-flex-wrap-nowrap, %bf-flex-order-last, %bf-gap-3, %bf-opacity-50, %bf-visually-hidden
Colour	%bf-c-red-500, %bf-bg-sky-100, %bf-border-grey-300
Theme	%bf-c-primary, %bf-bg-error, %bf-border-ok
Text	%bf-body, %bf-font-size-4, %bf-font-family-mono, %bf-font-weight-700, %bf-line-height-single, %bf-text-align-centre, %bf-text-transform-upper
Border and corners	%bf-border-1, %bf-border-x-2, %bf-rounded, %bf-rounded-3, %bf-rounded-pill
Shadow	%bf-shadow-2 - coloured by --sassy-shadow-colour, see Theming
Grid	%bf-d-flex-row, %bf-col-6
Forms	%bf-form-control, %bf-form-select-small, %bf-form-check-input, %bf-form-switch, %bf-form-feedback-invalid

A few conventions:

This is the beginning of the README. Read the rest at the original. Read the full README ↗