Question

我正在尝试编译这段.scss代码：

$main-color:#06c;

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

当我编译我得到这个结果：

本地（sass -v：Sass 3.5.2（出血边缘））

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

Codepen （here's the code）

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

本地编译器似乎在自定义属性中忽略adjust-color函数，它在类声明中起作用：

$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来设置自定义属性。请看看

new neural network system

// 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模块

Sass本地编译不起作用，codepen工作

1 个答案: