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

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -