Moderne CSS med SASS

Modernt CSS med Sass - Praksisveiledning

Språk: Tysk

Moderne CSS med Sass - Praksisveiledning

Du har alltid irritert deg over at det ikke finnes variabler og løkker i CSS? Slutt med det! CSS-preprosessorer som Sass tilbyr akkurat slike ting. Slik kan CSS-kode endelig genereres effektivt. I tillegg til Sass vil denne opplæringen også se på det populære Compass-rammeverket, som tar bruken av Sass til et annet nivå. Lær deg mulighetene som Sass og Compass har å tilby på tre timer.

Bli en Sass-mester med denne tre timers videoopplæringen med webutvikleren Daniel Koch.
Definer variabler, lag dine egne mixins, eksperimenter med farger og tall, og avslutt med å bruke Compass.
Lær å lage CSS effektivt og bruk din nye kunnskap i fremtidige prosjekter.

Trinn for trinn til profesjonell CSS-utvikling. Hvis CSS, så moderne og med Sass - Daniel Koch viser deg det!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

detaljer

Brukbar med:
Innhold: 3 h Videotrenings
Lisens: privat og kommersiell Bruksrettigheter

Kategorier

Webdesign, CMS & utvikling

Laget med kjærlighet av:

Daniel Koch

Modernt CSS med Sass

Gratis

Moderne CSS med Sass - 01 En introduksjon

Takket være CSS forprosessorer kan CSS skrives mye mer effektivt. Hva disse forprosessorene er, hvilke som finnes og hvorfor valget i denne sammenhengen falt på Sass, vises i denne videoen.

Moderne CSS med Sass - 02 Installasjonen

Før du kan bruke Sass, må du installere det. Og forutsetningen for dette er Ruby. Begge deler - altså installasjon av Ruby og Sass - blir vist i denne videoen. Deretter kan du umiddelbart teste om Sass-installasjonen faktisk har fungert.

Moderne CSS med Sass - 03 Dyktig kompilering

Modernt CSS med Sass - 03 Dyktig kompilering

Sass-må konverteres til CSS-filer for at de faktisk kan brukes. Takket være Watch-kommandoen kan du enkelt oppdage endringer i enkeltfiler eller i hele kataloger.

Moderne CSS med Sass - kombinere 04 filer

Modernt CSS med Sass - 04 Sammenslå filer

Ved hjelp av @import kan du importere og sette sammen SCSS-filer. Hva alt dette har å gjøre med en understrek foran filnavnet, er et aspekt av denne videoen.

Modernt CSS med Sass - 05 Variabler deklarere og bruke.

Modernt CSS med Sass - 05 Deklarere og bruk variabler.

I Sass er det mulig å deklarere variabler. Dette konseptet er som kjent ikke tilgjengelig i vanlig CSS, men er i Sass et genialt middel for effektiv utvikling av stilark.

Moderne CSS med Sass - 06 Konseptet om nesting

Moderne CSS med Sass - 06 Nøsting-prinsippet

Takk for nesting, kan Sass-syntaksen holdes mye slankere enn det som er vanlig i CSS. I tillegg hjelper innrykkene deg med å skrive koden mye mer oversiktlig.

Modernt CSS med Sass - 07 Fin arv med Extend

Modernt CSS med Sass – 07 Smidig arv med Extend

Bruken av @extend gjør det mulig for deg å overføre et sett med CSS-egenskaper fra en til en annen selektor. Dette hjelper også med å holde Sass-filene slanke.

Modernt CSS med Sass - 08 moduler med plassholder-selektorer

Plassholderselektoren muliggjør definisjonen av moduler. Denne modulariseringen tillater oppdelingen av Sass-syntaksen i logiske blokker som kan inkluderes på ulike steder.

Modernt CSS med Sass - 09 definere Mixins

Mixins er funksjoner som for eksempel kan gjøre arbeidsprosesser mye enklere. I denne videoen vises det hvordan dere kan definere egne mixins og til slutt bruke dem.

Moderne CSS med Sass - 10 Foreldrelement-selektoren

Med selektoren som det handler om i denne videoen, kan du få tilgang til et elements foreldreelement. Denne selektoren eksisterer som kjent ikke i CSS og gir derfor stor verdi.

Modernt CSS med Sass - 11 automatisering med for-løkker

Sass muliggjør bruk av for-løkker. Dette fungerer veldig enkelt i Sass, og kan for eksempel brukes til å definere et eget rutenettssystem.

