Vďaka Sass napíšeš menej CSS kódu.
A bude prehľadnejší. A napíšeš ho rýchlejšie.
Prestaneš si trhať vlasy a CSS ťa začne baviť. Tak.

35 čisto nových videí.
Za 49 eur. Zdarma ak máš predplatné.

Nový Webrebel kurz kupuj tu: CSS preprocesory: Sass

pozri si pár ukážkok z kurzu, ňach máš predstavu, šak nebudeš kupovať len tak, ňe?

Už nemusíš loviť farby a hľadať, na ktorom riadku v CSS si nastavil ten font-weight. Prestaneš rozmýšlať nad prefixami. Neotvoríš Photoshop len preto, aby si našiel tmavší odtieň farby. Už nemusíš HEX farby prehadzovať na RGB len preto, aby si nastavil polo-priesvitné pozadie. Pri responzívnom dizajne Sass za teba prepočíta pixely na percentá.

Môžeš si svoj kód rozdeliť na koľko len súborov chceš a tvoj prehliadač aj tak vždy dostane len jeden, z ktorého sa automaticky odstránia nadbytočné znaky a komentáre, pre rýchle načítavanie. Môžeš si vytvárať $premenné, kam uložíš všetky často používané / meniace sa hodnoty. Môžeš si písať vlastné funkcie(), ktoré ti spravia poriadok v kóde, alebo používať kopu predvyrobených.

Sass je guča život zlepšujúcich drobností, vďaka ktorým ťa CSS začne baviť:)
A ak nie, tak ťa minimálne prestane otravovať. A to sa pri CSS počíta.

 

CSS PREPROCESORY

Prehliadač rozumie trom veciam - HTMLku, CSSku a JavaScriptu.
Ostatné technológie nám pomahájú vyrobiť tieto tri srandy.
Napríklad PHP nám pomáha vyrobiť HTML. Sass nám pomáha vyrobiť CSS.

Výhoda Sass je ale v tom, že sa nemusíš učiť žiadne nové, veľké koncepty. Sass len do CSS, ktoré už poznáš, pridá pár noviniek. Možnosť odložiť si hodnotu a použiť ju neskôr na viacerých miestach. Možnosť automaticky zmeniť farbu na jej tmavšiu verziu, keď prídeš myšou na link. Uložiť si zoznam farieb a nechať si automaticky vyrobiť CSS pre gombík každej farby. Toto obsasskované CSS sa potom zmení na klasický CSS kód, ktorému prehliadač rozumie.

Peprocesor je program, ktorý spracuje kód v jednom formáte (Sass) a zmení ho na kód v druhom formáte (CSS). Neboj, toto sa deje automaticky. Ty píšeš nový, moderný Sass a prehliadač dostáva obyčajné CSS. A ak chceš, automaticky spojí všetky tvoje CSS súbory do jedného a odstráni z nich nadbytočné medzery a komentáre #efektivita #bitch.

Podobne to dnes funguje s JavaScriptom. Jazyky a technológie sa postupne vyvíjajú, prichádzajú do nich novinky, ale staré prehliadačne im nerozumejú. Existujú však programy, ktoré vedia nový kód preložiť do starého, ktorému rozumie každý. Čiže ty píšeš pekný, nový, prehľadný kód a tvoj život je lepší. Ten sa potom zmení na starý, hnusný kód, ktorý funguje všade. Ale teba jeho hnusnosť nezaujíma. Lebo ty píšeš krásnotu novučičkú.

V kurze vysvetlím preprocesory, ukážem ako ich používať cez konzolu aj bez nej, ak ti nechutí. Porozprávam o Source Maps, Autoreload, Google Chrome Workspaces, potom vyrobím celú stránku, komplet v SCSS. Komplet dizajn od nuly. Takže si zopakuješ CSS a naučíš sa preň kopu nových frajerín.

 

CHÝBAJÚCI ČLÁNOK WEBREBEL KURZU

Prvý Webrebel je masívny kurz. Ale pôvodne mal byť masívnejší. Chcel som, aby to šl takto: HTML, CSS, Responsive, Sass, jQuery. Vtedy nebol čas a priestor, ale som rád, že som nakoniec ten chýbajúci článok doplnil, novým kurzom.

