· Michał Roman · Tutorials · 6 min read
How to effectively use CSS variables and integrate them with the Sass preprocessor for more flexible and scalable stylesheets
The article shows examples of how to effectively use css variables
The introduction of CSS variables brought many benefits, allowing for dynamic value management in stylesheets. However, to fully harness their potential, it’s worth combining them with the Sass preprocessor, which has long been a tool for more advanced and organized approaches to CSS. In this article, we will discuss how to effectively use CSS variables and integrate them with Sass to create flexible and scalable stylesheets.
CSS Variables - Introduction
CSS variables, also known as custom properties, enable storing values in one place and reusing them throughout the stylesheet. They allow for easy updating and managing of colors, sizes, and other values in CSS.
Basics of CSS Variables
CSS variables are defined using the --variable
syntax and referenced using the var()
function.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}
Advantages of CSS Variables
Flexibility: Variables can be changed in real-time using JavaScript.
Browser compatibility: Works in all modern browsers.
Variable hierarchy: Ability to override variables in the context of different elements.
A few examples
Flexibility
One of the most powerful features of CSS variables is their ability to be dynamically changed using JavaScript. This flexibility allows for real-time updates to styles without needing to reload the entire stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
--primary-color: #3498db;
}
body {
color: var(--primary-color);
}
.button {
background-color: var(--primary-color);
}
</style>
</head>
<body>
<button class="button" onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
}
</script>
</body>
</html>
In this example, clicking the button changes the --primary-color
variable to a new value, immediately updating the text and button colors.
Browser Compatibility
CSS variables work in all modern browsers, providing a consistent experience across different platforms without the need for fallbacks or polyfills.
:root {
--primary-color: #3498db;
}
body {
color: var(--primary-color);
}
This code snippet will render the same in Chrome, Firefox, Safari, Edge, and other modern browsers, ensuring consistent styling.
Variable Hierarchy
CSS variables can be overridden in the context of different elements, allowing for scoped styling adjustments. This hierarchical nature makes it easy to manage styles locally without affecting global settings.
:root {
--primary-color: #3498db;
}
.section-one {
--primary-color: #e74c3c;
}
.section-two {
--primary-color: #2ecc71;
}
body {
color: var(--primary-color);
}
.section-one {
color: var(--primary-color);
}
.section-two {
color: var(--primary-color);
}
In this example, the primary color is globally set to #3498db
. However, .section-one
and .section-two
override the --primary-color
variable locally, allowing for different colors in different sections without altering the global variable.
Introduction to Sass
Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that extends the capabilities of CSS, offering variables, nesting, inheritance, and many other advanced features.
Basics of Sass
Variables in Sass are defined using the $
symbol.
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;
body {
color: $primary-color;
font-size: $font-size;
}
Advantages of Sass
Advanced features: Mixins, functions, inheritance.
Modularity: Ability to split styles into smaller files and import them.
Nesting: Better code organization through nested selectors.
Examples Showcasing Sass Advantages
Advanced Features: Mixins
Mixins in Sass allow you to create reusable chunks of code. Here’s how you can use mixins to manage CSS variables more effectively.
// Define a mixin for setting CSS variables
@mixin set-css-variable($name, $value) {
--#{$name}: #{$value};
}
// Use the mixin to set variables
:root {
@include set-css-variable('primary-color', $primary-color);
@include set-css-variable('secondary-color', $secondary-color);
@include set-css-variable('font-size', $font-size);
}
Modularity: Splitting Styles
Sass allows you to break your styles into smaller, manageable files and import them into a main stylesheet. This modular approach helps in managing CSS variables.
// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--font-size: #{$font-size};
}
// _base.scss
body {
color: var(--primary-color);
font-size: var(--font-size);
}
// _header.scss
.header {
background-color: var(--secondary-color);
}
// main.scss
@import 'variables';
@import 'base';
@import 'header';
Nesting: Better Code Organization
Nesting in Sass allows you to structure your CSS more logically, making it easier to manage and read.
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--font-size: #{$font-size};
}
body {
color: var(--primary-color);
font-size: var(--font-size);
.header {
background-color: var(--secondary-color);
.title {
color: var(--primary-color);
}
.subtitle {
color: var(--secondary-color);
}
}
}
Integrating CSS Variables with Sass
While Sass offers powerful features, CSS variables can add an additional layer of flexibility, especially in dynamic applications.
Defining CSS Variables in Sass
In Sass, CSS variables can be defined at the :root
level, ensuring their availability throughout the document.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}
Using Sass to Manage CSS Variables
Sass allows managing the values of CSS variables in a more organized way. For example, you can use Sass to define base values and then assign them to CSS variables.
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--font-size: #{$font-size};
}
Mixing Sass and CSS Variables
You can also mix Sass variables and CSS variables in styles, allowing for flexibility depending on the project’s needs.
$primary-color: #3498db;
:root {
--primary-color: $primary-color;
}
.button {
background-color: var(--primary-color);
border: 1px solid $primary-color;
}
Project Example
Let’s assume we are creating a complex theme for a website with multiple sections, buttons, and typography settings. We can define variables in Sass and then assign them to CSS variables.
// Sass variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$tertiary-color: #e74c3c;
$font-size-base: 16px;
$font-size-large: 20px;
$font-size-small: 14px;
$spacing-unit: 8px;
// CSS variables
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--tertiary-color: #{$tertiary-color};
--font-size-base: #{$font-size-base};
--font-size-large: #{$font-size-large};
--font-size-small: #{$font-size-small};
--spacing-unit: #{$spacing-unit}px;
}
// Global styles
body {
color: var(--primary-color);
font-size: var(--font-size-base);
margin: var(--spacing-unit);
}
// Header styles
.header {
background-color: var(--secondary-color);
padding: calc(var(--spacing-unit) * 2);
.title {
font-size: var(--font-size-large);
color: var(--tertiary-color);
}
.subtitle {
font-size: var(--font-size-small);
color: var(--secondary-color);
}
}
// Button styles
.button {
background-color: var(--primary-color);
color: #fff;
padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
border: none;
border-radius: var(--spacing-unit);
&:hover {
background-color: var(--tertiary-color);
}
&--secondary {
background-color: var(--secondary-color);
&:hover {
background-color: var(--primary-color);
}
}
}
// Main content styles
.main-content {
padding: calc(var(--spacing-unit) * 3);
.section {
margin-bottom: calc(var(--spacing-unit) * 4);
&--highlighted {
background-color: var(--tertiary-color);
padding: var(--spacing-unit);
}
}
}
In this example, we have defined a set of variables in Sass for colors, font sizes, and spacing units. These variables are then assigned to CSS variables in the :root
selector. The global styles for the body
element, header, buttons, and main content sections make use of these CSS variables, allowing for easy updates and management.
Benefits of This Approach
Consistency: Using variables ensures that colors, font sizes, and spacings are consistent across the entire project.
Scalability: Changes can be made in one place, affecting all elements that use the variables.
Flexibility: CSS variables can be dynamically changed with JavaScript, enabling real-time updates without reloading stylesheets.
Modularity: The project is organized into smaller, manageable parts that can be maintained independently.
Summary
Integrating CSS variables with the Sass preprocessor allows for creating flexible and scalable stylesheets. CSS variables provide dynamic value management and real-time updates, while Sass adds powerful code management features. Combining these two technologies enables creating more organized, easier to manage, and flexible styles that can be easily updated and extended.
Introducing these techniques into your daily CSS workflow improves style and structure management of the project, resulting in a more efficient and enjoyable process of creating websites and web applications.