Created
July 20, 2015 12:48
-
-
Save gsantiago/bac292ff5da15496743b to your computer and use it in GitHub Desktop.
Um exemplo de como loops podem ser úteis em pré-processadores CSS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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