Skip to main content

CSS

Notes on writing CSS with Sass, plus a few selector patterns. For utility-first styling see Tailwind CSS.

Sass​

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor. It compiles to plain CSS and comes in two syntaxes:

ExtensionSyntaxNotes
.scssSCSS (Sassy CSS)Superset of CSS; uses braces and semicolons.
.sassIndentedWhitespace-significant; no braces or semicolons.

In VS Code, the Live Sass Compiler extension adds a Watch Sass button that compiles .scss/.sass to .css. While in Watching… mode it recompiles on every save. Pair it with Live Server to see changes in the browser.

Mixins​

A @mixin defines a reusable block of declarations, optionally parameterized, and @include pulls it into a selector.

@mixin example_base {
  // shared declarations
}

@mixin example_advanced($parameter1, $parameter2) {
  // declarations using $parameter1 / $parameter2
}

selector1 {
  @include example_base;                          // no arguments
}

selector2 {
  @include example_advanced(argument1, argument2); // with arguments
}

Parent selector (&)​

& refers to the enclosing selector, which lets you nest state and modifier rules next to the base rule.

.el-row {
  &.one-child {
    margin-bottom: 0;
  }
  &:last-child {
    margin-bottom: 1rem;
  }
}

After compilation:

.el-row.one-child { margin-bottom: 0; }
.el-row:last-child { margin-bottom: 1rem; }