CSS variables aren't properly compiled

[TakhirMamirov]

I have set up the latest version of node-sass compiler (4.5.2 at the moment). Everything in scss is compiled perfectly except for CSS variables. Accordingly to this: sass/libsass#2076 variables compilation should already be in there if SASS 3.5 is used. Am I missing something to make variables compiled correctly?

[xzyfer]

Please provide an example

…

On 4 Apr. 2017 12:16 am, "Takhir" ***@***.***> wrote: I have set up the latest version of node-sass compiler (4.5.2 at the moment). Everything in scss is compiled perfectly except for CSS variables. Accordingly to this: sass/libsass#2076 <sass/libsass#2076> variables compilation should already be in there if SASS 3.5 is used. Am I missing something to make variables compiled correctly? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1943>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWLHL1WR7ABT0X03GIN2imiWs-CpBks5rsP8pgaJpZM4MxmXd> .

[TakhirMamirov]

For instance, I would like this:

 #datatable {            
            --paper-datatable-column-header: { 
                 font-size: 16px;                 
                 color: #34495e; 
                 background-color: #fbfbfb;                       
            }
}

to be compiled correctly. By default, after SASS compilation it's transformed into:

 #datatable {            
            --paper-datatable-column-header-font-size: 16px; 
            --paper-datatable-column-header-color: ... etc
}

which, apparently, doesn't work.

[nschonni]

@TakhirMamirov the issue in libsass you've linked to hasn't been implemented yet. This would need to be implemented there and then have the libsass version of node-sass updated for this to be supported.

[xzyfer]

The LibSass issue sass/libsass#2076

[Pickra]

The libsass issue reported by @xzyfer has been updated

[xzyfer]

Fixed in 4.8.0

[madmoizo]

Well, I'm using webpack and css variable like:

:root {
  --primary: $primary
}

$primary is not replaced with its value in v4.8.x
It works in v4.7.x

[xzyfer]

Please search the identical closed issues.

…

On Sun., 8 Apr. 2018, 10:43 am frlinw, ***@***.***> wrote: Well, I'm using webpack and css variable like: :root { --primary: $primary } $primary is not replaced with its value in v4.8.x It works in v4.7.x — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1943 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWPu9M26mVuwmKpt9U6h1XZ2_qZamks5tmV0pgaJpZM4MxmXd> .

[jemomi]

We ran into this problem as well, with gulp-sass, and after a long time of trying to fix the problem, and maybe a bit of yelling, we ended up force installing version 4.7.2 on the solution, which solved the problem.

Hope this can help some of you that run into the same problem with node-sass 4.8.x, try installing node-sass 4.7.x

[xzyfer]

This is not an issue, it's the correct functionality. Older versions of node-sass will be deprecated. We highly recommend fixing your bugs.

:root {
  --foo: #{$bar};
}