P-02420-K1K0K8

SASS/SCSS alapok • E-learning

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.
Elérhető képzési nyelvek
  • Magyar
Képzési forma
Személyre szabott ajánlatot szeretnél?
Kollégáink készséggel állnak rendelkezésedre, hogy segítsenek a neked megfelelő megoldás kialakításában.
Ajánlatot kérek

Tematika

SASS alapok
  • Források
  • Errata
  • Bevezető
  • Tematika
Hamburgermenü
  • 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
Gombok
  • 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
Színpaletta
  • 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
Rácsrendszer
  • 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
  • Kvíz - SASS/SCSS alapok
Tematika (PDF)