Knowledgebase

Using Sass and Preprocessors Print

  • frontenddevelopment, frontend, guide, howto, solution, zillionkinghost, hosting, support
  • 0

Extending CSS.

WHAT THEY PROVIDE

Variables Nesting Mixins and functions Splitting into files, combined at build Loops and conditions

WHAT THE PLATFORM NOW PROVIDES NATIVELY

Custom properties, which are variables that work at runtime Nesting, in current browsers

WHAT THAT MEANS

Less of a preprocessor is required than previously.

WHAT THEY STILL PROVIDE

Mixins Functions and computation at build time File organisation Loops for generating repetitive rules

WHAT TO PREFER FOR THEMING

Custom properties.

WHY

They can change at runtime, which build-time variables cannot.

WHAT TO BE CAREFUL WITH

Nesting deeply, which produces high specificity invisibly Mixins generating large amounts of duplicated output Complex logic in stylesheets

WHAT TO LIMIT NESTING TO

A small number of levels.

WHAT TO ORGANISE

Files by purpose: settings, base, layout, components, utilities.

WHAT TO CHECK

The size of the compiled output.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot