Moderni CSS s SASS

Sodoben CSS s Sass - praktični priročnik

Jezik: nemščina

Sodoben CSS z Sass - vajeniški vodič

Vedno te je jezilo, da v CSS ni spremenljivk in zank? S tem je konec! Predprocesorji CSS, kot je Sass, omogočajo ravno te stvari. Tako je možno končno učinkovito generirati CSS-kodo. Poleg Sassa se v tem vadnicivedno pogleda tudi na priljubljeni Compass-Framework, ki dviguje uporabo Sassa na novo raven. Spoznaj v treh urah možnosti, ki jih imata Sass in Compass na voljo.

Postani mojster Sassa s tem tritim urnim video tečajem in spletnim razvijalcem Danielom Kochom.
Definiraj spremenljivke, ustvari lastne mešane funkcije, eksperimentiraj z barvami in števili ter na vrhuncu uporabi Compass.
Nauči se učinkovito ustvariti CSS in uporabiti svoje novo znanje za prihodnje projekte.

Korak za korakom do profesionalnega razvoja CSS-ja. Če CSS, potem sodobno in s Sass - Daniel Koch ti pokaže!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

podrobnosti

Uporablja se lahko z:
Vsebina: 3 h Video vadničenje
Licenca: zasebna in komercialna Pravice uporabe

Kategorije

Spletno oblikovanje, CMS in razvoj

Z ljubeznijo ustvarjeno od:

Daniel Koch

Sodoben CSS z Sass

Brezplačno

Sodobni CSS z Sass - 01 Uvod

Zahvaljujoč predprocesorjem CSS lahko CSS pišemo veliko bolj učinkovito. Kaj so ti predprocesorji, katere obstajajo in zakaj je izbira v tem primeru padla na Sass, pa prikazuje ta video.

Sodoben CSS s Sass – 02 Namestitev

Preden lahko uporabite Sass, ga morate namestiti. In za to je potreben Ruby. Oba - torej namestitev Rubyja in Sassa - bosta prikazana v tem videu. Nato lahko takoj preverite, ali je namestitev Sassa dejansko uspela.

Sodoben CSS s Sass - 03 Doživeto prevajanje

Sodoben CSS s Sassom - 03 Vešča kompilacija

Sass-je treba pretvoriti v CSS-datoteke, da jih lahko dejansko uporabljate. Zahvaljujoč Watch ukazu lahko enostavno zaznate spremembe v posameznih datotekah ali v celotnih mapah.

Sodobni CSS s Sassom - združevanje datotek 04

Z Ukazom @import je mogoče uvoziti in združiti datoteke SCSS. Kaj vse ima to opraviti s predpono podčrtaja v imenu datoteke, je en vidik tega videoposnetka.

Moderno CSS z Sass - 05 deklaracija in uporaba spremenljivk

Sodoben CSS s Sass - 05 Deklaracija in uporaba spremenljivk

V Sassu je možnost deklaracije spremenljivk. Ta koncept v običajnem CSS-u očitno ni na voljo, vendar je v Sassu genialno sredstvo za učinkovit razvoj slogovnih listov.

Sodoben CSS s Sass - 06 Načelo gnezdenja

Sodoben CSS s Sass - 06 Načelo gneždenja

Zahvaljujoč gnezdjenju je mogoče sintakso Sassa obdržati veliko bolj jedrnato, kot je običajno pri CSS. Tudi pomaga vam, da kodo napišete veliko pregledneje.

Sodoben CSS z Sass– 07 Dovadljivo dedovanje z Extend

Sodoben CSS s Sass – 07 Umetna dedovanje z Extend

Uporaba @extend vam omogoča prenos nabora CSS lastnosti od enega do drugega selektorja. Tudi to vam pomaga ohranjati datoteke Sass preproste.

Sodoben CSS s Sass - 08 modulov s place holder selektorji

Sodoben CSS z Sass - 08 modulov s place-holder selektorji.

Izbrani selektor omogoča definicijo modulov. Ta modularizacija omogoča razdelitev Sass sintakse na logične bloke, ki jih je mogoče vključiti na različnih mestih.

Sodoben CSS z Sass - 09 določanje mešalnikov.

Sodoben CSS z Sass - 09 definicij mešalnikov

Mixini so funkcije, s pomočjo katerih je mogoče bistveno poenostaviti delovne procese. V tem videu je prikazano, kako lahko definirate svoje lastne mixine in jih nazadnje uporabite.

Sodoben CSS s Sass - 10 Selektor nadrejenega elementa

Sodoben CSS s Sass - 10 Izbor starševskega elementa

S selektorjem, o katerem gre v tem videu, lahko dostopate do starševskega elementa elementa. Ta selektor v CSS-ju znanstveno ni in ponuja zato ogromno dodatno vrednost.

