-1
\$\begingroup\$

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;
        }
    }
}
\$\endgroup\$
-2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ -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. \$\endgroup\$ – Alex L Jan 10 '16 at 0:46
  • \$\begingroup\$ I'll work on that @AlexL. Thanks for the feedback. \$\endgroup\$ – James Jan 10 '16 at 5:10
  • \$\begingroup\$ 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). \$\endgroup\$ – Stop ongoing harm to Monica Mar 26 '16 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.