Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

Diskusia – 2. diel - Úvod do CSS preprocesora Sass

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre
Avatar
Robin
Člen
Avatar
Robin:10.5.2019 11:47

Ahoj, může mi prosím někdo vysvětlit na praktickém příkladu, proč bych měl psát partials, které potom nebudu kompilovat? Není lepší požadované vlastnosti nasekat do stejného souboru místo importování? Mě to prostě nejde do hlavy :-)

Jinak díky za skvělej článek, hodně jsem se toho přiučil :-).

Odpovedať
10.5.2019 11:47
Nikdy neříkej, že něco nejde, protože se vždycky najde nějakej blbec, kterej neví, že to nejde a udělá to
Avatar
Michal Šmahel
Člen
Avatar
Odpovedá na Robin
Michal Šmahel:10.5.2019 15:23

Ahoj, důvod je prostý - aby ses v tom lépe orientoval. Rozvedu.

Dejme tomu, že budeš mít nějaký trochu větší stylopis, který bude mít 2000 řádků (pořád je malý, ale na můj výklad postačí). Bude sloužit například pro stylování nějakého blogu. Blog obsahuje několik základních komponent (tlačítko, nadpisy, seznamy, menu, ...), které tvoří většinu webu.

Přístup I. - vše v jednom souboru
Veškerý SCSS kód je obsažen v jednom souboru, typicky style.scss. Jelikož je soubor větší (zmiňované 2000 řádků), je obtížné se v něm vyznat. Během vývoje se to následně projevuje často tak, že nehledáš, jestli se v kódu vyskytuje podobná komponenta, ale prostě jen na konec připíšeš její styly. V lepším případě máš tento soubor rozdělen do sekcí, takže najdeš správnou sekci a vložíš nový kód do ní. Sekce se ovšem s rostoucí velikostí souboru stále hůř hledají a obtížněji se s nimi pracuje.

Nastává problém, protože se tvoří redundantní kód (vyskytují se duplicity). Potřebuješ-li poté upravit něco obecnějšího, musíš to změnit všude. Navíc soubor zbytečně nabývá na velikosti (jsou tam tytéž věci víckrát). S tím se opět vše komplikuje a často musíš dělat různé rutinní udržovací práce.

Příklad II. - využití partials
Máme stanovenou určitou adresářovou strukturu, kde každá složka obsahuje jeden typ komponent, resp. funkcionalit preprocesoru (funkce, mixiny, globální proměnné, rozložení, malé komponenty, formuláře, ...). Ve složkách jsou jednotlivé skupiny komponent (tlačítka, seznamy, menu, reklamy, stránkování, ...) odděleny do samostatných _*.scss souborů. Pokud nyní potřebuješ přidat komponentu, otevřeš si soubor, do kterého patří, podíváš se, jestli už nemáš vytvořenou nějakou obecnou, která odpovídá řešení tvého problému a případně ji můžeš využít (přidat novou modifikaci). Pokud ne, vytvoříš samozřejmě novou. Výhodou je, že máš jen několik základních komponent, z nichž poté odvozuješ další. Nevzniká tak redundantní kód. Jednotlivé dílčí soubory jsou jednoduché, přehledné a snadno rozvíjetelné. Můžeš je také jednoduše zkopírovat a využívat i v dalších projektech, aniž bys do nich zanesl hromadu nepoužitelného kódu (pro daný projekt).

Odpovedať
+4
10.5.2019 15:23
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Robin
Člen
Avatar
Odpovedá na Michal Šmahel
Robin:11.5.2019 22:05

Rozumim. Já jsem zatím nikdy nedělal větší projekty.
Děkuji ti za tvou odpověď :-)

Odpovedať
11.5.2019 22:05
Nikdy neříkej, že něco nejde, protože se vždycky najde nějakej blbec, kterej neví, že to nejde a udělá to
Avatar
Tony IR
Člen
Avatar
Tony IR:12.11.2019 15:01

Super kurz, bavi me.

Odpovedať
12.11.2019 15:01
Vse se da naucit ;-]
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 4 správy z 54.