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

A guide to analyzing changes in an APK using GitHub Actions and Diffuse

Exploring itertools module in Python

Nginx + PHP7 Alongside IIS on Windows System

How to Install Software in Windows 10 Without Admin Rights

TCP — IP packet flow

How to use SQL in Jupyter Notebook

Managing Secrets Within Your Development Environment

10 Most Useful VS Code Extensions For Web Development

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

Taking a Query Snapshot of a Firefly Semantics Slice Entity Store

Journey of DLithe Bootcamp .NET Full Stack Developer | Week 3(Feb7-Feb12)

Docker Component Basics

Top 9 Most Popular Angular JS Frameworks For The Year 2022!