Sass variable change to css variable?

Question

How i can do this?

// style.scss

$primary-color: #dc4545;

div{
    background : $primary-color;
}

Try to do this:

div{
    background : var(--primary-color)
}

Is this possible in any way?

Interesting question, here's a tutorial which may help: codepen.io/jakealbaugh/post/css4-variables-and-sass — admcfajn
– admcfajn, Commented Feb 4, 2019 at 17:54

jerrylow · Accepted Answer · 2019-02-04 18:00:12Z

6

You can define global variables on the :root:

:root {
  --primary-color: #dc4545; 
}

div {
  background: var(--primary-color); 
}

Edit: Or were you trying to mix and match?

$primary-color: #dc4545;

:root {
  --primary-color: #{$primary-color}; 
}

div {
  background: var(--primary-color); 
}

answered Feb 4, 2019 at 18:00

jerrylow

2,6391 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Durga prasad patra Over a year ago

i know how much variable are used in this project . But is not possible to change one by one because those variable are used more then one file so is that any other way to convert .

jerrylow Over a year ago

Unfortunately not the SASS variables exists pre-compiled only so for CSS to recognize the variable you'll need to convert it to be defined on CSS first.

Md. A. Barik · Accepted Answer · 2019-02-04 18:07:16Z

-1

First of all :root and html selector basically same thing but :root with higher specificity than html selector

html {
  
}

/*****exactly :root and html selector are same but with higher specifity(:root)*****/
:root {
  --color-primary-light: #FF3366;
  --color-primary-dark: #BA265D;
  --bakcground-color: #fff;
  --default-font-size: 16px;
  --color: blue;
  }
  
  /****************How to implement***************/
  .root-selector {
    background-color: var(--background-color);
    font-size: var(--default-font-size);
    color: var(--color);
  }

<div class="root-selector">
  Thank you buddy
</div>

answered Feb 4, 2019 at 18:07

Md. A. Barik

4576 silver badges12 bronze badges

1 Comment

Temani Afif Over a year ago

:root with higher specificity --> what do you mean by this? root will select nothing, so there no specificity here

Collectives™ on Stack Overflow

Sass variable change to css variable?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related