world-flags-sprite
world-flags-sprite copied to clipboard
SCSS code fix
SCSS is not meant for rewriting CSS. With loops and interpolations you may use something like:
//WARNING: image file flags should be in same order!
//CD and CG countries are witched!
//16 or 32
$mysize: 16;
.f#{$mysize} {
.flag {
display:inline-block;
height: ($mysize)px;
width: ($mysize)px;
vertical-align: text-top;
line-height: ($mysize)px;
background:url(../../images/flags/flags#{$mysize}.png) no-repeat;
}
$countries-list: _African_Union, _Arab_League, _ASEAN, _CARICOM, _CIS, _Commonwealth, _England, _European_Union, _Islamic_Conference, _Kosovo, _NATO, _Northern_Cyprus, _Northern_Ireland, _Olimpic_Movement, _OPEC, _Red_Cross, _Scotland, _Somaliland, _Tibet, _United_Nations, _Wales, ad, ae, af, ag, ai, al, am, an, ao, aq, ar, as, at, au, aw, az, ba, bb, bd, be, bf, bg, bh, bi, bj, bm, bn, bo, br, bs, bt, bw, by, bz, ca, cg, cf, cd, ch, ci, ck, cl, cm, cn, co, cr, cu, cv, cy, cz, de, dj, dk, dm, do, dz, ec, ee, eg, eh, er, es, et, fi, fj, fm, fo, fr, ga, gb, gd, ge, gg, gh, gi, gl, gm, gn, gp, gq, gr, gt, gu, gw, gy, hk, hn, hr, ht, hu, id, ie, il, im, in, iq, ir, is, it, je, jm, jo, jp, ke, kg, kh, ki, km, kn, kp, kr, kw, ky, kz, la, lb, lc, li, lk, lr, ls, lt, lu, lv, ly, ma, md, me, mg, mh, mk, ml, mm, mn, mo, mq, mr, ms, mt, mu, mv, mw, mx, my, mz, na, nc, ne, ng, ni, nl, no, np, nr, nz, om, pa, pe, pf, pg, ph, pk, pl, pr, ps, pt, pw, py, qa, re, ro, rs, ru, rw, sa, sb, sc, sd, se, sg, si, sk, sl, sm, sn, so, sr, st, sv, sy, sz, tc, td, tg, th, tj, tl, tm, tn, to, tr, tt, tv, tw, tz, ua, ug, us, uy, uz, va, vc, ve, vg, vi, vn, vu, ws, ye, za, zm;
@for $i from 1 through length($countries-list)
{
.#{nth($countries-list, $i)}
{
background-position:0 (-1 * $i * $mysize)px;
}
}
//should they really be duplicated (i.e. mc copies id)?
.mc{background-position:0 (-112 * $mysize)px;}
.zw{background-position:0 (-242 * $mysize)px;}
//write here fix for wrong CG CD positions
} // .f16 or .f32
P.S. Using _.African_Union(OAS) is wrong because parenthesis here throws console error.
You're absolutely right regarding the powers of scss (nice solution by the way!)
The css was automatically generated so that's how it came to be.
._African_Union(OAS) is fixed.