Modernus CSS su SASS

Kalba: vokiečių

Naujausias CSS naudojant Sass - praktinis vadovas

Tu visada pykai dėl to, kad CSS neturi kintamųjų ir ciklų? Baigsk! CSS prieskompiliatoriai, tokiu kaip Sass, suteikia būtent tokių funkcijų. Taip galima efektyviai generuoti CSS kodą. Be Sass, šiame vadove žvelgiama ir į labai mėgstamą Compass karkasą, kuris dar kartą iškelia Sass naudojimą į kitą lygį. Per tris valandas išmokite ką gali pasiūlyti Sass ir Compass.

Tapsiu tapti SAS meistru su trim valandų trukmės vaizdo mokymais su interneto kūrėju Danieliu Koch.
Apibrėžkite kintamuosius, sukūrkite savo "mixins", eksperimentuokite su spalvomis ir skaičiais ir taip pat naudodami Compass.
Mokėkis efektyviai kurti CSS ir taikyti savo naujus žinias būsimiems projektams.

Vienas po kito link profesionaliam CSS kūrimui. Jei CSS, tada modernus ir su Sass – Daniel Koch tau parodys!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

informacija

Galima naudoti su:
Turinys: 3 h Vaizdo mokymas
Licencija: privati ir komercinė Naudotojų teisės

Kategorijos

Tinklalapių kūrimas, CMS ir kūrimas

Sukurta su meile:

Daniel Koch

Šiuolaikinis CSS su "Sass

Nemokamai

Modernaus CSS su Sass - 01 Įvadas.

Naudojant CSS išankstinius procesorius, CSS kodas gali būti rašomas kur kas efektyviau. Ką reiškia šie procesoriai, kokie jie yra ir kodėl šiame sąraše buvo pasirinktas Sass, parodo šis vaizdo įrašas.

Modernus CSS su Sass - 02 Die Installation

Naujausias CSS su Sass - 02 Die Installation.

Prieš pradėdami naudotis Sass, reikia jį įdiegti. Ir tam reikalingas Ruby. Abi – t.y. Ruby ir Sass įdiegimas – bus parodytas šiame vaizdo įraše. Tada galėsite iškart patikrinti, ar Sass įdiegimas iš tikrųjų pavyko.

Modernus CSS su Sass – 03 Įgudęs kompiliavimas

Modernus CSS su Sass – 03 Kruopštus kompiliavimas

Šablonai turi būti paversti į CSS failus, kad jie iš tikrųjų būtų naudojami. Dėl Watch komandos galite lengvai atpažinti (įjungti) pakeitimus atskiroms failams ar visoms aplankams.

Modernus CSS naudojant Sass - suskirstykite 04 failus.

Šiuolaikiškas CSS naudojant Sass – 04 failus sujungti

Naudojant @import galima importuoti ir jungti SCSS failus. Kokia tai turi įtaką, kai prieš failo pavadinimą pridedamas pabraukimas, yra viena šio vaizdo aspektų.

Modernus CSS naudojant Sass – 05 deklaruoti ir naudoti kintamuosius

Sass kalboje yra galimybė deklaruoti kintamuosius. Šis konceptas, kaip žinome, nėra prieinamas tradiciniame CSS, tačiau Sasse tai yra puikus būdas efektyviam stilių kūrimui.

Naujausias CSS su Sass - 06 Lizdinės struktūros principas.

Naujausias CSS naudojant Sass – 06 Įdėtinių principas.

Dėka "nesting" įvesties, Sass sintaksė galima išlaikyti kur kas liečką, negu tai įprasta CSS. Įdėtosios taip pat padeda jums rašyti kodą daug aiškiau.

Modernus CSS su Sass – 07 Įgudusi paveldėjimas naudojant Extend

Modernus CSS naudojant Sass – 07 Įgudusi paveldėjimas su Extend.

@extend naudojimas leidžia jums perduoti sąrašą CSS savybių iš vieno selektoriaus į kitą. Tai taip pat padeda išlaikyti Sass failus plonais.

Modernus CSS su Sass - 08 moduliai su vietos laikinaisiais selektoriais.

Naujausi CSS su Sass - 08 moduliai su vietos laikikliais selektoriais.

Vietos žymeklis leidžia apibrėžti modulius. Ši modularizacija leidžia suskirstyti Sass sintaksę į loginius blokus, kurie gali būti įtraukti į skirtingas vietas.

Modernus CSS naudojant Sass - 09 Apibrėžti mixins'ai.

Modernus CSS naudojant Sass - 09 apibrėžti mixin'us

Mixinai yra funkcijos, kurios pavyzdžiui gali žymiai supaprastinti darbo procesus. Šiame vaizdo įraše parodoma, kaip galite apibrėžti savo mixinus ir galiausiai juos taikyti.

Naujausias CSS su Sass - 10 Tėvinis elemento selektorius

Modernus CSS su Sass – 10 Tėvinio elemento selektorius

Su selektru, apie kurį yra kalbama šiame vaizdo įraše, galite pasiekti elemento tėvinį elementą. Šio selektoriaus, kaip žinoma, nėra CSS ir todėl jis suteikia didelę pridėtinę vertę.

Naujausias CSS naudojant Sass - 11 Automatizavimas su "For" ciklais

