Comment obtenir un motif de 2 ou 3 couleurs avec quadrillage de carrés (2,3 ou 4 en rangée)? Stylus/SASS

Question

Pas facile d'obtenir un bon titre, mais d'expliquer:

J'ai une grille flexible de carrés. Je préférerais m'en tenir à seulement 2 couleurs pour eux. Ce n'est pas un problème quand j'ai 2 ou 4 en ligne (petits ou grands écrans), mais cela devient le problème sur les écrans de taille moyenne où j'ai 3 carrés dans la rangée.

Pour donner l'exemple: c1 color1, couleur c2 2

Petit écran:

c1 c2

c2 c1

c1 c2 ...

modèle similaire sur les grands écrans mais avec 4 dans la rangée:

c1 c2 c1 c2

c2 c1 c2 c1 ...

Sur les écrans moyennes que je dois avoir cette façon:

c1 c2 c1

c2 c1 c2

c1 c2 c1 ...

Si possible, je préférerais obtenir automatiquement avec CSS par SASS/Stylus (j'utilise le stylet mais c'est SASS inspire d donc la solution de sass fonctionnera.

Si quelqu'un pouvait vous conseiller sur la façon de le gérer avec 4 couleurs serait génial. Jusqu'à présent, je n'ai aucune idée de la façon de commencer avec cela parce que tout est dans une ligne de flexion avec enveloppement donc aucune idée de la façon de déterminer si c'est un élément impair/pair (ne pas essayer de penser à 3 couleurs ...)

Answer 1

Je vous ai fait un sass souce. Ajoutez des sélecteurs, des couleurs et des points d'arrêt. Servir chaud.

<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%; 
    } 
}