前端之家

  1. 首页
  2. 问答

有什么方法可以使类名与CSS自定义变量相同？

• 问答

我正在寻找可以减少CSS冗余的任何解决方案：

--root {
  --brown: #775E3E;
  --headline: "Big Shoulders Display","Oswald","Open Sans",sans-serif;
}

.brown {color: var(--brown);}
.brown-bg {background-color: var(--brown);}

.headline {font-family: var(--headline);}

最终目标是直接在HTML中使用.headline和.brown类。 

<h1 class="headline brown">I AM BROWN WITH CUSTOM FONT</h1>

是否可以做到这一点而不必制作详尽的:root颜色列表，然后需要分别指定每个类名称（它们是相同的）？

基本上我想要--headline = .headline和--brown = .brown

如果CSS中没有简单的解决方案，我愿意使用SCSS，SASS mixin甚至是javascript。 预先谢谢大家！

ulwxfjy86 回答：有什么方法可以使类名与CSS自定义变量相同？

您可以为此使用SCSS。我为您创建了一个代码段。这是自我描述。

// Arrange them in
// varName: (type,value)
$vars: (
  brown: (color,brown),headline: (font-family,'"Big Shoulders Display","Oswald","Open Sans",sans-serif')
);

// Turn all those variables to CSS Variables
:root {
  @each $var,$val in $vars {
    --#{$var}: #{nth($val,2)};
  }
}

// Create classes out of those variables
@each $var,$val in $vars {
  .#{$var} {
    #{nth($val,1)}: var(--#{$var});
  }

  // If type is color then generate a bg color class
  @if nth($val,1) == color {
    .#{$var}-bg {
      background-color: var(--#{$var});
    }
  }
}

然后它将生成这样的CSS 

:root {
  --brown: brown;
  --headline: "Big Shoulders Display",sans-serif;
}

.brown {
  color: var(--brown);
}

.brown-bg {
  background-color: var(--brown);
}

.headline {
  font-family: var(--headline);
}

这可能是您要寻找的。乐于助人。

csscss-variablesglobal-variablesmixinsscss-mixins
本文链接：https://www.f2er.com/3017256.html

大家都在问