Utilizando Sass para gerar cor e box-shadow em um loop

Créditos: Using Sass to generate color and box-shadow in a loop por: Creative Punch

Este é um pequeno experimento de quando eu estava mexendo com o ajuste da propriedade do elemento usando Sass em for-loop

HTML

Este efeito certamente pode ser terminado em poucas linhas. Em particular este exemplo, eu crio o elemento no header com um número interno de elemento de div.

<header>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</header>

Surpresa!

Você define a variável $elementos que é igual ao número de elementos filho dentro do nosso header. Eu uso esta variável em um for-loop.

$elements: 10
@for $i from 0 to $elements

Depois você vai usar o integrador $i para calcular este for-loop

$elements: 10

@for $i from 0 to $elements
$red: ($i*10)+150
$green: (($i*10)+150)/2
$blue: (($i*10)+150)/2

Isso deixará as cores mais brilhantes. Nosso valor mínimo para $red será 150. Seu valor máximo será 250, desde que exista 10 elementos. Você deverá ajustar esses valores de acordo com seus elementos.

Depois você irá usar a variável $i para gerar os seletores CSS. Nós faremos nossas variáveis como texto para que seja utilizado por seletor assim.

#{$VARIABLE}

Sabendo disso, nós iremos produzir nossos seletores dentro de nosso loop como este:

$elements: 10

@for $i from 0 to $elements
$red: ($i*10)+150
$green: (($i*10)+150)/2
$blue: (($i*10)+150)/2

O resultado

O CSS final completo compilado irá ser como este.

header div:nth-child(0) {
background: #964b4b;
width: 100%;
height: 30px;
box-shadow: 0 -1px 20px rgba(0, 0, 0, 0.7);
}

header div:nth-child(1) {
background: #a05050;
width: 100%;
height: 30px;
box-shadow: 0 -1px 18px rgba(0, 0, 0, 0.7);
}

header div:nth-child(2) {
background: #aa5555;
width: 100%;
height: 30px;
box-shadow: 0 -1px 16px rgba(0, 0, 0, 0.7);
}

header div:nth-child(3) {
background: #b45a5a;
width: 100%;
height: 30px;
box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.7);
}

header div:nth-child(4) {
background: #be5f5f;
width: 100%;
height: 30px;
box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.7);
}

header div:nth-child(5) {
background: #c86464;
width: 100%;
height: 30px;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.7);
}

header div:nth-child(6) {
background: #d26969;
width: 100%;
height: 30px;
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.7);
}

header div:nth-child(7) {
background: #dc6e6e;
width: 100%;
height: 30px;
box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.7);
}

header div:nth-child(8) {
background: #e67373;
width: 100%;
height: 30px;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.7);
}

header div:nth-child(9) {
background: #f07878;
width: 100%;
height: 30px;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.7);
}

Nós fazemos tudo com apenas aquelas 10 linhas de Sass (Linhas brancas não incluídas). Quão Impressionante é isso?

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.