Academy / Advanced Level: HTML and CSS

CSS Preprocessors: SASS/SCSS

Variables in SASS/SCSS

One of the most useful features of SASS/SCSS is variables. Variables allow you to store values (such as colors, fonts, or spacing) that can be reused throughout your stylesheet. This makes it easy to update your design by changing a single value.

Example of Variables:

$primary-color: #3498db;
$font-stack: 'Helvetica, Arial, sans-serif';
$padding: 10px;

body {
  color: $primary-color;
  font-family: $font-stack;
  padding: $padding;
}

In this example:

• $primary-color, $font-stack, and $padding are variables that store values.
• These variables can be reused throughout your styles, making your code more maintainable.