SASS/SCSS alapok
Van HTML haladó CSS és alapszíntű programozási ismereted? A SASS/SCSS alapok tananyagban megkapod azt a biztos tudást, amit a következő fejlesztésnél már élesben is használhatsz. Cél, az SASS/SCSS preprocesszor használat alapjainak elsajátítása.
- Források
- Errata
- Bevezető
- Tematika
- Bevezető
- Az elkészítendő hamburgermenü bemutatása
- A HTML template létrehozása
- A nav elem formázása
- A SASS telepítése, használata
- A navon belüli div formázása
- A lista formázása
- A listaelemek és a linkek formázása
- A checkbox és a label formázása, a reszponzív működés megvalósítása
- Az egymásba ágyazás alapjai - nesting
- A hamburgermenü átalakítása
- A CSS BEM elnevezési konvenció
- BEM és nesting
- BEM, nesting, egyszerűsítések
- Változók, változók típusai
- A változók hatóköre
- Shadowing
- Globális változók értékének módosítása
- Operátorok
- Egyenlőségvizsgálat
- Relációs operátorok
- Matematikai operátorok
- String-operátorok
- Logikai műveletek
- Változók használata a hamburgermenünél
- Az @import rule
- A @use rule
- A @use rule saját namespace-szel
- A @forward rule
- Bevezető
- Az elkészítendő gombok bemutatása
- Egy gomb elkészítése
- Több gomb készítése nestinggel I.
- Több gomb készítése nestinggel II.
- Több gomb készítése nestinggel III.
- Mixinek
- Mixinek használata I.
- Mixinek használata II.
- Az @extend rule
- Helyőrzők használata
- Mixinek használata III.
- Beépített modulok, a color modul
- Bevezető
- A map SASS modul, a map adatszerkezet
- Map funkciók
- Színpaletta projekt ismertetése
- Mapben értékek használata CSS-tulajdonságoknál
- A @for vezérlési szerkezet
- Az @each vezérlési szerkezet
- Az @if vezérlési szerkezet
- Class-ek tömeges generálása az @each segítségével
- Mixinek használata ciklusokkal I.
- Mixinek használata ciklusokkal II.
- Refactoring, egy SASS-projekt struktúrája
- Listák használata
- Ciklusok egymásba ágyazása, világosabb színek generálása
- Ciklusok egymásba ágyazása, sötétebb színek generálása
- A map.merge funkció használata
- Mapek egymásba ágyazása I.
- Mapek egymásba ágyazása II.
- Mapek egymásba ágyazása III.
- Függvények használata SASS-ben
- Arbitrary argument használata függvényeknél
- Saját függvények írása I. - elem törlése listából
- Saját függvények írása II. - művelet string-ekkel
- Saját függvények írása III. - érték lekérése összetett adatszerkezetekből
- Függvények használata a projekten belül
- Újabb színtéma hozzáadása a projekthez
- Színtémák összehangolása
- Színtémák használata, váltás a színtémák között
- Alapértelmezett színtéma beállítása
- Projekt kódjának letisztázása
- Bevezető
- A projekt bemutatása
- A projekt mappastruktúrája, a konfigurációs map elkészítése
- Media query-k létrehozása mixinekkel
- Egyéb media query-k létrehozása
- Konténer elem stílusának elkészítése
- Az oszlopok alapértelmezett stílusának elkészítése
- Az oszlopok szélességének beállítására szolgáló mixin létrehozása
- Az oszlopok szélességértékének visszaadása függvénnyel
- String-szám konverzió
- Csoportos class-generáltatás
- A projekt tesztelése
- Konfigurációmódosítás, továbbfejlesztései lehetőségek
- Kvíz - SASS/SCSS alapok
Az oktatóról
2008 óta foglalkozom webfejlesztéssel és oktatással egyaránt. 2017 óta tanítok a Training360-nál. Otthonosan mozgok a HTML-CSS-JavaScript hármas és a hozzájuk kapcsolódó technológiák valamint a Python világában. Engem ért a megtiszteltetés, hogy négy alkalommal is összeállíthattam egy-egy feladatsort az Országos IT megmérettetésre. Vallom, hogy ugyanolyan káros a „csak gyakorlati”, mint a „csak elméleti” oktatás. Imádom a naív dolgokat, és nem követem a divatot a programozás terén (sem). Szabadidőmben szívesen írok, blogolok, olvasok, gitározom, túrázom. Már ha van szabadidőm.
