CSS - Custom Properties

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);) .

Using CSS custom properties (variables) - CSS | MDN

Splitting - text animation library

A stylized "Splitting" with a banana mascot.
That's one determined banana.

Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!

DoubleDash your CSS

The previously impractical becomes easy with Splitting’s CSS Variables.

Comically Small

A shocking amount of features in a 1.5kb (minified & gzipped) package.

Progressively Enhance

Upgrade websites for modern browsers without breaking IE.

CSS Variables Are A Sometimes Food

This article makes the important point that CSS custom properties - a.k.a. variables - are not a complete and ideal replacement for variables in preprocessors like Sass: they have different but overlapping use-cases, and custom properties are far better if used when cascading or changing the values in the browser are needed, while preprocessor variables are more performant for the browser when they perform the same role as custom properties, i.e. not repeating oneself. There’s also the issue of browser support for custom properties, but that’s another story.

Bevelled box corners with CSS and Sass

A box with all four corners cut off at 45 degree angles.

Say you’re trying to pull off a design effect where the corner of an element are cut off. Maybe you’re a Battlestar Galactica fan? Or maybe you just like the unusual effect of it, since it avoids looking like a typical rectangle.


I suspect there are many ways to do it. Certainly, you could use multiple backgrounds to place images in the corners. You could just as well use a flexible SVG shape placed in the background. I bet there is also an exotic way to use gradients to pull it off.

But, I like the idea of simply taking some scissors and clipping off the dang corners. We essentially can do just that thanks to clip-path. We can use the polygon() function, provide it a list of X and Y coordinates and clip away what is outside of them.

Code language: CSS

.box {
  --notch-size: 2em;
  clip-path: polygon(
    0% var(--notch-size),
    var(--notch-size) 0%,
    calc(100% - var(--notch-size)) 0%,
    100% var(--notch-size),
    100% calc(100% - var(--notch-size)),
    calc(100% - var(--notch-size)) 100%,
    var(--notch-size) 100%,
    0% calc(100% - var(--notch-size))

I’ve written a Sass mixin to make this easier to reuse:

Code language: Sass

/// Bevel all four corners of an element by the specified amount.
/// This is based on the linked article by Chris Coyier.
/// @author Matei "Ambient.Impact" Stanca
/// @link https://ambientimpact.com/web/snippets/bevelled-box-corners-with-css-and-sass
/// @param {Number} $size - The amount to bevel by.
@mixin bevel($size) {
  clip-path: polygon(
    // Top left corner points.
    0%          #{$size},
    #{$size}    0%,
    // Top right corner points.
    calc(100% - #{$size}) 0%,
    100%        #{$size},
    // Bottom right corner points.
    100%        calc(100% - #{$size}),
    calc(100% - #{$size}) 100%,
    // Bottom left corner points.
    #{$size}    100%,
    0%          calc(100% - #{$size})

You can use it like so:

Code language: Sass

.box {
  // Really simple version:
  @include bevel(1em);
  // If you want to use CSS custom properties for browsers that support them,
  // you can do so. The benefits are that these cascade like other CSS
  // properties, so they can be inherited, and modified in real time. This must
  // come after the simple version.
  --bevel-amount: 1em;
  @include bevel(var(--bevel-amount));

CSS Custom Property fallbacks

Here’s a thing I didn’t know you could do with var(): like font stacks, you can specify a fallback value if the specified custom property isn’t defined, like so:

Code language: CSS

body {
  color: var(--color-text-default, black); 

Mind you, this only applies to browsers that understand custom properties. To provide a fallback for browsers that don’t, use the tried and tested method of defining the fallback first and then the newer property declaration:

Code language: CSS

body {
  color: black;
  color: var(--color-text-default, black);