Use Sass Variables in CSS with Interpolation
source link: https://pineco.de/snippets/use-sass-variables-in-css-with-interpolation/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
We use cookies for commenting and analytics. For more details, please visit our privacy page.
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});
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK