Сгущение условных выражений класса тела с помощью SASS

Question

Есть ли способ сжать этот код? На самом деле у нас есть 12 спортивных площадок и несколько зон, где мы должны тестировать базовый класс тела. Это просто занимает много места. Я использовал меньше, но сил для этого было мало, но я перешел на sass, который мог бы сгущать это, но я еще не очень хорошо разбираюсь.

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

Answer 1

Вы можете организовать свои цвета в 2-уровневом SASS map и использовать @each для циклического перебора всех определенных видов спорта. Затем вы можете получить свойство baselinkcolor, используя 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");
      }
   }
}

В результате вы получите

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

...

И, как видите, не только код S CSS сокращается, но также уменьшается выход.

Вы можете проверить это, скопировав код S CSS на sassmeister