Question

我目前有一个CSS，其规则在.small和#a的媒体查询中都是重复的，因为当浏览器宽度小于600px并且单击按钮时我想要相同的行为

在我的实际情况中，规则很长，我想避免复制它们。 如何重复删除这样的CSS？

＆＃13;

$('#b').click(function(){ $('#a').addClass('small'); });

＆＃13;

#a { background-color: green; }
.small { background-color: yellow !important; /* many other rules */ }

@media (max-width: 600px) { 
    #a { background-color: yellow !important; /* many other rules */ }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">Hello</div>
<input id="b" type="button" value="Change" />

＆＃13;

Answer 1

我认为没有办法在纯CSS中执行此操作，这是您可以使用SASS之类的预编译器解决的问题之一，您可以在任何地方使用变量或{{3例如

Answer 2

我可以考虑使用Javascript解决您的问题。

window.onresize = function(event){
 if(window.innerWidth < 600px){
  // add the class to the element
 }else{
 // remove the class
 }
}

如果不使用预编译器，我认为你不能以任何其他方式实现你想要的东西。

Answer 3

您必须使用CSS预处理器才能执行此操作。

否则你必须使用jQuery根据视口宽度切换其他类，或者将.small样式分配给#a，然后制作媒体查询以在你不要时撤消它不希望它看起来像那样。

在类和媒体查询中重复数据删除CSS规则

3 个答案: