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

Henrique Melanda
Aug 1, 2018 · 2 min read

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
header div:nth-child(#{$i})
background: rgb($red,$green,$blue)
width: 100%
height: 30px
box-shadow: 0 -1px #{($elements - $i)*2}px rgba(0,0,0,0.7)

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?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store