如何在不复制的情况下在另一个类中重用CSS类内容?

2021/01/31 11:51 · jquery ·  · 0评论

是否可以将现有的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中执行您要注释的内容。

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

    .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。

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;
}

是的,可能。

写:

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

更多信息在这里。

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

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

您在一条评论中提到不能使用LESS,但是我认为您可能误解了LESS(或其他预处理器)如何为您提供帮助。也就是说,您没有给出任何可以理解为什么我无法使用它的原因(即使在更新中)。据我了解您的问题,您具有以下参数:

  1. 无法更改HTML
  2. 无法更改定义的CSS文件.class1
  3. 您可以更改定义的css文件.class2

如果以上正确,那么这就是使用LESS(1.5+版本)的方式。您使文件定义.class2一个.less文件。然后,为了保持清洁,我相信您将必须执行两个步骤的过程(可能可以在不执行步骤1的情况下执行步骤2)。

第一步:将CSS转换为LESS

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

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

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

第二步:在您的LESS中将该文件用作参考

通过在您的.less文件中定义以下内容.class2

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

.class2 { .class1; }

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

可能仅此一项有效:

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

.class2 { .class1; }

我不知道的是,(reference)包含是否默认也.css(less)步骤1中包含类型转换那样默认制作为LESS代码我需要对此进行更多研究。如果是这样,则它是一个步骤,而不是两个步骤。

最好的方法是class1在自定义css端下方重新声明并用您要查找的值覆盖它。这样,不能更改的继承值+需要合并的值都将适用。

我假设你想要什么,.class1再加上一些额外的属性.class2

一种方法是简单地将两个类都应用于所需的元素。

<span class="class1 class2" />

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

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

.class2{/*extra properties here*/}

您可以通过这种方式定义2个类

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

它会为你工作

此外,如果您想在第2类中投放更多内容,则可以对其进行定义

.class2 { /*whatever you want here*/ }
本文地址:http://jquery.askforanswer.com/ruhezaibufuzhideqingkuangxiazailingyigeleizhongzhongyongcssleineirong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!