DEV Community

Discussion on: Combining SASS variables with CSS custom properties

View post
Collapse
 
peerreynders profile image
peerreynders •

SASS variables compile at runtime, CSS custom properties compile when they're used.

This is a key insight that is overlooked by many comparisons - and as such one that should be leveraged to the fullest extent.

Following the advice of Don’t do it at runtime. Do it at design time. Sass variables should really be the default. The move to CSS custom properties becomes only really necessary when the value can vary during runtime - as it will with a dynamic theme.

Another example I recently ran across:

<ul class="primary-navigation flex">
  <!-- ... -->
</ul>
Enter fullscreen mode Exit fullscreen mode

where

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}
Enter fullscreen mode Exit fullscreen mode

and later

@media (max-width: 35em) {
  .primary-navigation {
    --gap: 2em;
  }
}
Enter fullscreen mode Exit fullscreen mode

Now the local override is nice if somewhat orphaned as it assumes that the flex utility is being used. And given that width can change at runtime using a CSS custom property seems appropriate.

However consider the following:

@mixin flex($gap: 1rem) {
  display: flex;
  gap: $gap;
}

.primary-navigation {
  @include flex;

  /* ... */*
}

@media (max-width: 35em) {
  .primary-navigation {
    @include flex(2em);

    /* ... */
  }
}
Enter fullscreen mode Exit fullscreen mode
  • "no repetition" as flex is captured as a mixin.
  • flex is tightly coupled to primary-navigation anyway and now that's clear from the rule.
  • Having the media query at the end source order will lead to the desired override.
  • Everything is set at "design time" - there is no runtime variation that needs to be supported by a CSS custom property that changes at runtime.