css3 - Deduplicate CSS rule in class and media query -
i have css rules duplicates in both .small
, media query #a
, because want same behaviour when browser width smaller 600px , when button clicked.
in real case, rules long, , avoid duplicate them. how deduplicate such css?
$('#b').click(function(){ $('#a').addclass('small'); });
#a { background-color: green; } .small { background-color: yellow !important; /* many other rules */ } @media (max-width: 600px) { #a { background-color: yellow !important; /* many other rules */ } }
<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" />
i don't think there's way in pure css, 1 of things can solve precompilers sass can inject css rules anywhere want variables or mixins example
Comments
Post a Comment