Sodobni CSS s Sass - Avtomatizacija z zankami For.

Sodoben CSS s Sassom - 11 Avtomatizacija z zanko For

Sass omogoča uporabo for zank. To deluje zelo enostavno v Sass-u in se lahko na primer uporabi za definiranje lastnega mrežnega sistema.

Sodoben CSS z Sass - 12 Vsaka in While zanke

Sodoben CSS s Sassom - 12 loop in while zanke.

Poleg For-zanke se lahko v Sassu uporabljata tudi Each- in While-zanke. Kako lahko to izkoristimo za avtomatizacijo, pa prikazuje to video.

Sodobni CSS z Sassom - 13 odločitev s pomočjo if in else.

Sodoben CSS z Sassom - 13 odločitev z if in else

V jezikih, kot sta PHP in JavaScript, obstaja možnost odzivanja na različne dogodke s pomočjo izjave if in else. To vrsto možnosti dejansko obstaja tudi v Sassu. Kako to izkoristiti, prikazuje to video.

Sodobni CSS s Sass - 14 matematičnih operaterjev

Sodoben CSS s Sass – 14 matematičnih operatorjev

Lahko računate v Sassu. To je na primer praktično glede določitve velikosti pisave. Zahvaljujoč ustreznim operatorjem pa lahko tudi ustvarite svoj lasten mrežni sistem.

Sodobni CSS s Sass - 15 barvnih iger

Seveda je mogoče v Sassu definirati barve. Vendar Sass gre tudi na tem področju precej dlje kot običajni CSS. Zahvaljujoč ustreznim funkcijam, je na primer mogoče enostavno manipulirati barve.

Sodoben Sass s CSS - 16 žarek

Compass-ov okvir še dodatno razširi možnosti Sass, Ta prvi video prikazuje, kako namestiti in uporabljati Compass.

Sodoben CSS s Sass - 17 Compass in CSS3

Spletna stran projekta Compass je osrednje informacijsko sredstvo, kadar gre za delo s tem ogrodjem. Pokazal vam bom, kako lahko delate z dokumentacijo CSS3 z orodjem Compass.

Sodoben CSS s Sass - 18 Compass v akciji v povezavi z Susyjem.

Sodoben CSS s Sass - 18 Compass v akciji s pomočjo puščice in pogled na Susy.

Primer prikazuje, kako enostavno je stvari mogoče implementirati s Compassom. Na koncu te serije se bo tudi pogledalo alternativni Sass ogrodje. Susy ponuja vitki sistem mreže.

Podrobnosti vsebine

CSS na učinkovit način - s Sassom: začni s praktičnim vadnicem
Sass je revolucioniral razvoj CSS, saj je končno mogoče učinkovito pisati CSS-kodo. V treh urah s 18 lekcijami se naučiš vse pomembno o Sassu in Sass-Frameworku Compass.

Namestitev okolja za razvoj Sassa

Preden se podaš na pot Sass potovanja v vadnico CSS, je treba opraviti namestitev. Ampak ne skrbi - ta je zelo enostavna. Ruby in nekaj ukazov v ukazni vrstici zadostujejo, da postaneš ponosen lastnik okolja za razvoj Sassa. Tisti, ki so se doslej branili namestitve Sassa, bodo korak za korakom vodeni skozi postopek namestitve. Prva preizkus bo pokazal, katera verzija Sassa je nameščena.

Prvi koraki z običajno projektno strukturo

Nato sledijo prvi koraki: Začni s Sassom! Po prvem ogledu sintakse sledijo osnovne jezikovne posebnosti. Spoznaš spremenljivke, vidiš tipično projektno strukturo in se hitro znajdeš v Sassu.

Razvoj: Zanke in stavek If

Po pripravljenosti se prične profesionalni razvoj: To, kar Sass resnično izstopa, so stvari, ki se že skoraj spominjajo pravih skriptnih jezikov, kot je JavaScript. Tudi v Sassu je mogoče definirati zanke in uporabljati stavke If. Te stvari so tudi osnovni pogoj za kraljevsko disciplino v Sassu - definicijo mešalnikov. To so zmogljive funkcije, ki vam olajšajo delo z Sassom, in nazadnje tudi z CSS znatno olajšajo delo.

Compass: Poenostavi delo s CSS

Kronski zaključek te vadnice je Compass. To dvigne razvoj Sassa na povsem drugo raven, saj to Sass-Framework ponuja številna orodja in funkcije, ki znatno olajšajo delo s CSS.

To se naučite v vadnici CSS in Sassa

Postopoma se naučite funkcij Sassa, od začetka do profesionalnih orodij in do dela s Compassom. Tako dobite informacije o tem, kaj je trenutno mogoče, in lahko svoje znanje takoj uporabite. Pisanje CSS-ja še nikoli ni bilo tako učinkovito!