Moderns CSS ar SASS

Mūsdienīgs CSS ar Sass – Praktiskais pamācības materiāls

Valoda: vācu

Mūsdienīgs CSS ar Sass – prakses pamācība

Tu vienmēr esi bijis aizkaitināts, ka CSS nav mainīgie un cikli? Beidzot ar to! CSS priekšapstrādņi kā Sass nodrošina tieši šādas iespējas. Tādējādi CSS kods var tikt ģenerēts efektīvāk. Turklāt šajā pamācības materiālā dabiski tiek pārrunāta arī plaši populārā Compass ietvara, kas vēl vairāk uzlabo Sass izmantošanu. Trīs stundu laikā iepazīsties ar iespējām, ko piedāvā Sass un Compass.

Kļūsti par šķietami video apmācību un tīmekļa attīstītāju Daniēlu Koku par Sass meistaru.
Definē mainīgos, izveido savus mixinus, eksperimentē ar krāsām un skaitļiem un, lai noslēpumā izmantotu Compass.
Iemācies efektīvi veidot CSS un pielietot savas jaunās zināšanas nākotnes projektos.

Solis pa solim uz profesionālu CSS izstrādi. Ja CSS, tad moderns un ar Sass - Daniels Coch parāda tev!

Sīkāka informācija

Lietojams ar:
Saturs: 3 h Video mācību kurss
Licence: privāta un komerciāla Lietošanas tiesības

Kategorijas

Tīmekļa dizains, CMS un attīstība

Ar mīlestību izveidots no:

Daniel Koch

Mūsdienīgs CSS ar Sass

Bezmaksas

Mūsdienu CSS izmantojot Sass - 01 Ievads

Pateicoties CSS priekšapstrādes procesoriem, CSS var rakstīt daudz efektīvāk. Kas ir šie priekšapstrādes procesori, kuri ir pieejami un kāpēc izvēle šajā sērijā bija Sass, šo parāda šis video.

Mūsdienīgs CSS ar Sass - 02 Instalācija

Pirms izmantojat Sass, jums jāinstalē to. Un priekšnoteikums tam ir Ruby. Abas lietas - tātad Ruby un Sass uzstādīšana - tiek parādītas šajā video. Pēc tam jūs varat tūlītēji sākt pārbaudīt, vai Sass uzstādīšana tiešām ir izdevusies.

Moderns CSS ar Sass – 03 Viegla kompilācija

Moderns CSS ar Sass – 03 Īsta kompilācija

Sasniegumi - jāpārvērš CSS failos, lai tie būtu patiešām izmantojami. Pateicoties "Watch" komandai, jūs varat viegli atpazīt izmaiņas atsevišķos failos vai pilnos katalogos.

Mūsdienīgs CSS ar Sass - 04 failu apvienošana

Ar @import ir iespējams importēt un apvienot SCSS failus. Tas, kas tas ir saistīts ar pievienoto pasvītrojumu faila nosaukumā, ir viens no šī video aspektiem.

Mūsdienu CSS ar Sass - 05 mainīgo definēšana un lietošana

Mūsdienīgs CSS ar Sass – deklarē un izmanto mainīgos 05

Sass ir iespējama mainīgo deklarēšana. Šis koncepts tradicionālajā CSS, kā to mēs zinām, nav pieejams, bet Sass ir izcilais rīks efektīvam stila lapu izstrādē.

Mūsdienīgs CSS ar Sass – 06 Nišošanas principu

Mūsdienīgs CSS ar Sass - 06 Nēsta principa

Pateicoties Nesting, Sass sintakse var ievērojami saīsināt, salīdzinot ar parastu CSS. Nesēdēšana arī palīdz jums rakstīt kodu daudz pārskatāmāk.

Moderns CSS ar Sass – 07 Viegla mantošana ar Extend

Mūsdienīgs CSS ar Sass - 07 veiksmīga mantošana ar Extend

@extend izmantošana ļauj jums nodot vienu CSS īpašību kopu no viena atlasītāja uz citu. Tas palīdz saglabāt Sass failus kompaktus.

Mūsdienīgs CSS ar Sass – 08 moduļi ar aizstājējselektoriem.

Moderns CSS ar Sass - 08 moduļi ar aizstājējselektoriem

Vietas turētājselektors ļauj definēt moduļus. Šī moduļu sadalīšana ļauj sadalīt Sass sintaksi loģiskos blokos, kas var tikt iekļauti dažādās vietās.

Moderns CSS ar Sass – 09 Mixins definēšana

Mūsdienīgs CSS ar Sass – definēt 09 mixini.

Mainīgie ir funkcijas, ar kurām, piemēram, darbplūsmas ir iespējams ievērojami vienkāršot. Šajā video tiks demonstrēts, kā jūs varat definēt savas pašu mainīgo funkcijas un tos gala rezultātā izmantot.

Mūsdienīgs CSS ar Sass – 10 Vecākelementa selektors

Mūsdienīgs CSS ar Sass - 10 Vecāku elementu atlasītājs

Ar šo video, varat piekļūt elementa vecāka elementam, izmantojot selektoru, par kuru tiek runāts. Šis selektors, pēc zināmām CSS, nav pieejams un tādējādi nodrošina ļoti ievērojamu papildvērtību.

