如何在不复制的情况下在另一个类中重用css类内容？答案

【问题标题】：How to reuse css class content in another class without copying?如何在不复制的情况下在另一个类中重用css类内容？
【发布时间】：2013-12-20 21:46:09
【问题描述】：

是否可以将现有的 css 类用作另一个类中的内容？

我的意思是这样的：

/* Contained in some library: */
.class1 { text-indent: 100 }

/* I can not change this: */
<span class="class2">

class2 的定义也包含在另一个库中。所以不能直接改。

/* But I want to do something like that in my CSS file: */
.class2 { .class1 }

我知道这种形式是不可能的。但是也许可以使用一些技巧来实现这种行为而无需复制class1 的内容？我需要这个，因为我想用另一个 CSS 类的内容重新定义类。我们的项目也使用 jQuery，但我更愿意使用 CSS。

编辑：我应该再解释一下，我无法更改 .class1 的定义方式，因为此类在库中，我无法更改 span 类的标记。

【问题讨论】：

没有 CSS 类这样的东西。 HTML 有类。 CSS 有类选择器（但您似乎在谈论规则集）。
将 class1 添加到 class2 元素并定义特定的 CSS 规则以覆盖具有这两个类的元素：.class1.class2 {...}
@A.Wolff 我无法更改元素的类属性，因为它们是从框架生成的。我只能定义自己的 CSS 文件。
@Tony 但您仍然可以使用 js/jq 将类添加到特定元素：$(function(){$('.class2').addClass('class1')}); 或者我错过了什么？？？然后只需为这些元素设置一个特定的 CSS 规则，就像在我之前的评论中发布的那样
谢谢，是的，如果我不能用纯 CSS 做到这一点，这是真正的选择。

标签： html css

【解决方案1】：

在标准 CSS 中您所评论的内容是不可能的，因为没有纯粹的继承。

尽管它不适用于您的代码限制，但这是更接近的方法：

    .class1, .class2 { text-indent: 100 }

    .class2 { 
            /* Styles you want to have only in class 2 */
    }

    <span class="class2" />

另一方面，作为@A。 Wolff 指出，您仍然可以使用 js/jq 将类添加到特定元素： $(function(){$('.class2').addClass('class1')});然后为这些元素设置一个特定的 CSS 规则。

如果你不想使用 JS，那么你需要使用 SASS 或类似的东西，它会“编译”成 CSS。

【讨论】：

.class1后面需要加逗号
这在今天仍然有效，仅供参考。我测试了它。谢谢

【解决方案2】：

是的，这是可能的。

写：

.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}

More info here.

【讨论】：

@downvoter，请有礼貌地评论原因。
您的回答与@Chexpir 的回答有何不同？
@Ghazali 我们俩同时发帖。您可以检查时间戳，这是一个共同事件
没注意到。感谢您指出。

【解决方案3】：

这样可以定义2个类

.class1, .class2 { text-indent: 100 }

它会为你工作

此外，如果您想在 class2 中添加更多内容，则可以定义它

.class2 { /*whatever you want here*/ }

【讨论】：

谢谢，但这不是一个选项。请检查更新的问题。

【解决方案4】：

CSS 无法从另一个规则集引用一个规则集。

您的选择包括：

对具有共同规则的事物使用多个选择器

.menu,
.nav {
    font-weight: bold;
}

.nav {
    display: inline-block;
}

在单个元素上使用多个类

.menu {
     font-weight: bold;
}

.nav {
     display: inline-block;
}

<li class="menu nav">

以编程方式生成 CSS

例如，SASS

@mixin menu {
    font-weight: bold;
}

.nav {
    display: inline-block;
    @include menu;
}

【讨论】：

很酷的答案，但我有更严格的要求。请检查更新的问题。

【解决方案5】：

另一种选择是使用LESS 来执行此操作。这是一个非常好的工具，可以对您的 CSS 开发进行一些改进。

看看他们的文档，非常好。关于编译器，我使用Koala 并推荐它。

【讨论】：

谢谢，但我不能使用 Less，请检查更新的问题。

【解决方案6】：

我假设您想要 .class1 中的任何内容以及 .class2 中的一些额外属性

一种方法是简单地将这两个类应用到您想要的元素。

<span class="class1 class2" />

另一种是在设置属性时给两个类命名

.class1, .class2 {text-indent: 100}

.class2{/*extra properties here*/}

【讨论】：

@Tony 我相信你需要这个答案。这是一个伟大的答案！
@Dimi 不是真的，因为我无法将<span class="class1" /> 更改为<span class="class1 class2" />。这个 html 不是我生成的。

【解决方案7】：

最好的方法是在您的自定义 css 结束下方重新声明 class1 并用您正在寻找的值覆盖它。这样，您无法更改的继承值 + 您需要合并的值都应适用。

【讨论】：

【解决方案8】：

您在一条评论中提到您不能使用 LESS，但我认为您可能误解了 LESS（或其他预处理器）如何为您提供帮助。也就是说，你没有给出任何理由让我明白你为什么不能使用它（即使在你的更新中）。据我了解您的问题，您有以下参数：

无法更改 html
无法更改定义 .class1 的 css 文件。
您可以更改定义.class2的css文件。

如果以上是正确的，那么这就是你如何使用 LESS（1.5+ 版本）。您将文件定义为 .class2 .less 文件。然后，为了保持清洁，我相信你将不得不做一个两步过程（可能你可以在没有第 1 步的情况下进行第 2 步）。

第一步：把 CSS 变成 LESS

创建一个文件，假设CSStoLESS.less 并将其放入其中：

@import (less) /path/to/your/your-css-defining-class1.css;

这将导入 css 并使处理器将其视为 LESS 代码。下一步可能也会这样做，我还没有机会测试它。

第二步：将该文件用作 LESS 中的参考

通过在定义.class2 的.less 文件中执行此操作：

@import (reference) /path/to/your/CSStoLESS.less;

.class2 { .class1; }

您正在导入之前已转换为 less 的 css 文件，仅供参考。这可以防止您获得 .class1 或原始 css 文件中包含的任何其他内容的重复选择器。现在您可以使用包含.class1 就像您在问题中显示的那样，使.class1 的属性成为.class2 的属性。

这可能是单独的工作：

@import (reference) /path/to/your/your-css-defining-class1.css;

.class2 { .class1; }

我不知道(reference) 包含是否也默认将.css 转换为LESS 代码，就像第一步中的(less) 包含类型转换所做的那样。我需要对此进行更多研究。如果是这样，那么它是一个步骤，而不是两步过程。

【讨论】：

谢谢。我无法更改定义 .class2（第 3 项）的 css 文件。但我希望我可以替换（覆盖）我的 css 文件中的 .class2 。是的，你是对的，到目前为止我还没有少用。 Less 会为每个请求编译 css 吗？
@Tony：我明白了。 CSS 的级联覆盖.class2。好的，我的回答中的相同原则仍然适用，只是您正在使用 .class1 作为 LESS 混合来制作覆盖文件。 LESS 被设计为预处理器，因此通常在任何请求之前进行编译，并且请求本身是针对由 LESS 创建的输出 css 文件。如果.class1 不经常更改，这应该没问题。如果每个请求都可能发生变化，那么您将不得不运行 LESS 客户端（出于速度目的，不建议这样做，但如果您只是定义一个类，那可能没问题）。

【解决方案9】：

其他人提到了 SASS 和 LESS。这是Stylus的解决方案：

.class1
  text-indent: 100

.class2
  @extend .class1

【讨论】：