时间戳

首页 > 解决方案 > 如何有条件地应用 CSS 类？

javascript - 如何有条件地应用 CSS 类？

问题描述

如何实现，仅使用 CSS（使用某些 JS 的最坏情况）来执行以下操作

global.css（只读）

.red { 
    color: red;
    /*tens of lines of additionnal css*/ 
}

我的样式.css

div[error] {
    background: yellow; 
    apply .red;  //                          << here
}

PS这个问题不是关于SASS或LESS。

标签： javascriptcss

解决方案

纯 CSS

如果你只想要颜色值，你可以使用:root变量

/* define color variable */
:root {
  --red-color: red; 
}

/* now you can use it anywhere */
.red {
  color: var(--red-color);
}

CSS 中的变量应该在定义其范围的 CSS 选择器中声明。对于全局范围，您可以使用 :root 或主体选择器。

旧浏览器可能不支持此解决方案。你可以通过使用一些 polyfill 来解决这个问题。浏览器支持可以在w3schools上看到

没有办法在纯 CSS 中复制整个类。取而代之的是，您可以对选择器进行分组。

.red, div[error] {
   color:red;
   /* another style attributes */
}

在 SASS 中

或者您可以使用 SASS 并将其编译为 CSS。官网提到的

它写成 @extend ，它告诉 Sass 一个选择器应该继承另一个选择器的样式。

.red {
   color: red;
}

div[error] {
   @extend .red;
}

少于

LESS 具有与 SASS 类似的 sytanx，并为此提供了两种解决方案。你可以简单地调用类。

.red {
   color: red;
}

div[error] {
   .red;
}

或者您可以使用官方网站上描述的:extend伪元素

.red {
   color: red;
}

div[error] {
   &:extend(.red);
}

Extend 是一个 Less 伪类，它将它所放置的选择器与匹配它所引用的选择器合并。

推荐阅读