CSS modern cu SASS

Limba: Germană

CSS modern cu Sass - Tutorial practic

Te-ai enervat intotdeauna ca in CSS nu exista variabile si bucle? Gata cu asta! Preprocesoarele CSS precum Sass ofera exact aceste functionalitati. Astfel, codul CSS poate fi generat intr-un mod eficient. Pe langa Sass, in acest tutorial se va arunca si o privire asupra framework-ului popular Compass, care ridica utilizarea lui Sass la un alt nivel. Invata in trei ore posibilitatile pe care le ofera Sass si Compass.

Vei deveni maestru în Sass cu acest curs video de trei ore condus de dezvoltatorul web Daniel Koch.
Define variabilele, creează mixuri proprii, experimentează cu culori și numere și pentru a încheia, folosește Compass.
Învață să creezi CSS eficient și aplică-ți noile cunoștințe în proiectele viitoare.

Pas cu pas către dezvoltarea profesională a CSS-ului. Dacă CSS, atunci modern și cu Sass - Daniel Koch ți le arată!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

detalii

Compatibil cu:
Conținut: 3 h Instruire video
Licență: privată și comercială Drepturi de utilizare

Categorii

Webdesign, CMS și dezvoltare

Creat cu dragoste de:

Daniel Koch

CSS modern cu Sass

Gratuit

CSS modern cu Sass - 01 O introducere.

Datorită preprocesoarelor CSS, CSS-ul poate fi scris mult mai eficient. Ce sunt acești preprocesori, care sunt disponibili și de ce a căzut alegerea în acest rând pe Sass, arată acest videoclip.

CSS modern cu Sass - 02 Instalarea.

Înainte de a putea folosi Sass, trebuie să-l instalezi. Și o condiție prealabilă este Ruby. Ambele - adică instalarea lui Ruby și a lui Sass - sunt prezentate în acest videoclip. Apoi puteți testa imediat dacă instalarea Sass a funcționat cu adevărat.

CSS modern cu Sass - 03 Compilare talentată

CSS modern cu Sass - 03 Compilare pricepută

Sass-urile trebuie să fie transformate în fișiere CSS pentru a fi cu adevărat utilizabile. Datorită comenzii Watch, puteți detecta (lăsați să fie detectate) modificările în fișiere individuale sau în întregi directoare foarte ușor.

CSS modern cu Sass – 04 fișiere combinate

CSS modern cu Sass - 04 Fisiere de grupat

Cu ajutorul @import, fișierele SCSS pot fi importate și concatenate. Ce are totul de-a face cu un cratime înaintea numelui fișierului este un aspect al acestui videoclip.

CSS modern cu Sass - 05 Declararea și utilizarea variabilelor

În Sass există posibilitatea de a declara variabile. Acest concept nu este disponibil în CSS-ul tradițional, dar în Sass este un instrument genial pentru dezvoltarea eficientă a foilor de stiluri.

CSS modern cu Sass – 06 Principiul de imbricare.

CSS modern cu Sass - 06 Principiul de înglobare

Datorită nesting-ului, sintaxa SASS poate fi păstrată mult mai subțire decât este obișnuit în CSS. În plus, încorporarea vă ajută să scrieți cod mult mai clar.

CSS modern cu Sass - 07 Moștenire ingenioasă cu Extend

CSS modern cu Sass - 07 Moștenire talentată cu Extinde.

Folosirea lui @extend vă permite să transferați un set de proprietăți CSS de la un selector la altul. De asemenea, acest lucru ajută la menținerea fișierelor Sass curate.

CSS modern cu Sass - 08 module cu selectori de locație.

CSS modern cu Sass - 08 module cu selectorii de locuriță.

Selectorul de substituire permite definirea de module. Această modularizare permite împărțirea sintaxei Sass în blocuri logice care pot fi incluse în diferite locuri.

CSS modern cu Sass - Definirea a 09 mixuri.

CSS modern cu Sass - Definirea a 09 mixins.

Mixins sunt funcții cu ajutorul cărora puteți simplifica semnificativ fluxurile de lucru, de exemplu. Acest videoclip arată cum puteți defini propriile mixins și, în cele din urmă, cum le puteți aplica.

CSS modern cu Sass - Selectorul elementului părinte - 10

Cu selectorul despre care vorbim în acest video, puteți accesa elementul părinte al unui element. Acest selector, așa cum se știe în CSS, nu există și oferă, prin urmare, o valoare adăugată imensă.

CSS modern cu Sass - 11 Automatizare cu bucle for

