Use Sass Variables in CSS with Interpolation

SassPosted on

With Sass, we can access many cool features that can help us develop and maintain more robust solutions. One handy tool is the variables.

Today, we have well-supported CSS variables that are usually better, but depending on the system and the solution, Sass variables can be handy.

If you want to use any Sass expression or variable in your code, you can use the #{…} syntax to interpolate it. An excellent example is when you write BEM syntax and want reference back to the parent with the ampersand (&):


.section {
  $this: &;

  &--color {
    #{$this}__body {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
    }
  }
}

In this case, we store the root element value in the $this variable which we can use later in nested code (the & is scoped) to make our code DRY.

We can also use our sass variables in a calc() function:


$ratio: 1.333;

h3 {
    font-size: calc(1rem * #{ratio});
}

Need a web developer? Maybe we can help, get in touch!

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.