Ak máš Webrebela, odporúčam po responzívnom dizajne si odskočiť do Sass a až potom sa vrátiť k jQuery:) Mnohí študáci tam narazili na stenu a s kurzom prestali. Je to pochopiteľné, pretože v jQuery časti sa musíš naučiť nielen novú technológiu, so všetkými tými značkami a zátvorkami a sprostosťami, ale navyše pochopiť základy programovania. Vysvetlené na jazyku, ktorý nepoznáš.

Podľa mňa princípy programovania pochopíš oveľa jednoduchšie, keď ich uvidíš ukázané na CSSku, ktoré už ovládaš. Na skutočných príkladoch. V Sass nie je veľa programovania, len štipka a aj to len vtedy, keď chceš. Ale dosť na to, aby si porozumel výhodám, ktoré ti premenné, funkcie a polia ponúkajú. Keď si to vyskúšaš na CSS a zistíš, ako neskutočne ti ich použitie zjednoduší a zrýchli písanie kódu, v jQuery ti už problém robiť nebudú.

Aj keby ťa programovanie nezaujíma, choď do Sass. Pretože ti zjednoduší prácu s CSSkom. Nemusíš byť programátor, aby si ho vedel používať, vôbec sa neboj. Je to len CSS, ktoré sa naučilo pár nových vecí. Veď si pozri pár videí a uvidíš:)

 

IDEME NA JAVASCRIPT KURZ

Zrejme pôjde von niekoľko JavaScript kurzov. Prvý z nich bude zameraný na čistý JavaScript, žiadne frameworky. JavaScript v prehliadači, ES2016/17, Babel, Typescript, npm/yarn. Efektívny JavaScript a rýchle animácie. Kopu materiálu naň už mám pripravenú. Chcem, aby sa začal predávať tento rok.

Potom kurz o vue.js a single-page aplikáciách.

A zrejme aj samostatný kurz o základoch programovania v JavaScripte. Pretože prvý JS kurz bude predpokladať, že s programovaním už nejaké skúsenosti máš. Nemusíš byť majster, ale niečo vedieť treba. V kurzoch sa budem venovať hlavne špecifikám JavaScriptu a rozdielom oproti ostatným programovacím jazykom.

Mám nápady aj na ďalšie JS kurzy, ale týmto to začne.
Predtým však...

 

CSS preprocesory: Sass sa dá kúpiť tu za 49 eur.

1. Sass je CSS, len viac
2. Čo sú CSS preprocesory? (teória)
3. Sass vs SCSS syntax, programy čo používam v kurze
4. Sass cez programy (inštalácia + prax)
5. Sass cez konzolu, Output Styles (inštalácia + prax)
6. DRY (Don't Repeat Yourself), názvy premenných (rada)
7. Livestyle Autoreload, Source Maps (.map), Chrome Workspaces

rozbaliť zvyšné epizódy

8. Projekt začína, bojová analýza nech viem čo robím
9. Sass komentáre, život zlepšujúce drobnosti
10. Premenné v CSS, odlož si na neskôr
11. Nesting v CSS, vnor kód pod kód
12. & parent selector, nepreháňaj ten nesting
13. Funkcie na farby, rodič na divných miestach
14. FarbičkyFarbičkyFarbičky
15. Farebné operácie, Colors (of not Ostrava)
16. Programátor má byť lenivý, úvod do polí a cyklov
17. Polia, Sass mapy, Each cyklus
18. "Nepoužívam všetko, asi som zlý programátor"
19. Partials, Sass @import vs CSS @import, čistý kód
20. Sass mixiny a CSS prefixiny
21. @mixins will fixins
22. Gombíky farebné cez @mixiny hanebné
23. @include vs @extend vs %placeholder
24. Fallback, záložné hodnoty a poľné repete
25. Správne premenné, gombíky cyklom cez Sass mapu
26. @if podmienky
27. HTML debug, kód prehľadný, nie prehnaný
28. Responsive Sass, sprav target/context za mňa
29. Sass funkcie() vs @mixiny
30. Interaktívna konzola, percentage() pre rezponzívny layout
31. Dizajnová upratovačka
32. Sass @content
33. @else a dokončenie dizajnu podstránok
34. Nested @media queries, Compass, Bourbon a GRATULÁCIE
35. Zadávam ti zadania™

Ak chceš nové info o všetkom, choď na facebook.com/yablko.smrdi.
Ak chceš ďalšie moje videá, choď na youtube.com/yablko.
Ak chceš všetky kurz na rok, skús predplatné.
Ak sa ti kurz páči, povedz každému:)