Kaasaegne CSS SASS-iga

Kaasaegne CSS koos Sassiga - praktiline õpetus

Keel: eesti keel

Kaasaegne CSS kasutades Sassi - praktiline juhend

Oled alati olnud häiritud sellest, et CSS-is pole muutujaid ja tsükleid? Lõpp sellele! CSS-i eelprotsessorid nagu Sass pakuvad täpselt selliseid asju. Nii on lõpuks võimalik luua efektiivselt CSS-koodi. Lisaks Sassile vaadeldakse selles õpetuses loomulikult ka laialdaselt armastatud Compassi raamistikku, mis viib Sass-i kasutamise veelgi kõrgemale tasemele. Tutvu kolme tunniga Sass-i ja Compassi võimalustega.

Saage Sass-meistriks selle kolme tunni pikkuse videokoolituse ja veebiarendaja Daniel Kochiga.
Määra muutujad, loo oma mixin'id, katseta värve ja numbreid ning lõpuks kasuta Compassi.
Õpi CSS-i tõhusalt looma ja rakenda oma uusi teadmisi tulevaste projektide jaoks. Esmalt kontrollige, kas tekst on tõlgitud saksa keelest eesti keelde.

Samm-sammult professionaalse CSS-arengu suunas. Kui CSS, siis kaasaegselt ja Sassiga - Daniel Koch näitab sulle!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

üksikasjad

Saab kasutada koos:
Sisu: 3 h Videoõpe
Litsents: eraõiguslik ja äriline Kasutusõigused

Kategooriad

Veebidisain, CMS ja arendus

Armastusega loodud:

Daniel Koch

Kaasaegne CSS Sassiga

Tasuta

Kaasaegne CSS koos Sass-iga – 01 Sissejuhatus

Tänu CSS eelprotsessoritele on CSS-i võimalik märkimisväärselt tõhusamalt kirjutada. Mis need eelprotsessorid on, millised on olemas ning miks valik selle rea hulgas langes Sassile, näitab see video.

Kaasaegne CSS koos Sassiga - 02 Paigaldamine

Enne kui Sass kasutamiseks saab, tuleb see installida. Selleks on vajalik Ruby. Mõlemad, nii Ruby kui ka Sassi installimine, on selles videos näidatud. Seejärel saate kohe kontrollida, kas Sass'i installimine õnnestus.

Kaasaegne CSS koos Sass-iga - 03 oskuslik kompileerimine

Moodne CSS koos Sass-iga - 03 Osav kompileerimine

Sass-tuleb teisendada CSS-failideks, et neid saaks tegelikult kasutada. Tänu Watch-käsu võimalusele on muudatusi üksikutes failides või terve kataloogi ulatuses väga lihtne tuvastada (lasta).

Kaasaegne CSS koos Sass-iga - 04 failide kokkufikseerimine

Kaasaegne CSS Sassiga - 04 faili kokku võtma

Kasutades @import saab imporditud ja ühendatud SCSS-failid. See, mis on seotud alljoone lisamisega failinime ees, on selle video üks aspekt.

Kaasaegne CSS koos Sass-iga - 05 muutujate deklareerimine ja kasutamine

Kaasaegne CSS koos Sassiga – muutujate deklareerimine ja kasutamine

Sassis on võimalus muutujate deklareerimiseks. See kontseptsioon pole traditsioonilises CSS-is kättesaadav, kuid Sassis on geniaalne vahend stiililehtede efektiivseks arendamiseks.

Kaasaegne CSS koos Sass-iga - 06 Pesitsemise põhimõte

Kaasaegne CSS koos Sassiga - 06 Sisestamise põhimõte

Tänu pesitsemisele on Sassi süntaks võrreldes tavalise CSS-iga oluliselt kompaktsem. Pesitsemine aitab teil ka koodi oluliselt selgemalt kirjutada.

Kaasaegne CSS koos Sass-iga - 07 osav pärandamine Extend-iga

Kaasaegne CSS Sassiga - 07 osav pärimine Extend abil

@extend'i kasutamine võimaldab teil edastada CSS omaduste komplekt ühest valijast teise. See aitab kaasa Sass-failide kompaktsena hoidmisele.

Kaasaegne CSS koos Sass-ga – 08 moodulit koos kohatäitmise valijatega

Kaasaegne CSS koos Sass-ga - 08 moodulit koos kohatäite-valijatega

Kohaviit-selektor võimaldab moodulite määratlemist. See modulariseerimine võimaldab Sass-süntaksi jagamist loogilistesse plokkidesse, mis saab lisada erinevatesse kohtadesse.

Kaasaegne CSS Sassiga – määratlege 09 mixin-i

Kaasaegne CSS koos Sassiga - määratleda 09 mixinat

Mixinid on funktsioonid, mis võimaldavad oluliselt lihtsustada näiteks töövooge. Selles videos näidatakse, kuidas saate ise määratleda ja lõpuks rakendada oma Mixineid.

Kaasaegne CSS koos Sassiga - 10 Vanemaelemendi valija

Selle video põhiline selektor võimaldab teil juurdepääsu ühe elemendi ülemelemendile. See selektor CSS-is tavapäraselt puudub ja seetõttu pakub see tohutut lisaväärtust.

