CODEWITHSUNDEEP
csssass
Mike Flynn
Mike Flynn

Reputation: 24325

Condense body class conditonal statements with SASS

Is there anyway to condense this code. We actually have 12 sport sites and have multi areas where we have to test the base class of body. It just takes up a lot of space. I was using less but there wasnt much power to do that but converted to sass which could have an option to condense this but I am not well versed yet.

    $otherBaseLinkColor: #08c;
    $otherColor: #000000;

    $basketballBaseLinkColor: #d18000;
    $basketballColor: #ff9900;

    $footballBaseLinkColor: #99753d;
    $footballColor: #99743d;

    $volleyballBaseLinkColor: #FF0000;
    $volleyballColor: #FF0000;

    $hockeyBaseLinkColor: #44a0fc;
    $hockeyColor: #1d9cf2;

    $baseballBaseLinkColor: #1BA514;
    $baseballColor: #1BA514;

    a, a:visited, a:active {
        .other & {
            color: $otherBaseLinkColor;
        }

        .basketball & {
            color: $basketballBaseLinkColor;
        }

        .football & {
            color: $footballBaseLinkColor
        }

        .volleyball & {
            color: $volleyballBaseLinkColor;
        }
    }

.pool {
        .other & {
            color: $otherBaseLinkColor;
        }

        .basketball & {
            color: $basketballBaseLinkColor;
        }

        .football & {
            color: $footballBaseLinkColor
        }

        .volleyball & {
            color: $volleyballBaseLinkColor;
        }
    }


.cell-container{
        .other & {
            color: $otherBaseLinkColor;
        }

        .basketball & {
            color: $basketballBaseLinkColor;
        }

        .football & {
            color: $footballBaseLinkColor
        }

        .volleyball & {
            color: $volleyballBaseLinkColor;
        }
    }

Upvotes: 0

Views: 38

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

You could organize your colors in a 2-level SASS map and use @each to cycle over all the defined sports. Then you could retrieve the baselinkcolor property using map-get:

$colors: (
    "other"      : ("baselinkcolor": #0088cc, "color": #000000),
    "basketball" : ("baselinkcolor": #d18000, "color": #ff9900),
    "football"   : ("baselinkcolor": #99753d, "color": #99743d)
);


a, a:visited, a:active, .pool, .cell-container {
   @each $sport, $values in $colors {
      .#{$sport} & {
          color: map-get($values, "baselinkcolor");
      }
   }
}

The result is

.other a, .other a:visited, .other a:active, 
.other .pool, 
.other .cell-container {
  color: #0088cc;
}

.basketball a, .basketball a:visited, .basketball a:active, 
.basketball .pool, 
.basketball .cell-container {
  color: #d18000;
}

.football a, .football a:visited, .football a:active, 
.football .pool, 
.football .cell-container {
  color: #99753d;
}

...

And, as you can see, not only the SCSS code is reduced but also the output is less redundant.

You can test it by copying the SCSS code on sassmeister

Upvotes: 2

Related Questions