Clash Royale CLAN TAG

SCSS: How to not repeat declaration in CSS file?

So I'm using two separate graphics that use the same options:

#basicMob .progress {
background: green none repeat scroll 0 0;
}

#notBasicMob .progress {
background: green none repeat scroll 0 0;
}


How can I declare #basicMob and #notBasicMob, and have .progress affect them both? I keep trying things like:

#basicMob,
#notBasicMob .progress {
background: green none repeat scroll 0 0;
}


But so far I haven't been able to find what works. Thanks a lot.

2 Answers
2

You can use the & to select your elements as necessary:

&

.some-class {
&.another-class {}
}


So in your case:

#basicMob,
#notBasicMob {
&.progress {
background: green none repeat scroll 0 0;
}


More information about it can be found here: https://css-tricks.com/the-sass-ampersand/

This should work:

#basicMob .progress,
#notBasicMob .progress {
background: green none repeat scroll 0 0;
}


You need to have the selector for ".progress" before the comma as well.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.