CODEWITHSUNDEEP
csssassscss-mixins
Text Error
Text Error

Reputation: 41

Import variable from css to scss

The idea is simple, declare a variable in .css and use it on .scss file.

index.css

:root {
  --primary: rgb(65, 120, 95);
}

variable.scss

@import './index';

$color: var(--primary);


.my-color: {
  color: $color
}

is not working. I do know that if you do

$primary: rgb(65, 120, 95);

.my-color: {
  color: $color
}

is working.

But I want to set the variables in css file. Thank you

Upvotes: 2

Views: 2810

Answers (1)

Matt Croak
Matt Croak

Reputation: 2888

You cannot use CSS variables this way. You can import a CSS file for reference in your SCSS file but cannot access the CSS variables directly. You can only share variables between SCSS files.

What you are better off doing is making index.css into another SCSS file, and then declare your variables in variable.scss. Then import variable.scss into index.scss which will now have access to all variables. You would just need to change the files being referenced so that they are pointing to index.scss.

See below.

variables.scss

$primary: rgb(65, 120, 95);

index.scss

@import "/variables";

.my-color: {
  color: $primary
}

Upvotes: 1

Related Questions