How to Assign CSS Variable Value to scss Variable or Expression

Question

I'm trying to build my own tiny scalable grid in CSS / scss. So far I found this decision:

:root {
  --page-width: 1170px;
  --gutter: 15px;
  --columns: 12;
}

.wrapper {
  max-width: var(--page-width);
  margin-right: auto;
  margin-left: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.row {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}

.col {
  display: block;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

Then I tried to use scss to shorten columns classes description (which at the same time will allow me to change number of columns in one single place in whole code - in CSS Variable --columns) like this

@for $n from 1 through var(--columns) {
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }
}

but it didn't work. The interesting detail is that when I change @for statement from @for $n from 1 throughvar(--columns)`` to @for $n from 1 through12 it compiles well. And there is no problem in compiling CSS-Variable inside @for body. .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); } compiles well into needed series of classes.

If I use scss variable $columns instead of CSS variable then I'll need to import my grid.scss file into all other scss files of the project.

It's my first question on StackOverflow, so let me know if any other details are needed.

Possible duplicate of [How to force integer in CSS Variable?](https://stackoverflow.com/questions/44524527/how-to-force-integer-in-css-variable) — Saurabh Gour, Jul 16 '17 at 13:26
Saurabh Gour, actually, yes. The question suggested by you covers my issue. But I would never found it under its current header "How to force integer in CSS Variable". — Andrii.Gaidai, Jul 16 '17 at 13:43
I've almost pressed `That solved my problem!` button, but then I read the explaining message. It says that `This will mark your question as a duplicate, directing future readers to the original question and preventing further answers from being posted here.` I do not mind to mark my question as a duplicate taking in general. But in this concrete case, I believe that `How to force integer in CSS Variable?` is not the point and not the main subject. Will my question remain visible, or it will be hidden? How will redirection happen? — Andrii.Gaidai, Jul 16 '17 at 14:06

Jakob E · Accepted Answer · 2021-09-28T10:01:18.357

11

CSS and SCSS variables are two very different things (please see this pen)

To make it work you need a static variable for SCSS to compile

// static (SCSS) variables used produce CSS output
$page-width: 1170px;
$gutter : 15px
$columns: 12;  

// dynamic (CSS) variables used at run-time
// note the values are interpolated 
:root {
  --page-width: #{$page-width};
  --gutter : #{$gutter};
  --columns: #{$columns};
}

//  the for loop is aimed at producing CSS output
//  ... why you need the static variable
@for $n from 1 through $columns {  
  
  //  the content becomes CSS output
  //  ... why you can use dynamic variables   
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }

}

edited Sep 28 '21 at 10:01

answered Jul 16 '17 at 11:45

Jakob E

4,476
1
18
21

1

Jacob E, thanks a lot. Your solution worked for me. Also, I viewed your pen and it gave me more understanding. – Andrii.Gaidai Jul 16 '17 at 13:34
This answer is no longer valid, check my answer for the working solution as of September 2021 – Silencer310 Sep 24 '21 at 17:39
I've updated the example to use interpolation – Jakob E Sep 28 '21 at 10:03

score 5 · Answer 2 · answered Sep 24 '21 at 17:44

The accepted answer is no longer valid. Newer versions of SASS require interpolation to be used for variables.

Refer here for more details

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}

score 2 · Answer 3 · answered Jul 16 '17 at 08:43

You need to use interpolation (eg. #{$var}) on your variable in order for Sass to treat it as a CSS property. Without it, you're just performing variable assignment.

@mixin w_fluid($property_name, $w_element, $w_parent:16) { #{$property_name}: percentage(($w_element / $w_parent)); }

How to Assign CSS Variable Value to scss Variable or Expression

3 Answers3