Skip to content

Instantly share code, notes, and snippets.

@jackmcmorrow
Last active December 18, 2015 03:09
Show Gist options
  • Save jackmcmorrow/5716582 to your computer and use it in GitHub Desktop.
Save jackmcmorrow/5716582 to your computer and use it in GitHub Desktop.
Expressão em SASS para criar 360 ícones da série Glyphicons (http://glyphicons.com/) através de uma spritesheet maneira: https://dl.dropboxusercontent.com/u/16104519/Web/gist/glyphicons.png ou https://dl.dropboxusercontent.com/u/16104519/Web/gist/glyphicons-w.png Usei o mesmo paradigma do Twitter Bootstrap #juscuz
[class*="icon-glyph-"] {
display: inline-block;
height: 30px;
width: 30px;
background-image: url("../img/glyphicons.png");
}
.icon-white {
background-image: url("../img/glyphicons-w.png");
}
//Criar ícones glyph
@for $i from 1 through 360 {
.icon-glyph-#{$i} {
$ti : 24; // Tamanho do ícone
$j : 0;
@if $i % 10 == 1 { //Esse é o primeiro ícone de cada linha
$j : ($i - 1) / 10;
background-position: 0 #{- $j * ($ti * 2)}px;
}
@else if $i % 10 == 0 { //Isso é quando os ícones chegam ao fim da linha
$j : ($i) / 10;
background-position: #{-432 + 'px'} #{- $j * ($ti * 2)}px;
}
@else { //Todos os outros ícones
@for $k from 0 to 10 {
@if $i % 10 == $k {
$j : ($i - $k) / 10;
@if $k > 2 {
background-position: #{- ($ti *2) * $k + 'px'} #{- $j * ($ti * 2) + 'px'};
}
@else {
background-position: #{- $ti * $k + 'px'} #{- $j * ($ti * 2) + 'px'};
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment