SASS and SCSS Variables: Efficiently Manage Your CSS Styles

Have you ever found yourself repeatedly using the same CSS attribute values across your stylesheets? Or, do you dread the time-consuming task of updating these values when design changes occur? If so, CSS variables, also known as SASS and SCSS variables, are here to save the day!

Understanding CSS Variables

CSS variables, often referred to as SASS and SCSS variables in the context of preprocessors, allow you to store and reuse CSS attribute values throughout your file. By defining variables, you can easily modify the attribute values at one central location, and it will automatically reflect the changes wherever the variable is used in the file. This not only saves time but also enhances code maintainability and reduces the risk of inconsistencies.

SASS and SCSS Syntax for Variables

Let's explore the syntax for defining variables in SASS and SCSS:

SASS:

sass
$fontname: "Roboto", sans-serif
$fwnormal: 100
$fwbold: 600
$fcolor: #222222
$fsize: 2em
$divpadding: 5px
$divmargin: 5px

body 
  padding: 0
  margin: 0
  font-size: $fsize

div 
  padding: $divpadding
  margin: $divmargin
  color: $fcolor

p 
  font-family: $fontname
  font-size: $fsize
  font-weight: $fwnormal

.con-1 
  font-size: $fsize
  font-weight: $fwbold

p 
  font-weight: $fwnormal

SCSS:

scss
$fontname: "Roboto", sans-serif;
$fwnormal: 100;
$fwbold: 600;
$fcolor: #222222;
$fsize: 2em;
$divpadding: 5px;
$divmargin: 5px;

body {
  padding: 0;
  margin: 0;
  font-size: $fsize;
  div {
    padding: $divpadding;
    margin: $divmargin;
    color: $fcolor;
    p {
      font-family: $fontname;
      font-size: $fsize;
      font-weight: $fwnormal;
    }
  }
  .con-1 {
    font-size: $fsize;
    font-weight: $fwbold;
    p {
      font-weight: $fwnormal;
    }
  }
}

The Output CSS:

css
body {
  padding: 0;
  margin: 0;
  font-size: 2em;
}
body div {
  padding: 5px;
  margin: 5px;
  color: #222222;
}
body div p {
  font-family: "Roboto", sans-serif;
  font-size: 2em;
  font-weight: 100;
}
body .con-1 {
  font-size: 2em;
  font-weight: 600;
}
body .con-1 p {
  font-weight: 100;
}

Conclusion

CSS variables, offered by preprocessors like SASS and SCSS, are a powerful tool for creating more maintainable and efficient stylesheets. By defining variables for your common attribute values, you can easily update styles throughout your file without the need to search and modify each instance individually. Embrace the power of CSS variables in your projects and streamline your frontend development workflow like never before!