Question

如何仅使用CSS（最糟糕的情况是使用某些JS）来实现以下目的

global.css（只读）

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

mystyle.css

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

PS。问题是关于SASS或LESS的不。

Answer 1

普通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。在official site上提到

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

.red {
   color: red;
}

div[error] {
   @extend .red;
}

在较少的情况下

LESS具有与SASS类似的系统，为此有两种解决方案。您可以简单地叫课。

.red {
   color: red;
}

div[error] {
   .red;
}

或者您可以使用described on official site的:extend伪元素

.red {
   color: red;
}

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

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

Answer 2

据我所知，css中没有条件if / then / else。另外，您可以使用javascript / jQuery动态地应用CSS。像这样的东西。

component.classList.add('red');
component.classList.remove('red');

Answer 3

按照相同的规则进行操作：

.red, div[error] {
    color: red;
}

如果它是动态的，则不能使用纯CSS来实现-尽管还有其他多种方法：

JavaScript：

document.querySelectorAll("div[error]").forEach)e => e.classList.add("red"));

jQuery：

$("div[error]").addClass("red");

Answer 4

您可以概括它们并根据需要定义它们。即使它们是不同的.css文件，只要它们与要应用的其他属性没有冲突。

.red {
  color: red;
}

div[error] {
  background-color: yellow;
}

div[error=true] {
  color: red;
}

div[error=false] {
  color: blue;
}

<div error>error</div>
<div error="true">true error</div>
<div error="false">fake error</div>
<div class="red">red</div>

Answer 5

您可以使用div[error]组合器将选择器.red添加到,的定义中，如其他答案中所述。

但是，没有提到的是，您可以将更多样式应用于div[error]：

/* this will be applied to .red and div[error] */
.red, div[error] {
  color:red;
}

/* this will be applied only to div[error] */
div[error] {
  background-color: yellow;
}

编辑：

如果无法修改.red类的定义，那么使用纯CSS是不可能的。

这是一个JS解决方案，它将应用与div[error]，类.red相匹配的所有元素：

function extend(selector, className){
   document.querySelectorAll(selector).forEach(element=>element.classList.add(className))
}
extend('div[error]','red')

CSS：有条件地应用一个类

5 个答案:

普通CSS

在SASS中

在较少的情况下