Modernt CSS med Sass - 12 each- og while-løkker

Ved siden av For-loops kan man også bruke Each- og While-loops i Sass. Hvordan dette kan brukes til automatisering vises i denne videoen.

Moderne CSS med Sass - 13 veivalg med if og else.

Modernt CSS med Sass - 13 valg med if og else.

I språk som PHP og JavaScript er det mulig å reagere på ulike hendelser ved hjelp av if og else. Dette er faktisk også mulig i Sass. Hvordan dette kan utnyttes, vises i denne videoen.

Modernt CSS med Sass - 14 matematiske operatorer

Moderne CSS med Sass - 14 matematiske operatører

Dere kan beregne i Sass. Dette er for eksempel praktisk med tanke på definisjonen av skriftstørrelser. Takket være de tilsvarende operatorene kan man også bygge sitt helt eget rutenettsystem.

Modernt CSS med Sass – 15 fargevalg

Selvfølgelig kan farger definert være i Sass. Sass går imidlertid også mye lenger innen dette området enn vanlig CSS. Takket være de tilsvarende funksjonene kan farger for eksempel enkelt manipuleres.

Modernt CSS med Sass - 16 Ukompas.

Compass-rammeverket utvider mulighetene til Sass enda mer. Denne første videoen viser hvordan du kan installere og bruke Compass.

Moderne CSS med Sass - 17 Compass og CSS3

Modernt CSS med Sass - 17 Compass og CSS3

Nettsiden til prosjektet Compass er det sentrale informasjonsmiddelet når det gjelder arbeidet med dette rammeverket. Jeg viser dere hvordan dere kan jobbe med dokumentasjonen ved hjelp av CSS3-funksjonene til Compass.

Modernt CSS med Sass - 18 Compass i Bullet-aksjon og et blikk på Susy.

Moderne CSS med Sass - 18 Compass i Bullet-aksjon og et blikk på Susy

Et eksempel viser hvordan ting lett kan implementeres med Compass. På slutten av denne serien vil det også bli sett på et alternativt Sass-rammeverk. Susy tilbyr et slankt rutenettssystem.

Detaljer om innholdet

CSS på en effektiv måte – med Sass: start reisen med praksisveiledningen

Sass har revolusjonert CSS-utviklingen, for nå kan CSS-kode skrives effektivt. På bare tre timer med 18 leksjoner vil du lære alt du trenger å vite om Sass og Sass-rammeverket Compass.

Installering av Sass-utviklingsmiljøet

Før du begynner din CSS-veiledning med Sass, må du begynne med installeringen. Men bare rolig – dette er veldig enkelt. Ruby og noen kommandolinjekommandoer er alt som trengs, og du vil da være stolt eier av et Sass-utviklingsmiljø. Hvis du tidligere har vegret deg for å installere Sass, vil du her bli guidet gjennom installasjonen trinn for trinn. En første test vil vise hvilken Sass-versjon som er installert.

Første skritt med en typisk prosjektstruktur

Deretter følger de første skrittene: Nå starter du med Sass! Et første blikk på syntaksen etterfølges av grunnleggende språkegenskaper. Du vil lære om variabler, se en typisk prosjektstruktur og raskt forstå Sass.

Utvikling: Løkker & If-setninger

Når du er forberedt, kan du begynne med proff-utviklingen: Det som gjør Sass så spesielt er tingene som nesten ligner på ekte skriptspråk som JavaScript. For også i Sass kan du definere løkker og bruke If-setninger. Disse tingene er også grunnlaget for Sass sin kongedisse - definisjonen av Mixins. Dette er kraftige funksjoner som gjør arbeidet med Sass, og dermed med CSS, mye enklere.

Compass: Forenkler arbeidet med CSS

Høydepunktet av denne opplæringen er Compass. Dette tar Sass-utviklingen til en helt ny nivå, for dette Sass-rammeverket tilbyr utallige verktøy og funksjoner som gjør arbeidet med CSS mye enklere.

Dette lærer du i CSS- og Sass-veiledningen

Du vil gradvis lære funksjonene til Sass, fra begynnelsen, gjennom proffverktøyene og til arbeidet med Compass. Dette gir deg det du trenger å vite i dag, og lar deg umiddelbart sette kunnskapen din ut i praksis. Å skrive CSS har aldri vært så effektivt!