From d6ebd007dde03979f2da012ddd07181a96afcdb3 Mon Sep 17 00:00:00 2001
From: Alexander Wunschik <alex@wunschik.net>
Date: Sun, 11 Oct 2020 16:22:37 +0200
Subject: [PATCH 1/2] chore: show output filename after generating

---
 helpers/sass.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/helpers/sass.js b/helpers/sass.js
index cc2ebd4..f42b965 100644
--- a/helpers/sass.js
+++ b/helpers/sass.js
@@ -4,14 +4,16 @@ const fs = require('fs');
 const pathToFlagStyles = path.join(__dirname, '../src/')
 
 exports.compile = function (input, output){
+  const inputFile = path.join(pathToFlagStyles, input + '.scss');
+  const outputFile = path.join(__dirname, '../dist/', output + '.css');
   sass.render({
-    file: path.join(pathToFlagStyles, input + '.scss'),
+    file: inputFile,
     outputStyle: 'compressed'
   }, function (err, result) {
     if (!err) {
-      fs.writeFile(path.join(__dirname, '../dist/', output + '.css'), result.css, function (err) {
+      fs.writeFile(outputFile, result.css, function (err) {
         if (!err) {
-          console.log('File written to: ', pathToFlagStyles)
+          console.log('File written to: ', outputFile)
         } else {
           console.error(err)
         }

From a5eb34dda24ec4378850bc4fff916990bae6b2f1 Mon Sep 17 00:00:00 2001
From: Alexander Wunschik <alex@wunschik.net>
Date: Sun, 11 Oct 2020 16:23:40 +0200
Subject: [PATCH 2/2] feat: add seperate 1x1 and 4x3 css files

---
 builder.js            |  5 ++-
 dist/flagpack_1x1.css |  1 +
 dist/flagpack_4x3.css |  1 +
 src/_common.scss      | 76 +++++++++++++++++++++++++++++++++++++++++++
 src/_variables.scss   | 11 -------
 src/flagpack.scss     | 63 +----------------------------------
 src/flagpack_1x1.scss | 23 +++++++++++++
 src/flagpack_4x3.scss | 19 +++++++++++
 8 files changed, 123 insertions(+), 76 deletions(-)
 create mode 100644 dist/flagpack_1x1.css
 create mode 100644 dist/flagpack_4x3.css
 create mode 100644 src/_common.scss
 create mode 100644 src/flagpack_1x1.scss
 create mode 100644 src/flagpack_4x3.scss

diff --git a/builder.js b/builder.js
index c16b265..59c1e55 100644
--- a/builder.js
+++ b/builder.js
@@ -2,6 +2,5 @@ const sass = require('./helpers/sass');
 
 sass.compile('flagpack', 'flagpack');
 
-
-
-
+sass.compile('flagpack_1x1', 'flagpack_1x1');
+sass.compile('flagpack_4x3', 'flagpack_4x3');
diff --git a/dist/flagpack_1x1.css b/dist/flagpack_1x1.css
new file mode 100644
index 0000000..0216e5c
--- /dev/null
+++ b/dist/flagpack_1x1.css
@@ -0,0 +1 @@
+.fp{position:relative;display:inline-block;background-size:auto 100%;background-position:center;background-repeat:no-repeat}.fp:before{content:"\00a0"}.fp{line-height:1em;width:1.33333em}.fp.fp-square{line-height:1em;width:1em}.fp.fp-rounded{border-radius:.16667em}.fp.fp-md{line-height:1.5em;width:2em}.fp.fp-md.fp-square{line-height:1.5em;width:1.5em}.fp.fp-md.fp-rounded{border-radius:.25em}.fp.fp-lg{line-height:2em;width:2.66667em}.fp.fp-lg.fp-square{line-height:2em;width:2em}.fp.fp-lg.fp-rounded{border-radius:.25em}.ac.fp-square{background-image:url("../flags/1x1/ac.svg")}.ad.fp-square{background-image:url("../flags/1x1/ad.svg")}.ae.fp-square{background-image:url("../flags/1x1/ae.svg")}.af.fp-square{background-image:url("../flags/1x1/af.svg")}.ag.fp-square{background-image:url("../flags/1x1/ag.svg")}.ai.fp-square{background-image:url("../flags/1x1/ai.svg")}.al.fp-square{background-image:url("../flags/1x1/al.svg")}.am.fp-square{background-image:url("../flags/1x1/am.svg")}.ao.fp-square{background-image:url("../flags/1x1/ao.svg")}.ar.fp-square{background-image:url("../flags/1x1/ar.svg")}.as.fp-square{background-image:url("../flags/1x1/as.svg")}.at.fp-square{background-image:url("../flags/1x1/at.svg")}.au.fp-square{background-image:url("../flags/1x1/au.svg")}.aw.fp-square{background-image:url("../flags/1x1/aw.svg")}.ax.fp-square{background-image:url("../flags/1x1/ax.svg")}.az.fp-square{background-image:url("../flags/1x1/az.svg")}.ba.fp-square{background-image:url("../flags/1x1/ba.svg")}.bb.fp-square{background-image:url("../flags/1x1/bb.svg")}.bd.fp-square{background-image:url("../flags/1x1/bd.svg")}.be.fp-square{background-image:url("../flags/1x1/be.svg")}.bf.fp-square{background-image:url("../flags/1x1/bf.svg")}.bg.fp-square{background-image:url("../flags/1x1/bg.svg")}.bh.fp-square{background-image:url("../flags/1x1/bh.svg")}.bi.fp-square{background-image:url("../flags/1x1/bi.svg")}.bj.fp-square{background-image:url("../flags/1x1/bj.svg")}.bl.fp-square{background-image:url("../flags/1x1/bl.svg")}.bm.fp-square{background-image:url("../flags/1x1/bm.svg")}.bn.fp-square{background-image:url("../flags/1x1/bn.svg")}.bo.fp-square{background-image:url("../flags/1x1/bo.svg")}.bq.fp-square{background-image:url("../flags/1x1/bq.svg")}.br.fp-square{background-image:url("../flags/1x1/br.svg")}.bs.fp-square{background-image:url("../flags/1x1/bs.svg")}.bt.fp-square{background-image:url("../flags/1x1/bt.svg")}.bv.fp-square{background-image:url("../flags/1x1/bv.svg")}.bw.fp-square{background-image:url("../flags/1x1/bw.svg")}.by.fp-square{background-image:url("../flags/1x1/by.svg")}.bz.fp-square{background-image:url("../flags/1x1/bz.svg")}.ca.fp-square{background-image:url("../flags/1x1/ca.svg")}.cc.fp-square{background-image:url("../flags/1x1/cc.svg")}.cd.fp-square{background-image:url("../flags/1x1/cd.svg")}.cf.fp-square{background-image:url("../flags/1x1/cf.svg")}.cg.fp-square{background-image:url("../flags/1x1/cg.svg")}.ch.fp-square{background-image:url("../flags/1x1/ch.svg")}.ci.fp-square{background-image:url("../flags/1x1/ci.svg")}.ck.fp-square{background-image:url("../flags/1x1/ck.svg")}.cl.fp-square{background-image:url("../flags/1x1/cl.svg")}.cm.fp-square{background-image:url("../flags/1x1/cm.svg")}.cn.fp-square{background-image:url("../flags/1x1/cn.svg")}.co.fp-square{background-image:url("../flags/1x1/co.svg")}.cr.fp-square{background-image:url("../flags/1x1/cr.svg")}.cu.fp-square{background-image:url("../flags/1x1/cu.svg")}.cv.fp-square{background-image:url("../flags/1x1/cv.svg")}.cw.fp-square{background-image:url("../flags/1x1/cw.svg")}.cx.fp-square{background-image:url("../flags/1x1/cx.svg")}.cy.fp-square{background-image:url("../flags/1x1/cy.svg")}.cz.fp-square{background-image:url("../flags/1x1/cz.svg")}.de.fp-square{background-image:url("../flags/1x1/de.svg")}.dj.fp-square{background-image:url("../flags/1x1/dj.svg")}.dk.fp-square{background-image:url("../flags/1x1/dk.svg")}.dm.fp-square{background-image:url("../flags/1x1/dm.svg")}.do.fp-square{background-image:url("../flags/1x1/do.svg")}.dz.fp-square{background-image:url("../flags/1x1/dz.svg")}.ec.fp-square{background-image:url("../flags/1x1/ec.svg")}.ee.fp-square{background-image:url("../flags/1x1/ee.svg")}.eg.fp-square{background-image:url("../flags/1x1/eg.svg")}.eh.fp-square{background-image:url("../flags/1x1/eh.svg")}.er.fp-square{background-image:url("../flags/1x1/er.svg")}.es.fp-square{background-image:url("../flags/1x1/es.svg")}.et.fp-square{background-image:url("../flags/1x1/et.svg")}.eu.fp-square{background-image:url("../flags/1x1/eu.svg")}.fi.fp-square{background-image:url("../flags/1x1/fi.svg")}.fj.fp-square{background-image:url("../flags/1x1/fj.svg")}.fk.fp-square{background-image:url("../flags/1x1/fk.svg")}.fm.fp-square{background-image:url("../flags/1x1/fm.svg")}.fo.fp-square{background-image:url("../flags/1x1/fo.svg")}.fr.fp-square{background-image:url("../flags/1x1/fr.svg")}.ga.fp-square{background-image:url("../flags/1x1/ga.svg")}.gb-eng.fp-square{background-image:url("../flags/1x1/gb-eng.svg")}.gb-nir.fp-square{background-image:url("../flags/1x1/gb-nir.svg")}.gb-sct.fp-square{background-image:url("../flags/1x1/gb-sct.svg")}.gb-wls.fp-square{background-image:url("../flags/1x1/gb-wls.svg")}.gb-zet.fp-square{background-image:url("../flags/1x1/gb-zet.svg")}.gb.fp-square{background-image:url("../flags/1x1/gb.svg")}.gd.fp-square{background-image:url("../flags/1x1/gd.svg")}.ge.fp-square{background-image:url("../flags/1x1/ge.svg")}.gf.fp-square{background-image:url("../flags/1x1/gf.svg")}.gg.fp-square{background-image:url("../flags/1x1/gg.svg")}.gh.fp-square{background-image:url("../flags/1x1/gh.svg")}.gi.fp-square{background-image:url("../flags/1x1/gi.svg")}.gl.fp-square{background-image:url("../flags/1x1/gl.svg")}.gm.fp-square{background-image:url("../flags/1x1/gm.svg")}.gn.fp-square{background-image:url("../flags/1x1/gn.svg")}.gp.fp-square{background-image:url("../flags/1x1/gp.svg")}.gq.fp-square{background-image:url("../flags/1x1/gq.svg")}.gr.fp-square{background-image:url("../flags/1x1/gr.svg")}.gs.fp-square{background-image:url("../flags/1x1/gs.svg")}.gt.fp-square{background-image:url("../flags/1x1/gt.svg")}.gu.fp-square{background-image:url("../flags/1x1/gu.svg")}.gw.fp-square{background-image:url("../flags/1x1/gw.svg")}.gy.fp-square{background-image:url("../flags/1x1/gy.svg")}.hk.fp-square{background-image:url("../flags/1x1/hk.svg")}.hm.fp-square{background-image:url("../flags/1x1/hm.svg")}.hn.fp-square{background-image:url("../flags/1x1/hn.svg")}.hr.fp-square{background-image:url("../flags/1x1/hr.svg")}.ht.fp-square{background-image:url("../flags/1x1/ht.svg")}.hu.fp-square{background-image:url("../flags/1x1/hu.svg")}.id.fp-square{background-image:url("../flags/1x1/id.svg")}.ie.fp-square{background-image:url("../flags/1x1/ie.svg")}.il.fp-square{background-image:url("../flags/1x1/il.svg")}.im.fp-square{background-image:url("../flags/1x1/im.svg")}.in.fp-square{background-image:url("../flags/1x1/in.svg")}.io.fp-square{background-image:url("../flags/1x1/io.svg")}.iq.fp-square{background-image:url("../flags/1x1/iq.svg")}.ir.fp-square{background-image:url("../flags/1x1/ir.svg")}.is.fp-square{background-image:url("../flags/1x1/is.svg")}.it.fp-square{background-image:url("../flags/1x1/it.svg")}.je.fp-square{background-image:url("../flags/1x1/je.svg")}.jm.fp-square{background-image:url("../flags/1x1/jm.svg")}.jo.fp-square{background-image:url("../flags/1x1/jo.svg")}.jp.fp-square{background-image:url("../flags/1x1/jp.svg")}.ke.fp-square{background-image:url("../flags/1x1/ke.svg")}.kg.fp-square{background-image:url("../flags/1x1/kg.svg")}.kh.fp-square{background-image:url("../flags/1x1/kh.svg")}.ki.fp-square{background-image:url("../flags/1x1/ki.svg")}.km.fp-square{background-image:url("../flags/1x1/km.svg")}.kn.fp-square{background-image:url("../flags/1x1/kn.svg")}.kp.fp-square{background-image:url("../flags/1x1/kp.svg")}.kr.fp-square{background-image:url("../flags/1x1/kr.svg")}.kw.fp-square{background-image:url("../flags/1x1/kw.svg")}.ky.fp-square{background-image:url("../flags/1x1/ky.svg")}.kz.fp-square{background-image:url("../flags/1x1/kz.svg")}.la.fp-square{background-image:url("../flags/1x1/la.svg")}.lb.fp-square{background-image:url("../flags/1x1/lb.svg")}.lc.fp-square{background-image:url("../flags/1x1/lc.svg")}.lgbt.fp-square{background-image:url("../flags/1x1/lgbt.svg")}.li.fp-square{background-image:url("../flags/1x1/li.svg")}.lk.fp-square{background-image:url("../flags/1x1/lk.svg")}.lr.fp-square{background-image:url("../flags/1x1/lr.svg")}.ls.fp-square{background-image:url("../flags/1x1/ls.svg")}.lt.fp-square{background-image:url("../flags/1x1/lt.svg")}.lu.fp-square{background-image:url("../flags/1x1/lu.svg")}.lv.fp-square{background-image:url("../flags/1x1/lv.svg")}.ly.fp-square{background-image:url("../flags/1x1/ly.svg")}.ma.fp-square{background-image:url("../flags/1x1/ma.svg")}.mc.fp-square{background-image:url("../flags/1x1/mc.svg")}.md.fp-square{background-image:url("../flags/1x1/md.svg")}.me.fp-square{background-image:url("../flags/1x1/me.svg")}.mf.fp-square{background-image:url("../flags/1x1/mf.svg")}.mg.fp-square{background-image:url("../flags/1x1/mg.svg")}.mh.fp-square{background-image:url("../flags/1x1/mh.svg")}.mk.fp-square{background-image:url("../flags/1x1/mk.svg")}.ml.fp-square{background-image:url("../flags/1x1/ml.svg")}.mm.fp-square{background-image:url("../flags/1x1/mm.svg")}.mn.fp-square{background-image:url("../flags/1x1/mn.svg")}.mo.fp-square{background-image:url("../flags/1x1/mo.svg")}.mp.fp-square{background-image:url("../flags/1x1/mp.svg")}.mq.fp-square{background-image:url("../flags/1x1/mq.svg")}.mr.fp-square{background-image:url("../flags/1x1/mr.svg")}.ms.fp-square{background-image:url("../flags/1x1/ms.svg")}.mt.fp-square{background-image:url("../flags/1x1/mt.svg")}.mu.fp-square{background-image:url("../flags/1x1/mu.svg")}.mv.fp-square{background-image:url("../flags/1x1/mv.svg")}.mw.fp-square{background-image:url("../flags/1x1/mw.svg")}.mx.fp-square{background-image:url("../flags/1x1/mx.svg")}.my.fp-square{background-image:url("../flags/1x1/my.svg")}.mz.fp-square{background-image:url("../flags/1x1/mz.svg")}.na.fp-square{background-image:url("../flags/1x1/na.svg")}.nc.fp-square{background-image:url("../flags/1x1/nc.svg")}.ne.fp-square{background-image:url("../flags/1x1/ne.svg")}.nf.fp-square{background-image:url("../flags/1x1/nf.svg")}.ng.fp-square{background-image:url("../flags/1x1/ng.svg")}.ni.fp-square{background-image:url("../flags/1x1/ni.svg")}.nl.fp-square{background-image:url("../flags/1x1/nl.svg")}.no.fp-square{background-image:url("../flags/1x1/no.svg")}.np.fp-square{background-image:url("../flags/1x1/np.svg")}.nr.fp-square{background-image:url("../flags/1x1/nr.svg")}.nu.fp-square{background-image:url("../flags/1x1/nu.svg")}.nz.fp-square{background-image:url("../flags/1x1/nz.svg")}.om.fp-square{background-image:url("../flags/1x1/om.svg")}.pa.fp-square{background-image:url("../flags/1x1/pa.svg")}.pe.fp-square{background-image:url("../flags/1x1/pe.svg")}.pf.fp-square{background-image:url("../flags/1x1/pf.svg")}.pg.fp-square{background-image:url("../flags/1x1/pg.svg")}.ph.fp-square{background-image:url("../flags/1x1/ph.svg")}.pk.fp-square{background-image:url("../flags/1x1/pk.svg")}.pl.fp-square{background-image:url("../flags/1x1/pl.svg")}.pm.fp-square{background-image:url("../flags/1x1/pm.svg")}.pn.fp-square{background-image:url("../flags/1x1/pn.svg")}.pr.fp-square{background-image:url("../flags/1x1/pr.svg")}.ps.fp-square{background-image:url("../flags/1x1/ps.svg")}.pt.fp-square{background-image:url("../flags/1x1/pt.svg")}.pw.fp-square{background-image:url("../flags/1x1/pw.svg")}.py.fp-square{background-image:url("../flags/1x1/py.svg")}.qa.fp-square{background-image:url("../flags/1x1/qa.svg")}.re.fp-square{background-image:url("../flags/1x1/re.svg")}.ro.fp-square{background-image:url("../flags/1x1/ro.svg")}.rs.fp-square{background-image:url("../flags/1x1/rs.svg")}.ru.fp-square{background-image:url("../flags/1x1/ru.svg")}.rw.fp-square{background-image:url("../flags/1x1/rw.svg")}.sa.fp-square{background-image:url("../flags/1x1/sa.svg")}.sb.fp-square{background-image:url("../flags/1x1/sb.svg")}.sc.fp-square{background-image:url("../flags/1x1/sc.svg")}.sd.fp-square{background-image:url("../flags/1x1/sd.svg")}.se.fp-square{background-image:url("../flags/1x1/se.svg")}.sg.fp-square{background-image:url("../flags/1x1/sg.svg")}.sh.fp-square{background-image:url("../flags/1x1/sh.svg")}.si.fp-square{background-image:url("../flags/1x1/si.svg")}.sj.fp-square{background-image:url("../flags/1x1/sj.svg")}.sk.fp-square{background-image:url("../flags/1x1/sk.svg")}.sl.fp-square{background-image:url("../flags/1x1/sl.svg")}.sm.fp-square{background-image:url("../flags/1x1/sm.svg")}.sn.fp-square{background-image:url("../flags/1x1/sn.svg")}.so.fp-square{background-image:url("../flags/1x1/so.svg")}.sr.fp-square{background-image:url("../flags/1x1/sr.svg")}.ss.fp-square{background-image:url("../flags/1x1/ss.svg")}.st.fp-square{background-image:url("../flags/1x1/st.svg")}.sv.fp-square{background-image:url("../flags/1x1/sv.svg")}.sx.fp-square{background-image:url("../flags/1x1/sx.svg")}.sy.fp-square{background-image:url("../flags/1x1/sy.svg")}.sz.fp-square{background-image:url("../flags/1x1/sz.svg")}.ta.fp-square{background-image:url("../flags/1x1/ta.svg")}.tc.fp-square{background-image:url("../flags/1x1/tc.svg")}.td.fp-square{background-image:url("../flags/1x1/td.svg")}.tf.fp-square{background-image:url("../flags/1x1/tf.svg")}.tg.fp-square{background-image:url("../flags/1x1/tg.svg")}.th.fp-square{background-image:url("../flags/1x1/th.svg")}.tj.fp-square{background-image:url("../flags/1x1/tj.svg")}.tk.fp-square{background-image:url("../flags/1x1/tk.svg")}.tl.fp-square{background-image:url("../flags/1x1/tl.svg")}.tm.fp-square{background-image:url("../flags/1x1/tm.svg")}.tn.fp-square{background-image:url("../flags/1x1/tn.svg")}.to.fp-square{background-image:url("../flags/1x1/to.svg")}.tr.fp-square{background-image:url("../flags/1x1/tr.svg")}.tt.fp-square{background-image:url("../flags/1x1/tt.svg")}.tv.fp-square{background-image:url("../flags/1x1/tv.svg")}.tw.fp-square{background-image:url("../flags/1x1/tw.svg")}.tz.fp-square{background-image:url("../flags/1x1/tz.svg")}.ua.fp-square{background-image:url("../flags/1x1/ua.svg")}.ug.fp-square{background-image:url("../flags/1x1/ug.svg")}.um.fp-square{background-image:url("../flags/1x1/um.svg")}.us.fp-square{background-image:url("../flags/1x1/us.svg")}.uy.fp-square{background-image:url("../flags/1x1/uy.svg")}.uz.fp-square{background-image:url("../flags/1x1/uz.svg")}.va.fp-square{background-image:url("../flags/1x1/va.svg")}.vc.fp-square{background-image:url("../flags/1x1/vc.svg")}.ve.fp-square{background-image:url("../flags/1x1/ve.svg")}.vg.fp-square{background-image:url("../flags/1x1/vg.svg")}.vi.fp-square{background-image:url("../flags/1x1/vi.svg")}.vn.fp-square{background-image:url("../flags/1x1/vn.svg")}.vu.fp-square{background-image:url("../flags/1x1/vu.svg")}.wf.fp-square{background-image:url("../flags/1x1/wf.svg")}.ws.fp-square{background-image:url("../flags/1x1/ws.svg")}.xk.fp-square{background-image:url("../flags/1x1/xk.svg")}.ye.fp-square{background-image:url("../flags/1x1/ye.svg")}.yt.fp-square{background-image:url("../flags/1x1/yt.svg")}.za.fp-square{background-image:url("../flags/1x1/za.svg")}.zm.fp-square{background-image:url("../flags/1x1/zm.svg")}.zw.fp-square{background-image:url("../flags/1x1/zw.svg")}
diff --git a/dist/flagpack_4x3.css b/dist/flagpack_4x3.css
new file mode 100644
index 0000000..0d465ba
--- /dev/null
+++ b/dist/flagpack_4x3.css
@@ -0,0 +1 @@
+.fp{position:relative;display:inline-block;background-size:auto 100%;background-position:center;background-repeat:no-repeat}.fp:before{content:"\00a0"}.fp{line-height:1em;width:1.33333em}.fp.fp-square{line-height:1em;width:1em}.fp.fp-rounded{border-radius:.16667em}.fp.fp-md{line-height:1.5em;width:2em}.fp.fp-md.fp-square{line-height:1.5em;width:1.5em}.fp.fp-md.fp-rounded{border-radius:.25em}.fp.fp-lg{line-height:2em;width:2.66667em}.fp.fp-lg.fp-square{line-height:2em;width:2em}.fp.fp-lg.fp-rounded{border-radius:.25em}.ac{background-image:url("../flags/4x3/ac.svg")}.ad{background-image:url("../flags/4x3/ad.svg")}.ae{background-image:url("../flags/4x3/ae.svg")}.af{background-image:url("../flags/4x3/af.svg")}.ag{background-image:url("../flags/4x3/ag.svg")}.ai{background-image:url("../flags/4x3/ai.svg")}.al{background-image:url("../flags/4x3/al.svg")}.am{background-image:url("../flags/4x3/am.svg")}.ao{background-image:url("../flags/4x3/ao.svg")}.ar{background-image:url("../flags/4x3/ar.svg")}.as{background-image:url("../flags/4x3/as.svg")}.at{background-image:url("../flags/4x3/at.svg")}.au{background-image:url("../flags/4x3/au.svg")}.aw{background-image:url("../flags/4x3/aw.svg")}.ax{background-image:url("../flags/4x3/ax.svg")}.az{background-image:url("../flags/4x3/az.svg")}.ba{background-image:url("../flags/4x3/ba.svg")}.bb{background-image:url("../flags/4x3/bb.svg")}.bd{background-image:url("../flags/4x3/bd.svg")}.be{background-image:url("../flags/4x3/be.svg")}.bf{background-image:url("../flags/4x3/bf.svg")}.bg{background-image:url("../flags/4x3/bg.svg")}.bh{background-image:url("../flags/4x3/bh.svg")}.bi{background-image:url("../flags/4x3/bi.svg")}.bj{background-image:url("../flags/4x3/bj.svg")}.bl{background-image:url("../flags/4x3/bl.svg")}.bm{background-image:url("../flags/4x3/bm.svg")}.bn{background-image:url("../flags/4x3/bn.svg")}.bo{background-image:url("../flags/4x3/bo.svg")}.bq{background-image:url("../flags/4x3/bq.svg")}.br{background-image:url("../flags/4x3/br.svg")}.bs{background-image:url("../flags/4x3/bs.svg")}.bt{background-image:url("../flags/4x3/bt.svg")}.bv{background-image:url("../flags/4x3/bv.svg")}.bw{background-image:url("../flags/4x3/bw.svg")}.by{background-image:url("../flags/4x3/by.svg")}.bz{background-image:url("../flags/4x3/bz.svg")}.ca{background-image:url("../flags/4x3/ca.svg")}.cc{background-image:url("../flags/4x3/cc.svg")}.cd{background-image:url("../flags/4x3/cd.svg")}.cf{background-image:url("../flags/4x3/cf.svg")}.cg{background-image:url("../flags/4x3/cg.svg")}.ch{background-image:url("../flags/4x3/ch.svg")}.ci{background-image:url("../flags/4x3/ci.svg")}.ck{background-image:url("../flags/4x3/ck.svg")}.cl{background-image:url("../flags/4x3/cl.svg")}.cm{background-image:url("../flags/4x3/cm.svg")}.cn{background-image:url("../flags/4x3/cn.svg")}.co{background-image:url("../flags/4x3/co.svg")}.cr{background-image:url("../flags/4x3/cr.svg")}.cu{background-image:url("../flags/4x3/cu.svg")}.cv{background-image:url("../flags/4x3/cv.svg")}.cw{background-image:url("../flags/4x3/cw.svg")}.cx{background-image:url("../flags/4x3/cx.svg")}.cy{background-image:url("../flags/4x3/cy.svg")}.cz{background-image:url("../flags/4x3/cz.svg")}.de{background-image:url("../flags/4x3/de.svg")}.dj{background-image:url("../flags/4x3/dj.svg")}.dk{background-image:url("../flags/4x3/dk.svg")}.dm{background-image:url("../flags/4x3/dm.svg")}.do{background-image:url("../flags/4x3/do.svg")}.dz{background-image:url("../flags/4x3/dz.svg")}.ec{background-image:url("../flags/4x3/ec.svg")}.ee{background-image:url("../flags/4x3/ee.svg")}.eg{background-image:url("../flags/4x3/eg.svg")}.eh{background-image:url("../flags/4x3/eh.svg")}.er{background-image:url("../flags/4x3/er.svg")}.es{background-image:url("../flags/4x3/es.svg")}.et{background-image:url("../flags/4x3/et.svg")}.eu{background-image:url("../flags/4x3/eu.svg")}.fi{background-image:url("../flags/4x3/fi.svg")}.fj{background-image:url("../flags/4x3/fj.svg")}.fk{background-image:url("../flags/4x3/fk.svg")}.fm{background-image:url("../flags/4x3/fm.svg")}.fo{background-image:url("../flags/4x3/fo.svg")}.fr{background-image:url("../flags/4x3/fr.svg")}.ga{background-image:url("../flags/4x3/ga.svg")}.gb-eng{background-image:url("../flags/4x3/gb-eng.svg")}.gb-nir{background-image:url("../flags/4x3/gb-nir.svg")}.gb-sct{background-image:url("../flags/4x3/gb-sct.svg")}.gb-wls{background-image:url("../flags/4x3/gb-wls.svg")}.gb-zet{background-image:url("../flags/4x3/gb-zet.svg")}.gb{background-image:url("../flags/4x3/gb.svg")}.gd{background-image:url("../flags/4x3/gd.svg")}.ge{background-image:url("../flags/4x3/ge.svg")}.gf{background-image:url("../flags/4x3/gf.svg")}.gg{background-image:url("../flags/4x3/gg.svg")}.gh{background-image:url("../flags/4x3/gh.svg")}.gi{background-image:url("../flags/4x3/gi.svg")}.gl{background-image:url("../flags/4x3/gl.svg")}.gm{background-image:url("../flags/4x3/gm.svg")}.gn{background-image:url("../flags/4x3/gn.svg")}.gp{background-image:url("../flags/4x3/gp.svg")}.gq{background-image:url("../flags/4x3/gq.svg")}.gr{background-image:url("../flags/4x3/gr.svg")}.gs{background-image:url("../flags/4x3/gs.svg")}.gt{background-image:url("../flags/4x3/gt.svg")}.gu{background-image:url("../flags/4x3/gu.svg")}.gw{background-image:url("../flags/4x3/gw.svg")}.gy{background-image:url("../flags/4x3/gy.svg")}.hk{background-image:url("../flags/4x3/hk.svg")}.hm{background-image:url("../flags/4x3/hm.svg")}.hn{background-image:url("../flags/4x3/hn.svg")}.hr{background-image:url("../flags/4x3/hr.svg")}.ht{background-image:url("../flags/4x3/ht.svg")}.hu{background-image:url("../flags/4x3/hu.svg")}.id{background-image:url("../flags/4x3/id.svg")}.ie{background-image:url("../flags/4x3/ie.svg")}.il{background-image:url("../flags/4x3/il.svg")}.im{background-image:url("../flags/4x3/im.svg")}.in{background-image:url("../flags/4x3/in.svg")}.io{background-image:url("../flags/4x3/io.svg")}.iq{background-image:url("../flags/4x3/iq.svg")}.ir{background-image:url("../flags/4x3/ir.svg")}.is{background-image:url("../flags/4x3/is.svg")}.it{background-image:url("../flags/4x3/it.svg")}.je{background-image:url("../flags/4x3/je.svg")}.jm{background-image:url("../flags/4x3/jm.svg")}.jo{background-image:url("../flags/4x3/jo.svg")}.jp{background-image:url("../flags/4x3/jp.svg")}.ke{background-image:url("../flags/4x3/ke.svg")}.kg{background-image:url("../flags/4x3/kg.svg")}.kh{background-image:url("../flags/4x3/kh.svg")}.ki{background-image:url("../flags/4x3/ki.svg")}.km{background-image:url("../flags/4x3/km.svg")}.kn{background-image:url("../flags/4x3/kn.svg")}.kp{background-image:url("../flags/4x3/kp.svg")}.kr{background-image:url("../flags/4x3/kr.svg")}.kw{background-image:url("../flags/4x3/kw.svg")}.ky{background-image:url("../flags/4x3/ky.svg")}.kz{background-image:url("../flags/4x3/kz.svg")}.la{background-image:url("../flags/4x3/la.svg")}.lb{background-image:url("../flags/4x3/lb.svg")}.lc{background-image:url("../flags/4x3/lc.svg")}.lgbt{background-image:url("../flags/4x3/lgbt.svg")}.li{background-image:url("../flags/4x3/li.svg")}.lk{background-image:url("../flags/4x3/lk.svg")}.lr{background-image:url("../flags/4x3/lr.svg")}.ls{background-image:url("../flags/4x3/ls.svg")}.lt{background-image:url("../flags/4x3/lt.svg")}.lu{background-image:url("../flags/4x3/lu.svg")}.lv{background-image:url("../flags/4x3/lv.svg")}.ly{background-image:url("../flags/4x3/ly.svg")}.ma{background-image:url("../flags/4x3/ma.svg")}.mc{background-image:url("../flags/4x3/mc.svg")}.md{background-image:url("../flags/4x3/md.svg")}.me{background-image:url("../flags/4x3/me.svg")}.mf{background-image:url("../flags/4x3/mf.svg")}.mg{background-image:url("../flags/4x3/mg.svg")}.mh{background-image:url("../flags/4x3/mh.svg")}.mk{background-image:url("../flags/4x3/mk.svg")}.ml{background-image:url("../flags/4x3/ml.svg")}.mm{background-image:url("../flags/4x3/mm.svg")}.mn{background-image:url("../flags/4x3/mn.svg")}.mo{background-image:url("../flags/4x3/mo.svg")}.mp{background-image:url("../flags/4x3/mp.svg")}.mq{background-image:url("../flags/4x3/mq.svg")}.mr{background-image:url("../flags/4x3/mr.svg")}.ms{background-image:url("../flags/4x3/ms.svg")}.mt{background-image:url("../flags/4x3/mt.svg")}.mu{background-image:url("../flags/4x3/mu.svg")}.mv{background-image:url("../flags/4x3/mv.svg")}.mw{background-image:url("../flags/4x3/mw.svg")}.mx{background-image:url("../flags/4x3/mx.svg")}.my{background-image:url("../flags/4x3/my.svg")}.mz{background-image:url("../flags/4x3/mz.svg")}.na{background-image:url("../flags/4x3/na.svg")}.nc{background-image:url("../flags/4x3/nc.svg")}.ne{background-image:url("../flags/4x3/ne.svg")}.nf{background-image:url("../flags/4x3/nf.svg")}.ng{background-image:url("../flags/4x3/ng.svg")}.ni{background-image:url("../flags/4x3/ni.svg")}.nl{background-image:url("../flags/4x3/nl.svg")}.no{background-image:url("../flags/4x3/no.svg")}.np{background-image:url("../flags/4x3/np.svg")}.nr{background-image:url("../flags/4x3/nr.svg")}.nu{background-image:url("../flags/4x3/nu.svg")}.nz{background-image:url("../flags/4x3/nz.svg")}.om{background-image:url("../flags/4x3/om.svg")}.pa{background-image:url("../flags/4x3/pa.svg")}.pe{background-image:url("../flags/4x3/pe.svg")}.pf{background-image:url("../flags/4x3/pf.svg")}.pg{background-image:url("../flags/4x3/pg.svg")}.ph{background-image:url("../flags/4x3/ph.svg")}.pk{background-image:url("../flags/4x3/pk.svg")}.pl{background-image:url("../flags/4x3/pl.svg")}.pm{background-image:url("../flags/4x3/pm.svg")}.pn{background-image:url("../flags/4x3/pn.svg")}.pr{background-image:url("../flags/4x3/pr.svg")}.ps{background-image:url("../flags/4x3/ps.svg")}.pt{background-image:url("../flags/4x3/pt.svg")}.pw{background-image:url("../flags/4x3/pw.svg")}.py{background-image:url("../flags/4x3/py.svg")}.qa{background-image:url("../flags/4x3/qa.svg")}.re{background-image:url("../flags/4x3/re.svg")}.ro{background-image:url("../flags/4x3/ro.svg")}.rs{background-image:url("../flags/4x3/rs.svg")}.ru{background-image:url("../flags/4x3/ru.svg")}.rw{background-image:url("../flags/4x3/rw.svg")}.sa{background-image:url("../flags/4x3/sa.svg")}.sb{background-image:url("../flags/4x3/sb.svg")}.sc{background-image:url("../flags/4x3/sc.svg")}.sd{background-image:url("../flags/4x3/sd.svg")}.se{background-image:url("../flags/4x3/se.svg")}.sg{background-image:url("../flags/4x3/sg.svg")}.sh{background-image:url("../flags/4x3/sh.svg")}.si{background-image:url("../flags/4x3/si.svg")}.sj{background-image:url("../flags/4x3/sj.svg")}.sk{background-image:url("../flags/4x3/sk.svg")}.sl{background-image:url("../flags/4x3/sl.svg")}.sm{background-image:url("../flags/4x3/sm.svg")}.sn{background-image:url("../flags/4x3/sn.svg")}.so{background-image:url("../flags/4x3/so.svg")}.sr{background-image:url("../flags/4x3/sr.svg")}.ss{background-image:url("../flags/4x3/ss.svg")}.st{background-image:url("../flags/4x3/st.svg")}.sv{background-image:url("../flags/4x3/sv.svg")}.sx{background-image:url("../flags/4x3/sx.svg")}.sy{background-image:url("../flags/4x3/sy.svg")}.sz{background-image:url("../flags/4x3/sz.svg")}.ta{background-image:url("../flags/4x3/ta.svg")}.tc{background-image:url("../flags/4x3/tc.svg")}.td{background-image:url("../flags/4x3/td.svg")}.tf{background-image:url("../flags/4x3/tf.svg")}.tg{background-image:url("../flags/4x3/tg.svg")}.th{background-image:url("../flags/4x3/th.svg")}.tj{background-image:url("../flags/4x3/tj.svg")}.tk{background-image:url("../flags/4x3/tk.svg")}.tl{background-image:url("../flags/4x3/tl.svg")}.tm{background-image:url("../flags/4x3/tm.svg")}.tn{background-image:url("../flags/4x3/tn.svg")}.to{background-image:url("../flags/4x3/to.svg")}.tr{background-image:url("../flags/4x3/tr.svg")}.tt{background-image:url("../flags/4x3/tt.svg")}.tv{background-image:url("../flags/4x3/tv.svg")}.tw{background-image:url("../flags/4x3/tw.svg")}.tz{background-image:url("../flags/4x3/tz.svg")}.ua{background-image:url("../flags/4x3/ua.svg")}.ug{background-image:url("../flags/4x3/ug.svg")}.um{background-image:url("../flags/4x3/um.svg")}.us{background-image:url("../flags/4x3/us.svg")}.uy{background-image:url("../flags/4x3/uy.svg")}.uz{background-image:url("../flags/4x3/uz.svg")}.va{background-image:url("../flags/4x3/va.svg")}.vc{background-image:url("../flags/4x3/vc.svg")}.ve{background-image:url("../flags/4x3/ve.svg")}.vg{background-image:url("../flags/4x3/vg.svg")}.vi{background-image:url("../flags/4x3/vi.svg")}.vn{background-image:url("../flags/4x3/vn.svg")}.vu{background-image:url("../flags/4x3/vu.svg")}.wf{background-image:url("../flags/4x3/wf.svg")}.ws{background-image:url("../flags/4x3/ws.svg")}.xk{background-image:url("../flags/4x3/xk.svg")}.ye{background-image:url("../flags/4x3/ye.svg")}.yt{background-image:url("../flags/4x3/yt.svg")}.za{background-image:url("../flags/4x3/za.svg")}.zm{background-image:url("../flags/4x3/zm.svg")}.zw{background-image:url("../flags/4x3/zw.svg")}
diff --git a/src/_common.scss b/src/_common.scss
new file mode 100644
index 0000000..e63f97d
--- /dev/null
+++ b/src/_common.scss
@@ -0,0 +1,76 @@
+@import "_variables";
+@import "_mixins";
+
+// base extend
+%fp-base {
+  position: relative;
+  display: inline-block;
+  background-size: auto 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  &:before {
+    content: "\00a0";
+  }
+}
+
+.#{$fp-prefix} {
+  @extend %fp-base;
+  // 4x3
+  @if $fp-enable-4x3 == true {
+    @include fp-size($fp-size);
+  }
+  // 1x1
+  @if $fp-enable-1x1 == true {
+    &.#{$fp-prefix}-square {
+      @include fp-size($fp-size, "1x1");
+    }
+  }
+  // rounded
+  @if $fp-enable-rounded == true {
+    &.#{$fp-prefix}-rounded {
+      @include fp-rounded($fp-size / 6);
+    }
+  }
+  // medium size
+  @if $fp-size-md == true {
+    &.#{$fp-prefix}-md {
+      // 4x3 medium
+      @if $fp-enable-4x3 == true {
+        @include fp-size($fp-size * 1.5);
+      }
+      // 1x1 medium
+      @if $fp-enable-1x1 == true {
+        &.#{$fp-prefix}-square {
+          @include fp-size($fp-size * 1.5, "1x1");
+        }
+      }
+      // rounded medium
+      @if $fp-enable-rounded == true {
+        &.#{$fp-prefix}-rounded {
+          @include fp-rounded($fp-size / 4);
+        }
+      }
+    }
+  }
+  // large size
+  @if $fp-size-lg == true {
+    &.#{$fp-prefix}-lg {
+      // 4x3 large
+      @if $fp-enable-4x3 == true {
+        @include fp-size($fp-size * 2);
+      }
+      // 1x1 large
+      @if $fp-enable-1x1 == true {
+        &.#{$fp-prefix}-square {
+          @include fp-size($fp-size * 2, "1x1");
+        }
+      }
+      // rounded large
+      @if $fp-enable-rounded == true {
+        &.#{$fp-prefix}-rounded {
+          @include fp-rounded($fp-size / 4);
+        }
+      }
+    }
+  }
+}
diff --git a/src/_variables.scss b/src/_variables.scss
index 94a6801..144c191 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -34,14 +34,3 @@ $fp-enable-rounded: true !default;
 // paths
 $fp-4x3-path: "../flags/4x3/" !default;
 $fp-1x1-path: "../flags/1x1/" !default;
