How to use scss variable in css-CodePudding

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

CodePudding user response：

You've confusing:

SCSS variables and CSS variables (the document you link to talks about the latter)
Setting and using CSS variables

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>

CodePudding user response：

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 >Hey</p>

Usage of SASS variables:

$sb-font-size: 38px;

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

CodePudding user response：

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

then acces it

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