Sass local compile doesn't work, codepen works - css

Question

I'm trying to compile this little piece of .scss code:
$main-color:#06c;
:root{
--main-color-05: adjust-color($main-color, $lightness: +51%);}
When i compile i get this results:
local (sass -v: Sass 3.5.2 (Bleeding Edge))
:root {
--main-color-05: adjust-color($main-color, $lightness: +51%); }
Codepen (here's the code)
:root {
--main-color-05: #d1e8ff;}
Local compiler seems to ignore adjust-color function in custom properties, which works in class declarations:
$main-color:#06c;
:root{
--main-color-05: adjust-color($main-color, $lightness: +51%);}
.main-color-05{
background-color: adjust-color($main-color, $lightness: +51%);}
(compiled)
:root {
--main-color-05: adjust-color($main-color, $lightness: +51%); }
.main-color-05 {
background-color: #d1e8ff; }
Thanks in advance

Answer 1

You can use some sass mixin to set custom properties. Please have a look
https://codepen.io/malyw/pen/aNwKKv
// SCSS
$rootVars: ();
#mixin setVarSass($varName, $value){
$rootVars: map-merge($rootVars, (
#{$varName}: $value
)) !global;
}
#function getVarSass($varName){
#return map-get($rootVars, #{$varName});
}
#include setVarSass("color", #f00);
// CSS
#mixin setVarCss($varName, $value){
#supports ( (--a: 0)) {
// Custom properties are supported in the browser
$varName: unquote($varName);
:root{
#{--$varName}: $value;
}
}
}
#function getVarCss($varName){
$varName: unquote($varName);
#return #{var(--$varName)};
}
// Common
#mixin setVar($varName, $value){
#include setVarSass($varName, $value);
#include setVarCss($varName, $value);
}
#mixin setPropFromVar($propName, $varName){
#supports ( (--a: 0)) {
// Custom properties are supported in the browser
#{$propName}: getVarCss($varName);
}
#supports ( not (--a: 0)) {
// Custom properties are NOT supported in the browser
#{$propName}: getVarSass($varName);
}
}
// SET/GET
#include setVar('main-color', #f00);
body {
#include setPropFromVar('color', 'main-color');
}
or use npm module like
https://github.com/malyw/css-vars
https://www.npmjs.com/package/custom-properties-sass