如何获得 2 或 3 种颜色模式与正方形的弹性响应网格（2,3 或 4 行）？手写笔/SASS

Posted 2023-03-07

【中文标题】如何获得 2 或 3 种颜色模式与正方形的弹性响应网格（2,3 或 4 行）？手写笔/SASS

【英文标题】：How to get 2 or 3 colours pattern with flex responsive grid of squares (2,3 or 4 in row)? Stylus / SASS

【发布时间】：2017-06-29 22:47:36

【问题描述】：

好标题不容易，要解释一下：

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

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

小屏幕：

c1c2

c2c1

c1 c2 ...

大屏幕上的类似图案，但一行有 4 个：

c1 c2 c1 c2

c2 c1 c2 c1 ...

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

c1 c2 c1

c2 c1 c2

c1 c2 c1 ...

如果可能的话，我希望通过 SASS/Stylus 自动使用 CSS（我使用的是 stylus，但它是受 SASS 启发的，所以 sass 解决方案可以工作。

如果有人可以建议如何用 4 种颜色处理它会很棒。

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

【参考方案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%;