Skip to content

Instantly share code, notes, and snippets.

@Wakkos
Created June 25, 2014 07:14
Show Gist options
  • Save Wakkos/d6a1813b527d54d40f10 to your computer and use it in GitHub Desktop.
Save Wakkos/d6a1813b527d54d40f10 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
/*------------------------------------*\
$FLAGS
\*------------------------------------*/
/*
* Loop para determinar la posición del sprite de las banderas grandes, las circulares.
*/
$sprite-item--list: noflag es-ES it-IT fr-FR de-DE pt-PT en-GB en-US ru-RU zh-CHT pt-BR klingon ar-SA;
$offset : 5px;
@mixin sprite($sprite-item--offset, $hor-offset, $sprite-item--size) {
$sprite-item--offset: $sprite-item--offset - 1;
background-position:$hor-offset ($sprite-item--size*(-$sprite-item--offset)-$offset);
}
/*
* Podemos ahora generar varios loops con las mismas clases, por ejemplo
* para un Sprite con banderas pequeñas y uno con banderas grandes
*/
@for $i from 1 through length($sprite-item--list) {
$sprite-item: nth($sprite-item--list, $i);
.#{$sprite-item} {
@include sprite($i, 6px, 53px);
}
}
/*
* Y el de banderas pequeñas
*/
@for $i from 1 through length($sprite-item--list) {
$sprite-item: nth($sprite-item--list, $i);
.flagLang.flagLang--mini.#{$sprite-item}::before {
@include sprite($i, 0, 13px);
}
}
@charset "UTF-8";
/*------------------------------------*\
$FLAGS
\*------------------------------------*/
/*
* Loop para determinar la posición del sprite de las banderas grandes, las circulares.
*/
/*
* Podemos ahora generar varios loops con las mismas clases, por ejemplo
* para un Sprite con banderas pequeñas y uno con banderas grandes
*/
.noflag {
background-position: 6px -5px;
}
.es-ES {
background-position: 6px -58px;
}
.it-IT {
background-position: 6px -111px;
}
.fr-FR {
background-position: 6px -164px;
}
.de-DE {
background-position: 6px -217px;
}
.pt-PT {
background-position: 6px -270px;
}
.en-GB {
background-position: 6px -323px;
}
.en-US {
background-position: 6px -376px;
}
.ru-RU {
background-position: 6px -429px;
}
.zh-CHT {
background-position: 6px -482px;
}
.pt-BR {
background-position: 6px -535px;
}
.klingon {
background-position: 6px -588px;
}
.ar-SA {
background-position: 6px -641px;
}
/*
* Y el de banderas pequeñas
*/
.flagLang.flagLang--mini.noflag::before {
background-position: 0 -5px;
}
.flagLang.flagLang--mini.es-ES::before {
background-position: 0 -18px;
}
.flagLang.flagLang--mini.it-IT::before {
background-position: 0 -31px;
}
.flagLang.flagLang--mini.fr-FR::before {
background-position: 0 -44px;
}
.flagLang.flagLang--mini.de-DE::before {
background-position: 0 -57px;
}
.flagLang.flagLang--mini.pt-PT::before {
background-position: 0 -70px;
}
.flagLang.flagLang--mini.en-GB::before {
background-position: 0 -83px;
}
.flagLang.flagLang--mini.en-US::before {
background-position: 0 -96px;
}
.flagLang.flagLang--mini.ru-RU::before {
background-position: 0 -109px;
}
.flagLang.flagLang--mini.zh-CHT::before {
background-position: 0 -122px;
}
.flagLang.flagLang--mini.pt-BR::before {
background-position: 0 -135px;
}
.flagLang.flagLang--mini.klingon::before {
background-position: 0 -148px;
}
.flagLang.flagLang--mini.ar-SA::before {
background-position: 0 -161px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment