创建@for或@each以使用scss自动化样式

时间:2016-10-18 21:33:18

标签: html css function sass

我想要实现的输出是

template <typename T, typename Tuple>
struct type_counter;

template <typename T, typename ... Ts>
struct type_counter<T, std::tuple<Ts...>> :
    std::integral_constant<std::size_t, (... + std::is_same<T, Ts>::value)> {};

template <typename Tuple1, typename Tuple2, std::size_t... Is>
constexpr bool equivalent_types(const Tuple1&, const Tuple2&, std::index_sequence<Is...>)
{
    return (...
            && (type_counter<std::tuple_element_t<Is, Tuple1>, Tuple1>::value
               == type_counter<std::tuple_element_t<Is, Tuple1>, Tuple2>::value));
}

template <typename Tuple1, typename Tuple2>
constexpr bool equivalent_types(const Tuple1& t1, const Tuple2& t2)
{
    constexpr auto s1 = std::tuple_size<Tuple1>::value;
    constexpr auto s2 = std::tuple_size<Tuple2>::value;

    return s1 == s2
      && equivalent_types(t1, t2, std::make_index_sequence<std::min(s1, s2)>());
}

下面是我正在玩的每个scss函数,但它输出

.gray-1 {
  height: 10px;
}
.gray-2 {
  height: 20px;
}
.gray-3 {
  height: 30px;
}
.gray-4 {
  height: 40px;
}
.gray-5 {
  height: 50px;
}
.gray-6 {
  height: 60px;
}
.gray-7 {
  height: 70px;
}
.gray-8 {
  height: 80px;
}
.gray-9 {
  height: 90px;
}
.red-1 {
  height: 10px;
}
this will end at 9 and then .blue-1 ++ will start
etc....

我可以通过灰色1-9然后红色1-9然后最后蓝色1-9。 还有必要做高度清单吗?我可以在某种程度上做n + 10到90吗?

.gray red blue-1 {
  height: 10px;
}

codepen

3 个答案:

答案 0 :(得分:2)

此选项非常有效。你需要做的就是为你的两个多变量使用两个循环。

<强> SCSS:

$height-list: 10, 20, 30, 40, 50, 60, 70, 80, 90;
$color-var: gray, red, blue;

    @for $c from 1 through length($color-var) {
      @for $h from 1 through length($height-list) {
        .#{nth($color-var, $c)}-#{$h} {
          height: nth($height-list, $h) + px;
        }
      }
    }

css输出:

.gray-1 {
  height: 10px; }

.gray-2 {
  height: 20px; }

.gray-3 {
  height: 30px; }

.gray-4 {
  height: 40px; }

.gray-5 {
  height: 50px; }

.gray-6 {
  height: 60px; }

.gray-7 {
  height: 70px; }

.gray-8 {
  height: 80px; }

.gray-9 {
  height: 90px; }

.red-1 {
  height: 10px; }

.red-2 {
  height: 20px; }

.red-3 {
  height: 30px; }

.red-4 {
  height: 40px; }

.red-5 {
  height: 50px; }

.red-6 {
  height: 60px; }

.red-7 {
  height: 70px; }

.red-8 {
  height: 80px; }

.red-9 {
  height: 90px; }

.blue-1 {
  height: 10px; }

.blue-2 {
  height: 20px; }

.blue-3 {
  height: 30px; }

.blue-4 {
  height: 40px; }

.blue-5 {
  height: 50px; }

.blue-6 {
  height: 60px; }

.blue-7 {
  height: 70px; }

.blue-8 {
  height: 80px; }

.blue-9 {
  height: 90px; }

/*# sourceMappingURL=style.css.map */

答案 1 :(得分:1)

以下是我对此

的解决方案
$height-list: 10 20 30 40 50 60 70 80 90;
$colors: gray,red,blue;
@each $current-color in $colors{
  $color:index($colors,$current-color);
  @each $current-height in $height-list {
      $i: index($height-list, $current-height);
   .#{$current-color}-#{$i} { 
        height: #{$current-color}px;
    }
  }
}

希望这有帮助

您也可以避免使用多个变量 检查一下

SELECT CASE 
              WHEN gift_club_end_date = ' ' THEN ' '
              WHEN gift_club_end_date = '00000000' THEN ' '
              ELSE TO_DATE(gc.gift_club_end_date, 'yyyymmdd')

              END

       FROM gift_clubs gc

答案 2 :(得分:0)

如果您有两个数组,则可能需要两个@each循环。

$height-list: 10 20 30 40 50 60 70 80 90;
$color-var: gray red blue;

@each $color in $color-var{
  @each $height in $height-list{
    $i: index($height-list, $height)
    .#{$color-var}-#{$i} {
      height: #{$height}px;  
    }
  }
}