萨斯本地编译不起作用，codepen工作

Question

我试图编译这个小片的.scss代码：我编译时得到这个结果

$main-color:#06c; 

:root{ 
     --main-color-05: adjust-color($main-color, $lightness: +51%);} 

---

：

本地（SASS -v：萨斯3.5.2（前沿））

:root { 
    --main-color-05: adjust-color($main-color, $lightness: +51%); } 

Codepen（here's the code）

:root { 
    --main-color-05: #d1e8ff;} 

---

本地编译器似乎忽略自定义属性调整颜色功能，这在类声明的工作原理：

$main-color:#06c; 

:root{ 
     --main-color-05: adjust-color($main-color, $lightness: +51%);} 

.main-color-05{ 
    background-color: adjust-color($main-color, $lightness: +51%);} 

---

（编译）

:root { 
     --main-color-05: adjust-color($main-color, $lightness: +51%); } 

    .main-color-05 { 
     background-color: #d1e8ff; } 

在此先感谢

Answer 1

您可以使用一些sass mixin来设置自定义属性。请看看

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'); 
} 

或使用NPM模块像

• https://github.com/malyw/css-vars
• ​​