Creating Stylesheet Function Flags With Sass !default

!default is a Sass flag that signifies conditional project to a variable — it assigns a worth provided that the variable was beforehand undefined or null. Take into account this code snippet:

$variable: ‘take a look at’ !default;

To the Sass compiler, this line says:

Assign $variable to worth ‘take a look at’, however provided that $variable will not be already assigned.

Right here’s the counter-example, illustrating the opposite facet of the !default flag’s conditional conduct:

$variable: ‘whats up world’;
$variable: ‘take a look at’ !default;
// $variable nonetheless incorporates `whats up world`

After operating these two strains, the worth of $variable continues to be ‘whats up world’ from the unique project on line 1. On this case, the !default project on line 2 is ignored since a worth has already been supplied, and no default worth is required.

Model libraries and @use…with

The first motivation behind !default in Sass is to facilitate the utilization of favor libraries, and their handy inclusion into downstream purposes or tasks. By specifying a few of its variables as !default, the library can permit the importing utility to customise or alter these values, with out utterly forking the model library. In different phrases, !default variables primarily perform as parameters which modify the conduct of the library code.

Sass has a particular syntax only for this function, which mixes a stylesheet import with its associated variable overrides:

// model.scss
@use ‘library’ with (
$foo: ‘whats up’,
$bar: ‘world’
);

This assertion capabilities nearly the identical as a variable project adopted by an @import, like so:

// model.scss – a much less idiomatic manner of importing `library.scss` with configuration
$foo: ‘whats up’;
$bar: ‘world’;
@import ‘library’;

The essential distinction right here, and the rationale @use…with is preferable, is in regards to the scope of the overrides. The with block makes it crystal clear — to each the Sass compiler and anybody studying the supply code — that the overrides apply particularly to variables that are outlined and used within library.scss. Utilizing this technique retains the worldwide scope uncluttered and helps mitigate variable naming collisions between completely different libraries.

Most typical use case: Theme customization

// library.scss
$color-primary: royalblue !default;
$color-secondary: salmon !default:

// model.scss
@use ‘library’ with (
$color-primary: seagreen !default;
$color-secondary: lemonchiffon !default:
);

One of the ubiquitous examples of this characteristic in motion is the implementation of theming. A shade palette could also be outlined when it comes to Sass variables, with !default permitting customization of that shade palette whereas all different styling stays the identical (even together with mixing or overlaying these colours).

Bootstrap exports its whole Sass variable API with the !default flag set on each merchandise, together with the theme shade palette, in addition to different shared values akin to spacing, borders, font settings, and even animation easing capabilities and timings. This is among the greatest examples of the flexibleness supplied by !default, even in a particularly complete styling framework.

In fashionable internet apps, this conduct by itself may very well be replicated utilizing CSS Customized Properties with a fallback parameter. In case your toolchain doesn’t already make use of Sass, fashionable CSS could also be enough for the needs of theming. Nevertheless, we’ll look at use circumstances that may solely be solved by use of the Sass !default flag within the subsequent two examples.

Use case 2: Loading webfonts conditionally

// library.scss
$disable-font-cdn: false !default;
@if not $disable-font-cdn {
@import url(”https://fonts.googleapis.com/css2?household=Public+Sans&show=swap”);
}

// model.scss
@use ‘library’ with (
$disable-font-cdn: true
);
// no exterior HTTP request is made

Sass begins to indicate its power when it leverages its preprocessor look within the CSS lifecycle. Suppose the model library in your firm’s design system makes use of a customized webfont. It’s loaded from a Google’s CDN — ideally as fast because it will get — however nonetheless a separate cellular expertise crew at your organization has issues about web page load time; each millisecond issues for his or her app.

To unravel this, you may introduce an non-obligatory boolean flag in your model library (barely completely different from the CSS shade values from the primary instance). With the default worth set to false, you may examine this characteristic flag in a Sass @if assertion earlier than operating costly operations akin to exterior HTTP requests. Peculiar customers of your library don’t even must know that the choice exists — the default conduct works for them and so they mechanically load the font from the CDN, whereas different groups have entry to the toggle what they want to be able to nice tune and optimize web page loading.

A CSS variable wouldn’t be enough to resolve this drawback — though the font-family may very well be overridden, the HTTP request would have already gone out to load the unused font.

Use case 3: Visually debugging spacing tokens

View dwell demo

!default characteristic flags will also be used to create debugging instruments to be used throughout growth. On this instance, a visible debugging instrument creates color-coded overlays for spacing tokens. The muse is a set of spacing tokens outlined when it comes to ascending “t-shirt sizes” (aka “xs”/”extra-small” by means of “xl”/”extra-large”). From this single token set, a Sass @every loop generates each mixture of utility courses making use of that individual token to padding or margin, on each facet (high, proper, backside, and left individually, or all 4 without delay).

Since these selectors are all constructed dynamically in a nested loop, and single !default flag can swap the rendering conduct from customary (margin plus padding) to the coloured debug view (utilizing clear borders with the identical sizes). This color-coded view might look similar to the deliverables and wireframes which a designer may hand off for growth — particularly in case you are already sharing the identical spacing values between design and dev. Inserting the visible debug view side-by-side with the mockup might help rapidly and intuitively spot discrepancies, in addition to debug extra advanced styling points, akin to margin collapse conduct.

Once more — by the point this code is compiled for manufacturing, not one of the debugging visualization might be anyplace within the ensuing CSS since will probably be utterly changed by the corresponding margin or padding assertion.

Additional studying

These are just some examples of Sass !default within the wild. Refer to those documentation assets and utilization examples as you adapt the method to your individual variations.

!default documentation@use with documentationBootstrap variable defaultsA Sass default use case (thoughtbot)

The submit Creating Stylesheet Function Flags With Sass !default appeared first on CSS-Tips.

You may assist CSS-Tips by being an MVP Supporter.