Kaasaegne CSS koos Sassiga - 11 automaatika koos for-tsüklitega

Kaasaegne CSS Sass-iga – 11 automaatika koos for-tsüklitega

Sass võimaldab kasutada for-tsükleid. See toimib Sass-is väga lihtsalt ja seda saab näiteks kasutada oma ruudustikusüsteemi määratlemiseks.

Kaasaegne CSS koos Sassiga - 12 iga- ja while-tsüklit

Lisaks "For-" tsüklile saab Sass-is kasutada ka "Each-" ja "While-" tsükleid. Kuidas seda automatiseerimiseks kasutada saab, näitab see video.

Kaasaegne CSS koos Sass-iga - 13 otsustusjuhtu if ja else abil

Kaasaegne CSS koos Sass-iga - 13 otsustusprotsessi koos if ja else'iga

Keeltes nagu PHP ja JavaScript on võimalik erinevatele sündmustele reageerida if ja else abil. Sarnast funktsionaalsust pakub ka Sass. Kuidas seda kasutada, näitab see video.

Kaasaegne CSS koos Sassiga - 14 matemaatilist operaatorit

Te saate Sassis arvutada. See on näiteks fondi suuruste määratlemisel praktiline. Tänu vastavatele operaatoritele saate aga ehitada ka täiesti individuaalse ruudustiku süsteemi.

Kaasaegne CSS koos Sass-iga - 15 värvimängu.

Mõistagi saab Sassis värve määratleda. Sass aga läheb selles valdkonnas märksa kaugemale kui tavaline CSS. Tänu vastavatele funktsioonidele saab näiteks värve väga lihtsalt manipuleerida.

Kaasaegne CSS koos Sass-iga - 16 Compass

Kaasaegne CSS Sass-iga – 16 Compass

Kompaskihi laiendab Sass'i võimalusi veelgi. See esimene video näitab, kuidas saate Kompaski paigaldada ja kasutada.

Kaasaegne CSS koos Sass-iga - 17 Compass ja CSS3.

Kaasaegne CSS Sassiga - 17 Compass ja CSS3

Compassi projektiveebisait on peamine teabevahend, kui tegemist on selle raamistikuga töötamisega. Näitan teile Compassi CSS3 funktsioonide abil, kuidas saate dokumentatsiooniga töötada.

Kaasaegne CSS koos Sass-iga - 18 Compassi Bullet-tegevus ja pilk Susy-le

Kaasaegne CSS koos Sassiga - 18 Compassi karkassiga ja pilk Susy'le

Üks näide näitab, kui lihtne asju Compassiga ellu viia. Selle seeria lõpus heidetakse pilk ka alternatiivsele Sass raamistikule. Susy pakub saledat ruudustikusüsteemi.

Sisu üksikasjad

CSS efektiivne kasutamine – alusta praktilist õpetust Sassiga
Sass on CSS-arenduse revolutsioon, kuna lõpuks saab CSS-koodi kirjutada efektiivselt. 18 tunni ja 18 õppetunni jooksul saad olulise teabe Sass'i ja Sass-i raamistiku Compass kohta.

Installeeri Sass-arenduskeskkond

Enne kui alustad Sass-i seiklust CSS-õpetusega, tuleb tegeleda installimisega. Aga ära muretse – see on väga lihtne. Vaja on Ruby-d ja mõningaid käsklusi käsurealt ning juba oled uhke Sass-i arenduskeskkonna omanik. Need, kes varem on Sass-i installimise ees tagasi hoidnud, juhatakse siin sammhaaval installimise läbi. Esimene test näitab, milline Sass-i versioon on installitud.

Esimene samm tüüpilise projekti struktuuriga

Seejärel järgnevad juba esimesed sammud: Alusta Sass-iga! Pärast esmast süntaksi vaatamist tulevad põhilised keeleomadused. Õpid tundma muutujaid, näed tüüpilist projekti struktuuri ja saad Sass-iga kiiresti hakkama.

Arendus: Tsüklid ja If-lausete kasutamine

Nii ettevalmistatud, võta ette professinaise arendus: Mis Sass'i nii eriliseks teeb, on asjad, mis meenutavad juba päris skriptikeeli nagu JavaScript. Sass-i saab määratleda ka tsükleid ja kasutada If-lausete. Need on aluseks Sass-i kuninglikule distsipliinile – Mixinide määratlemine. Need on võimsad funktsioonid, mis hõlbustavad su tööd Sass-iga ja lõpuks siis CSS-iga.

Compass: Lihtsustab CSS-iga töötamist

Selle koolituse tipphetkeks on Compass. See tõstab Sass-i arenduse veelgi uuele tasemele, kuna see Sass-i raamistik pakub arvukalt tööriistu ja funktsioone, mis muudavad CSS-iga töötamise selgelt lihtsamaks.

Saad õppida CSS-i ja Sass-i õpetusest

Sa õpid tundma Sass-i funktsioone samm-sammult alustades ning jõudes professionaalsete tööriistadeni ja Compass-i kasutamiseni. Nii saad kätte, mis on praegu võimalik, ja saad oma teadmisi kohe rakendada. CSS-i kirjutamine pole kunagi olnud nii efektiivne!