Skip to content

Instantly share code, notes, and snippets.

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

Embed
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
.icon-{$key}:after
sprite($value)
left -50px
margin-top -(spriteHeight($value)/2)
+below($bp.medium)
left 50%
margin-left (spriteWidth($value)/2) * -1
// Abaixo, como seria o código sem o loop:
/*
.icon-news:after
sprite($news)
left -50px
margin-top -(@height/2)
+below(600px)
left 50%
padding 0
margin-left ($news_width/2) * -1
.icon-events:after
sprite($events)
margin-top -(@height/2)
+below(600px)
left 50%
margin-left ($events_width/2) * -1
.icon-drink:after
sprite($drink)
margin-top -(@height/2)
+below(600px)
left 50%
margin-left ($drink_width/2) * -1
.icon-courses:after
sprite($courses)
margin-top -(@height/2)
+below(600px)
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.