Skip to content

Instantly share code, notes, and snippets.

@gsantiago gsantiago/icons.styl
Created Jul 20, 2015

What would you like to do?
Um exemplo de como loops podem ser úteis em pré-processadores CSS.
// Criamos um simples hash com a classe e a variável contendo os dados do sprite:
$icons = {
news: $news,
events: $events,
drink: $drink,
courses: $courses
// Iteramos o hash acima defininindo sua classe e seu conteúdo com base no sprite.
for $key, $value in $icons
left -50px
margin-top -(spriteHeight($value)/2)
left 50%
margin-left (spriteWidth($value)/2) * -1
// Abaixo, como seria o código sem o loop:
left -50px
margin-top -(@height/2)
left 50%
padding 0
margin-left ($news_width/2) * -1
margin-top -(@height/2)
left 50%
margin-left ($events_width/2) * -1
margin-top -(@height/2)
left 50%
margin-left ($drink_width/2) * -1
margin-top -(@height/2)
left 50%
margin-left ($courses_width/2) * -1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.