时间戳

首页 > 解决方案 > 使用 SASS 压缩身体类条件语句

css - 使用 SASS 压缩身体类条件语句

问题描述

无论如何要压缩此代码。我们实际上有 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;
        }
    }

标签： csssass

解决方案

您可以在 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;
}

...

而且，正如您所看到的，不仅 SCSS 代码减少了，而且输出的冗余也减少了。

您可以通过在sassmeister上复制 SCSS 代码来测试它

推荐阅读