Sass permite utilizarea buclelor For. Acest lucru funcționează foarte ușor în Sass și poate fi folosit, de exemplu, pentru definirea unui sistem propriu de grilă.

CSS modern cu Sass - 12 bucle Each și While

Pe lângă For, în Sass pot fi folosite și buclele Each și While. Cum poate fi folosit acest lucru pentru automatizare este prezentat în acest videoclip.

CSS modern cu Sass - 13 decizii importante cu if și else

CSS modern cu Sass - 13 decizii critice cu if și else.

În limbaje precum PHP și JavaScript există posibilitatea de a reacționa la diferite evenimente folosind if și else. Aceasta este posibilă și în Sass. Cum se poate folosi acest lucru este prezentat în acest video.

CSS modern cu Sass - 14 operatori matematici.

Puteți calcula în Sass. Acest lucru este practic, de exemplu, în ceea ce privește definirea dimensiunilor fontului. Grație operatorilor corespunzători, puteți construi și propriul sistem de grilă.

CSS modern cu Sass - 15 jocuri de culori

Desigur, în Sass pot fi definite culori. Sass merge însă și mai departe decât CSS-ul tradițional în acest domeniu. Datorită funcțiilor corespunzătoare, culorile pot fi manipulate cu ușurință, de exemplu.

CSS modern cu Sass - 16 Compass.

Cadranul Compass extinde posibilitățile lui Sass de încă câteva ori. Acest prim videoclip arată cum puteți instala și utiliza Compass.

CSS modern cu Sass - 17 Compass și CSS3.

Pagina web a proiectului Compass este principala sursă de informare atunci când vine vorba de lucrul cu acest framework. Vă voi arăta cum puteți lucra cu documentația folosind funcțiile CSS3 ale Compass.

CSS modern cu Sass - 18 Compass în acțiune cu Bullet și o privire asupra lui Susy.

CSS modern cu Sass - 18 Compass în acțiune și o privire asupra lui Susy.

Un exemplu arată cât de ușor pot fi implementate lucrurile cu Compass. La sfârșitul acestei serii, va fi discutat, de asemenea, un alt framework Sass alternativ. Susy oferă un sistem de grilă subțire.

Detalii despre conținut

CSS în mod eficient - cu Sass: începeți cu tutorialul practic
Sass a revoluționat dezvoltarea CSS-ului, deoarece în sfârșit se poate scrie cod CSS eficient. În trei ore pline cu 18 lecții, vei afla tot ce este important despre Sass și framework-ul Sass Compass.

Instalarea mediului de dezvoltare Sass

Înainte de a începe călătoria cu Sass în tutorialul CSS, este momentul pentru instalare. Dar nu-ți fă nicio grijă - aceasta este foarte simplă. O simplă instalare de Ruby și câteva comenzi în linia de comandă sunt suficiente pentru a te face un mândru posesor al unui mediu de dezvoltare Sass. Cei care s-au temperat până acum la instalarea Sass, sunt ghidați pas cu pas prin instalare aici. Un prim test va arăta apoi ce versiune de Sass este instalată.

Primii pași cu o structură de proiect tipică

Apoi vin primii pași: Hai cu Sass! O privire asupra sintaxei este urmată de particularități de limbaj de bază. Vezi variabilele, vezi o structură de proiect tipică și te obișnuiești rapid cu Sass.

Dezvoltare: bucle și declarații If

Fiind pregătit, urmează dezvoltarea profesională: Ceea ce face ca Sass să fie atât de special sunt lucrurile care te pot duce deja cu gândul la limbaje de scriptare adevărate precum JavaScript. Deoarece și în Sass se pot defini bucle și se pot utiliza declarații If. Acestea sunt, de asemenea, condiția prealabilă pentru disciplina regală în Sass - definirea mix-in-urilor. Acestea sunt funcții puternice care îți facilitează munca cu Sass, în ultimă instanță, deci cu CSS.

Compass: Simplifică munca cu CSS-ul

Punctul culminant al acestei sesiuni de instruire este Compass. Acesta ridică dezvoltarea Sass la un nivel cu totul diferit, deoarece acest framework Sass oferă nenumărate instrumente și funcții care îți simplifică considerabil munca cu CSS-ul.

Ce vei învăța în tutorialul CSS și Sass

Înveți pas cu pas funcțiile Sass, de la început prin uneltele profesioniste până la lucrul cu Compass. Astfel ai în mână ceea ce este posibil în prezent și poți aplica direct cunoștințele tale. Nu a fost niciodată atât de eficient să scrii CSS!