-// base extend
-%fp-base {
-  position: relative;
-  display: inline-block;
-  background-size: auto 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  &:before {
-    content: "\00a0";
-  }
-}
diff --git a/src/flagpack.scss b/src/flagpack.scss
index f6df846..377cc73 100644
--- a/src/flagpack.scss
+++ b/src/flagpack.scss
@@ -1,67 +1,6 @@
 @import "_variables";
-@import "_mixins";
 
-.#{$fp-prefix} {
-  @extend %fp-base;
-  // 4x3
-  @if $fp-enable-4x3 == true {
-    @include fp-size($fp-size);
-  }
-  // 1x1
-  @if $fp-enable-1x1 == true {
-    &.#{$fp-prefix}-square {
-      @include fp-size($fp-size, "1x1");
-    }
-  }
-  // rounded
-  @if $fp-enable-rounded == true {
-    &.#{$fp-prefix}-rounded {
-      @include fp-rounded($fp-size / 6);
-    }
-  }
-  // medium size
-  @if $fp-size-md == true {
-    &.#{$fp-prefix}-md {
-      // 4x3 medium
-      @if $fp-enable-4x3 == true {
-        @include fp-size($fp-size * 1.5);
-      }
-      // 1x1 medium
-      @if $fp-enable-1x1 == true {
-        &.#{$fp-prefix}-square {
-          @include fp-size($fp-size * 1.5, "1x1");
-        }
-      }
-      // rounded medium
-      @if $fp-enable-rounded == true {
-        &.#{$fp-prefix}-rounded {
-          @include fp-rounded($fp-size / 4);
-        }
-      }
-    }
-  }
-  // large size
-  @if $fp-size-lg == true {
-    &.#{$fp-prefix}-lg {
-      // 4x3 large
-      @if $fp-enable-4x3 == true {
-        @include fp-size($fp-size * 2);
-      }
-      // 1x1 large
-      @if $fp-enable-1x1 == true {
-        &.#{$fp-prefix}-square {
-          @include fp-size($fp-size * 2, "1x1");
-        }
-      }
-      // rounded large
-      @if $fp-enable-rounded == true {
-        &.#{$fp-prefix}-rounded {
-          @include fp-rounded($fp-size / 4);
-        }
-      }
-    }
-  }
-}
+@import "_common";
 
 @each $country in $fp-countries {
   @if $fp-prepend == true {
diff --git a/src/flagpack_1x1.scss b/src/flagpack_1x1.scss
new file mode 100644
index 0000000..e3016cd
--- /dev/null
+++ b/src/flagpack_1x1.scss
@@ -0,0 +1,23 @@
+@import "_variables";
+
+@import "common";
+
+@each $country in $fp-countries {
+  @if $fp-prepend == true {
+    .#{$fp-prefix}-#{$country} {
+      @if $fp-enable-1x1 == true {
+        &.#{$fp-prefix}-square {
+          background-image: url("#{$fp-1x1-path}#{$country}.svg");
+        }
+      }
+    }
+  } @else {
+    .#{$country} {
+      @if $fp-enable-1x1 == true {
+        &.#{$fp-prefix}-square {
+          background-image: url("#{$fp-1x1-path}#{$country}.svg");
+        }
+      }
+    }
+  }
+}
diff --git a/src/flagpack_4x3.scss b/src/flagpack_4x3.scss
new file mode 100644
index 0000000..cb7a201
--- /dev/null
+++ b/src/flagpack_4x3.scss
@@ -0,0 +1,19 @@
+@import "_variables";
+
+@import "common";
+
+@each $country in $fp-countries {
+  @if $fp-prepend == true {
+    .#{$fp-prefix}-#{$country} {
+      @if $fp-enable-4x3 == true {
+        background-image: url("#{$fp-4x3-path}#{$country}.svg");
+      }
+    }
+  } @else {
+    .#{$country} {
+      @if $fp-enable-4x3 == true {
+        background-image: url("#{$fp-4x3-path}#{$country}.svg");
+      }
+    }
+  }
+}