Mūsdienīgs CSS ar Sass – 11 Automatizācija ar For cikliem

Sass ļauj izmantot For cilpas. Tas ir ļoti vienkārši ar Sass un piemērotu, piemēram, savas režģa sistēmas definēšanā.

Mūsdienīgs CSS ar Sass – 12 katras un While cilpas.

Mūsdienīgs CSS ar Sass – 12 katru un while ciklus

Pēc For- cikla Sass var izmantot arī Each- un While-ciklus. Kā to var izmantot automatizēšanai, parāda šis video.

Moderns CSS ar Sass - 13 lēmumi, izmantojot if un else.

Mūsdienīgs CSS ar Sass – 13 izvēles lēmumi ar if un else.

Valodās kā PHP un JavaScript ir iespējams reaģēt uz dažādiem notikumiem, izmantojot if un else. Tāda iespēja ir arī Sass. Kā to izmantot, parāda šis video.

Moderns CSS ar Sass – 14 Matemātiskie operatori

Mūsdienīgs CSS ar Sass – 14 matemātiskie operatori

Jūs varat aprēķināt ar Sass. Tas ir ērti piemēram, definējot fontu izmērus. Pateicoties atbilstošajiem operatoriem, jūs varat izveidot arī savu pilnīgi individuālo režģa sistēmu.

Mūsdienīgs CSS ar Sass - 15 krāsu spēles.

Protams, Sass var definēt krāsas. Tomēr Sass iet daudz tālāk par parastā CSS šajā jomā. Pateicoties attiecīgajām funkcijām, piemēram, krāsas var manipulēt ļoti viegli.

Mūsdienīgs CSS ar Sass - 16 Compass.

Compass ietvarprogramma ievērojami paplašina Sass iespējas. Šajā pirmajā video ir redzams, kā jūs varat instalēt un izmantot Compass.

Mūsdienu CSS ar Sass – 17 Compass un CSS3

Projekta Compass tīmekļa vietne ir centrālais informācijas avots, ja runa ir par darbu ar šo ietvaru. Es jums parādīšu, izmantojot Compass CSS3 iespējas, kā varat strādāt ar dokumentāciju.

Mūsdienīgs CSS ar SASS - 18 Kompasses šaušalas un skats uz Susy.

Mūsdienīgs CSS ar Sass - 18 Compass Bullet darbībā un skatījums uz Susy.

Piemērs parāda, cik vienkārši lietas var īstenot ar Compass. Šī sērija beidzas ar ieskatu alternatīvā Sass ietvarā. Susy piedāvā plānu režģa sistēmu.

Detaļas par saturu

CSS efektīvi - ar Sass: startējiet ar prakses vadlīnijām
Sass ir pārveidojis CSS attīstību, jo tagad ir iespējams efektīvi rakstīt CSS kodu. 18 stundu ilgā nodarbībā ar 18 lekcijām tu iegūsi visu svarīgo par Sass un Sass pamata ietvaru Compass.

Instalējot Sass attīstības vidi

Pirms pievienojies Saliekto CSS vadlīnijām un dodies uz Sass ceļojumu, jāveic instalēšana. Bet neuztraucies - tā ir diezgan vienkārša. Pamatīgi ruby un pāris komandrindas komandas jau pietiek, un tu lepoties vari būt Sass attīstības vides īpašnieks. Tiem, kas līdz šim baidījušies no Sass instalēšanas, šeit soli pa solim tiks parādīta instalēšana. Pirmā pārbaude parādīs, kura Sass versija ir instalēta.

Pirmie soļi ar tipisku projektu struktūru

Pēc tam iestājas pirmie soļi: Sāc ar Sass! Pirmā izlūka uz sintaksi seko pamatīgā mediju īpatnības. Tu iepazīsti mainīgos, redzi tipisku projektu struktūru un ātri iepazīsties ar Sass.

Attīstība: cikli & If-izteicieni

Tā sagatavots, nāk profesionālā attīstība: Tas, kas padara Sass tik īpašu, ir lietas, kas gandrīz atgādina īstas skriptu valodas kā JavaScript. Jo arī Sass var definēt ciklus un izmantot if-izteicienus. Šīs lietas ir pamata nosacījums Sass galvenajam uzdevumam - mixinu definēšanai. Šie ir spēcīgi funkcijas, kas ļauj tev viegli strādāt ar Sass, galu galā tātad ar CSS ievērojami atvieglot.

Compass: Darbs ar CSS vienkāršots

Šīs apmācības kronis ir Compass. Tas vēlreiz paaugstina Sass attīstību uz pilnīgi citu līmeni, jo šis Sass ietvars piedāvā neskaitāmas rīkus un funkcijas, kas ievērojami vienkāršo darbu ar CSS.

To, ko iemācīsies CSS un Sass vadlīnijās

Iemācīsies soli pa solim Sass funkcijas, sākot no pievienošanās līdz profesionālajiem rīkiem līdz darbam ar Compass. Tādēļ tu zini, ko var darīt tagad, un vari savu zināšanu tūlītēji piemērot. CSS rakstīšana nekad nav bijusi tik efektīva!