És megszületé' BB8, kinek csupa div a teste

Akárhányszor láttam egy div-ekkel összehákolt CSS rajzot Codepenen, mindig arra gondoltam, hogy mekkora beteg állat, aki ilyeneket csinál.
Aztán megcsináltam én is BB8-et…

Itt is van BB8, akit PUG és SASS előfeldolgozókkal csináltam Codepenen és nem áll másból, mint sok-sok divből.

See the Pen BB8 with sass by Soma Szoboszlai (@szsoma) on CodePen.

A HTML struktúra PUGgal készült.

Ez egy node.js template engine, ami egy igazi HTML kódot generál nekünk. Mindezt egy sokkal kevesebb, egyszerűbben írható kódból.

A kis mopsszal gyorsabban lehet megírni a HTML-t, és a Codepen-en nem is kell törődnünk az installal és a fordítással. Érdemes még tudni róla, hogy korábban JADEként volt ismert, de aztán átnevezték. Van egy fontos dolog, amit be kell tartani vele, mégpedig az, hogy a taboknak nagy szerepük van. Mivel nem kell törődni záró tagekkel, a tabolás jelenti a hierarchiát a kódunkban, csak úgy, mint a SASS kódokban.

Itt egy rövid példa:

PUG:
.dot.dot-1
        .line.line-1
        .line.line-2
        .line.line-3

HTML:
<div class="dot dot-1">
        <div class="line line-1"></div>
        <div class="line line-2"></div>
        <div class="line line-3"></div>
</div>

Látszik, hogy rengeteg karaktert tudunk spórolni vele. Na de vissza BB8-re!

A lényeg, hogy egy bb8-headre és egy bb8-bodyra van osztva a droid. Ezek a szülők és bennük pedig további divek vannak classokkal. Ahogy azt a fentebbi kód is mutatja. Az alakzatok (pl narancs körök, vonalak, lencse csillogása stb) túllógását úgy oldottam meg, hogy a szülő kapott egy

overflow: hidden

tulajdonságot. Ez a “kilógó” részeket le fogja vágni nekünk. Vagyis így maszkoltam ki. (ha már grafikus vagyok:)

SASS

BB8 méretét is dinamikusan szerettem volna megoldani, ezért egy változóban megadtam az alap méretet, ami 220px:

$d: 220px //bb8s size

Ezután minden kis alkatrészének méretét ezzel a $d értékkel fejeztem ki. Pl:

.body-shadow
	width: $d
	height: $d
.circle
  width: $d*.6

Ha ezt a $d változót módosítjuk, akkor nem fog szétesni a droid a nagyítás miatt, mert az arányok megmaradnak. Ez tök jó, mert később majd tovább dolgozhatok a reszponzivitáson. A CSS ilyen hiányosságának kiküszöbölésére SASS-t használtam. Egy bonyolultabb oldalnál érdemes elgondolkozni rajta, ugyanis rengeteg lehetőséget ad nekünk a CSS mellett:

1. Változók használata
2. Egyszerű aritmetikai műveletek
3. Ciklusok használata
4. Beépített függvények használata
5. Saját függvények írása
6. Beágyazhatóság az átláthatóbb kódért
7. if-else és még sok más

Ebben a példában azt láthatjátok, hogy hogyan oldottam meg a korábbi szerencsekerekes penemben a színezést SASS segítségével.
Pen itt!!
Blog post itt!

De most akkor SASS vagy SCSS?

Amikor SASSról beszélünk akkor nem mindig tiszta mit is használunk. Amikor azt mondjuk, hogy “Itt egy SASS mixin” akkor azt két formában is leírhatjuk:

1. SASS, ami egy “indented” (beágyazott vagy ilyesmi) szintaktika. Ezt használtam BB8-hez, mert gyors, nem kell írogatni a zárójeleket.
2. SCSS, ami az előfeldolgozónak egy CSS szerű szintaktikája, csak kibővítve a plusz funkciókkal. Ezt használtam a Lucky Wheel penben.

Okés, erről majd kicsit később csinálok egy postot. (Annyi minden van már a fejemben, hogy miről kellene írni, hogy kezdek elveszni. 😥)

Konklúzió

Egy ilyen kis hülyeségnek a megalkotása érdemben lehet, hogy nem fog hozzásegíteni egy menő protfólióhoz, referenciamunkához vagy épp álláshoz. Viszont nagyon vicces, és tök menő, hogy miket meg lehet oldani CSSsel. Ennek a pennek a célja a pozícionálás gyakorlása volt. Szerintem egy ilyen feladattal jól el lehet mélyíteni a tudást és a végére tuti kikupálódik az ember belőle. 😎