world-flags-sprite icon indicating copy to clipboard operation
world-flags-sprite copied to clipboard

SCSS code fix

Open fenixproductions opened this issue 12 years ago • 1 comments

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.

fenixproductions avatar Jan 02 '13 09:01 fenixproductions

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.

lafeber avatar Mar 31 '14 09:03 lafeber