时间戳

首页 > 解决方案 > 使用 scss 类名来获取已经定义的变量？

html - 使用 scss 类名来获取已经定义的变量？

问题描述

假设您有重复的代码：

$primary: white;
$secondary: black;
$success: green;
$danger: red;
$warning: yellow;

&.primary-stripe {
  border-top-color: $primary;
}

&.secondary-stripe {
  border-top-color: $secondary;
}

&.success-stripe {
  border-top-color: $success;
}

&.danger-stripe {
  border-top-color: $danger;
}

&.warning-stripe {
  border-top-color: $warning;
}

有没有办法通过基于已经存在的类名访问变量来简化它？例如

&.[var]-stripe {
   border-top-color: $[var];
}

唯一棘手的部分是当 $[var] 不存在时会发生什么。我猜那么scss可能会出错？

标签： htmlcsssass

解决方案

您可以为此使用SASS 地图：

$color_map: (
'primary': 'white',
'secondary': 'black',
'success': 'green',
'danger': 'red',
'warning': 'yellow'
);


.main_selector {
   @each $name, $color in $color_map {
      &.#{$name}-stripe {
        border-top-color: #{$color};
      }
   }
}

这编译为：

.main_selector.primary-stripe {
  border-top-color: white;
}
.main_selector.secondary-stripe {
  border-top-color: black;
}
.main_selector.success-stripe {
  border-top-color: green;
}
.main_selector.danger-stripe {
  border-top-color: red;
}
.main_selector.warning-stripe {
  border-top-color: yellow;
}

推荐阅读