Sass leidžia naudoti „for“ ciklus. Tai veikia Sass labai paprastai ir gali būti panaudota pvz. kuriant savo išklotinės sistemą.

Naujausias CSS su Sass – 12 kiekvieno ir while ciklai

Modernaus CSS su Sass – 12 each ir while ciklų

Beside For-, in Sass taip pat galima naudoti Each- ir While-ciklus. Kaip tai galima panaudoti automatizavimui, parodo šis vaizdo įrašas.

Naujausias CSS su Sass - 13 sprendimų pasirinkimai naudojant if ir else.

Naujausias CSS su Sass - 13 sprendimų atvejais su if ir else.

Programavimo kalbose, tokiose kaip PHP ir JavaScript, yra galimybė reaguoti į įvairius įvykius naudojant if ir else sąlygas. Tokia galimybė egzistuoja ir Sass kalboje. Kaip tai galima panaudoti, parodo šis vaizdo įrašas.

Šiuolaikiškas CSS naudojant Sass – 14 matematiniai operatoriai.

Šiuolaikiškas CSS su Sass – 14 matematiniai operatoriai

Jūs galite naudoti Sass skaičiavimams. Tai yra praktiška, pvz., nustatant šrifto dydžius. Dėka tinkamų operatorių galima sukurti savo unikalų grid sistemą.

Naujosios CSS su Sass – 15 spalvų žaidimų

Modernus CSS su Sass - 15 spalvų žaidimų

Našiškiams aišku, kad Sass yra galima apibrėžti spalvas. Tačiau Sass šioje srityje žengia žymiai toliau nei įprastinis CSS. Dėl atitinkamų funkcijų, pvz., spalvas galima lengvai manipuliuoti.

Modernus CSS naudojant Sass - 16 Compass

Modernusis CSS su Sass – 16 Kompasai

Kompaso karkasas išplečia Sass galimybes dar kelis kartus. Šis pirmasis vaizdo įrašas parodo, kaip galite įdiegti ir naudoti Kompasą.

Modernus CSS naudojant Sass - 17 Compass ir CSS3.

Compass projekto svetainė yra pagrindinis informacijos šaltinis, kai kalbama apie darbą su šiuo karkasu. Aš jums parodysiu, kaip galite dirbti su Compass dokumentacija, naudodamiesi CSS3 funkcijomis.

Naujausias CSS su Sass – 18 kompasų veiksmų pritaikymas ir Susy apžvalga.

Modernus CSS naudojant Sass – 18 Compass "bulleto" veiksmai ir žvilgsnis į Susy

Pavyzdys parodo, kaip lengvai dalykai įgyvendinami su Compass. Šios eilės pabaigoje taip pat pažvelgiama į alternatyvų Sass-Framework'ą. Susy siūlo lankstų tinklelio sistemą.

Turinys

CSS efektyviai - naudodamas Sass: pradėk praktinį vadovą
Sass revoliucionizavo CSS plėtojimą, nes pagaliau galima efektyviai rašyti CSS kodą. Per tris valandas su 18 pamokų pamokomis sužinosite visas svarbiausias detales apie temą Sass ir Sass-Framework Compass.

Įdiegimas Sass plėtros aplinkai

Prieš pradėdami savo CSS vadovą naudodami Sass, turėsite atlikti įdiegimą. Tačiau nebijokite - įdiegimas yra labai paprastas. Ruby ir kelios komandinės eilutės komandos užtikrina, kad esate garbingas Sass plėtros aplinkos savininkas. Tie, kurie iki šiol nedrįso įdiegti Sass, bus žingsnis po žingsnio pravedami per įdiegimą. Pirmasis bandymas jums parodys, kuri Sass versija yra įdiegta.

Pirmieji žingsniai su tipišku projekto struktūra

Tada jau vykstami pirmi žingsniai: Pradėkite naudoti Sass! Po pirmo susipažinimo su sintakse sekia pagrindiniai kalbos ypatumai. Jūs susipažinsite su kintamaisiais, pamatysite tipišką projekto struktūrą ir greitai suprasite, kaip naudoti Sass.

Plėtra: Ciklai ir If sakiniai

Po įgijimo, sekite Profesinę plėtrą: Tai, kas daro Sass tokį ypatingą, yra dalykai, primenantys beveik tikrus skriptų kalbus, pvz., JavaScript. Sass taip pat leidžia apibrėžti ciklus ir naudoti If sakiniais. Šie dalykai yra pagrindinė sąlyga sukuriant Mixins Sass - tai galingi funkcijos, kurios padaro jūsų darbą su Sass ir galiausiai su CSS žymiai lengviau.

Compass: Palengvina darbą su CSS

Šio mokymo kulminacija yra Compass. Tai dar kartą pakelia Sass plėtrą į visiškai kitą lygį, nes šis Sass-Framework teikia begalę įrankių ir funkcijų, kurios dar labiau palengvina darbą su CSS.

Kas jūs išmoksite iš CSS ir Sass vadovo

Jūs žingsnis po žingsnio išmoksite Sass funkcijas, nuo įvedimo iki profi įrankių, iki darbo su Compass. Tai suteiks jums visa tai, kas šiuo metu yra įmanoma ir galėsite savo žinias tiesiogiai taikyti. CSS rašymas niekada nebuvo tiek pat efektyvus!