# 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;
}
}
}


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.