'How to use scss variable in css

I need to change the font size using a variable as prescribed by the author. I am not sure on how to do it. The author claims tha t it ,can be done using css.

This is my css line

font-size:var(--sb-font-size:38px);

https://github.com/MurhafSousli/ngx-sharebuttons/blob/master/CHANGELOG.MD

htmlcssangularsass


Solution 1:[1]

You've confusing:

Put the code to set a CSS variable in a ruleset, not in the middle of the code to read a CSS variable.

/* Set a variable */

:root {
  --sb-font-size: 38px;
}


/* Use a variable */

span {
  font-size: var(--sb-font-size);
}
<p>Some <span>text</span></p>

Solution 2:[2]

Sass/SCSS variables are all compiled away. This means you would see just the value in your compiled CSS. By contrast CSS custom properties "variables" are actually included in the CSS output.

More information about...

Usage of CSS custom properties "variables":

:root {
  --sb-font-size: 38px;
}

.your-element {
  font-size: var(--sb-font-size);
}
<p class="your-element">Hey</p>

Usage of SASS variables:

$sb-font-size: 38px;

.your-element {
  font-size: $sb-font-size:
}

Solution 3:[3]

:root {
 --sb-font-size: 38px;
}

then acces it

.test {
  font-size: var(--sb-font-size);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quentin
Solution 2
Solution 3 Moataz Bahaa

Related Questions