如何使用灵活响应的正方形网格（2,3 或 4 行）获得 2 或 3 种颜色图案？手写笔/SASS

Question

好标题不易得，求解释：

我有灵活的正方形网格。我宁愿只为他们坚持两种颜色。当我在一行中有 2 个或 4 个（小屏幕或大屏幕）时，这不是问题，但在我有 3 个正方形的中等尺寸屏幕上，这就成了问题。

举个例子： c1 颜色 1, c2 颜色 2

小屏幕：

c1 c2

c2 c1

c1 c2 ...

大屏幕上的类似模式，但行中有 4 个：

c1 c2 c1 c2

c2 c1 c2 c1 ...

在中等屏幕上我需要这样：

c1 c2 c1

c2 c1 c2

c1 c2 c1 ...

如果可能的话，我希望通过 SASS/Stylus 使用 CSS 自动获取（我正在使用手写笔，但它受到 SASS 的启发，因此 sass 解决方案将起作用。

如果有人能建议如何用 4 种颜色处理它就太好了。

到目前为止，我不知道如何开始，因为它全部在一个带有 wrap 的弹性行中，所以不知道如何确定它是否是 odd/even 元素（不要尝试考虑 3 种颜色...)

Answer 1

我给你做了一个sasssouce。添加选择器、颜色和断点。趁热食用。

<colors>
  <color></color>
  <color></color>
  <color></color> 
  ...
</colors>

$c1 : #f50;
$c2 : #fc0; 
$sm : 480px;
$md : 768px;
$lg : 992px;
$parent: 'colors';
$child: 'color';

#{$child} {
  background-color: $c1;
}
#{$child}:nth-child(2n + 1) {
  background-color: $c2;
}
@media (min-width: $sm) and (max-width: $md) {
  #{$child}:nth-child(4n+2),
  #{$child}:nth-child(4n+3) {
    background-color: $c1
  }
  #{$child}:nth-child(4n),
  #{$child}:nth-child(4n+1) {
    background-color: $c2
  }
}
@media (min-width: $lg) {
  #{$child}:nth-child(8n+5),
  #{$child}:nth-child(8n+7) {
    background-color: $c1;
  }
  #{$child}:nth-child(8n+6),
  #{$child}:nth-child(8n+8) {
    background-color: $c2;
  }
}

/* 
 * rest is layout - might want to ignore it 
 * necessary for fiddle to function 
 */

#{$parent} {
  display: flex;
  flex-wrap: wrap;
}
#{$child} {
  min-height: 6rem;
  flex: 0 0 100%;
  display: block;
}
@media (min-width: $sm) and (max-width: $md) {
  #{$child} {
    flex: 0 0 50%;
  }
}
@media (min-width: $md) {
  #{$child} {
    flex: 0 0 33.3333%;
  }
}
@media (min-width: $lg) {
  #{$child} {
    flex: 0 0 25%;
  }
}

如何使用灵活响应的正方形网格（2,3 或 4 行）获得 2 或 3 种颜色图案？手写笔/SASS

How to get 2 or 3 colours pattern with flex responsive grid of squares (2,3 or 4 in row)? Stylus / SASS

css

stylus

sass

flexbox