# Reduce repetition in SCSS for panels of various colors

I have the following SCSS and I'm curious as to how I can improve it, and reduce the amount of repetition...

I plan on adding more colors, but I don't wish to keep copy/pasting the same block over and over.

.panel-alt {
&.panel-default {
border-color: $btn-default-bg; > .panel-body { background-color:$btn-default-bg;
}
}
&.panel-primary > .panel-body {
border-color: $brand-primary; > .panel-body { background-color:$brand-primary;
}
}
&.panel-success > .panel-body {
border-color: $brand-success; > .panel-body { background-color:$brand-success;
}
}
&.panel-info > .panel-body {
border-color: $brand-info; > .panel-body { background-color:$brand-info;
}
}
&.panel-warning > .panel-body {
border-color: $brand-warning; > .panel-body { background-color:$brand-warning;
}
}
&.panel-danger > .panel-body {
border-color: $brand-danger; > .panel-body { background-color:$brand-danger;
}
}
}


## 1 Answer

I create a demo in codepen.io in order to display how your SCSS could be used. Feel free to clarify anything on the demo. If I understand your intentions clearly the rule .panel-body on all &.panel-xxx > .panel-body declarations are not necessary. Also, in case that you need to support IE6/7, CSS adjoining classes are not supported on IE6/7. Apart from that, nice code.

• -1. I'm downvoting because your answer says nothing about the reasoning behind your code. You're simply allowing the OP to copy and paste, which isn't a great habit to foster. – Alex L Jan 10 '16 at 0:46
• I'll work on that @AlexL. Thanks for the feedback. – James Jan 10 '16 at 5:10
• It's ok to link to codepen, but links rot, so the content should be included here too. I downvoted too, but after you incorporate the code, and make the improvements suggested by Alex, I'll be happy to reverse that (maybe even turn into an upvote). – janos Mar 26 '16 at 9:28