Providing Default Values for SCSS Variables

Image by Thor Deichmann from Pixabay

Scenario

We want to create default SCSS variables in default.scss that can be overridden as needed.

Approach

First create defaults.scss:

$primary: pink !default;

.u-text-color {
color: $primary;
}

Then create override.scss to override the default.

$primary: gray;

When overrides.scss is imported first, those values will be used, and if values are not provided the default values will come into effect:

@import "overrides.scss";
@import "defaults.scss";

So in this case the css output will contain:

.u-text-color {
color: gray;
}

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SPA SEO with Lambda@Edge

Meeb Master BSC Bridging Announcement

AGIC with private IP only — How to overcome the limitation

Introducing Nx Cloud 2.0

Take a ‘Screenshot’ Of a Certain Widget in Flutter

Learn By Doing: Python Hangman Game

WTF is the Stack Data Structure?

Deep down to the Ansible handlers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Indexing Typescript Todo Entities with Lunr

Fundamental Type Guards

Using Angular services in Storybook

Designing a scalable design system with angular and react implementations — part 2 — Nx & Core…