The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Is this the most efficient way to write SCSS for this scenario?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #149273
    Corey Megown

    Hey everyone,

    I’m still learning some of the more advanced SCSS possibilities, but I’ve got a working version that I’m wondering if it can be made more efficient. Here’s what I’ve got:

    $types: basic, primary, secondary;
    [class*='btn-'] {
        @each $type in $types {
            &[class*='-#{$type}'] {
                @if $type == basic {
                    background-color: $basic;
                } @else if $type == primary {
                    background-color: $primary;
                } @else if $type == secondary {
                    background-color: $secondary;

    …which correctly outputs:

    [class*='btn-'][class*='-basic'] {
        background-color: #ccc;
    [class*='btn-'][class*='-primary'] {
        background-color: #bada55;
    [class*='btn-'][class*='-secondary'] {
        background-color: #ff00ff;

    So while this works, I’m wondering if this is the most efficient way of doing this since there’s a very real possibility that the $types list could theoretically have an infinite number of possibilities. Ideally there would be a way to simply add an entry to the list and the logic would just spit out whatever is needed.

    Thanks for reading, and if you have any questions/comments/concerns let me know!

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.