Inhalt
- Wat ass e CSS Viraarbechter?
- Wat ass Sass?
- Wéi benotzt Dir Sass
- Syntax
- Variabelen
- Nascht
- Partiell
- Importéieren
- Mixins
- Verlängeren / Ierwen
- Bedreiwer
Wat ass Sass? Dat ass d'Fro déi mir hei beäntweren. Wann Dir nei mam Webdesign sidd, hutt Dir wahrscheinlech de Begrëff héieren schwammen, awer Dir sidd vläicht net ganz upaken mat genau wat Sass ass, wat et mécht, an ob Dir et sollt benotzen oder net. Kuerz gesot, Sass ass e CSS Preprozessor, dee speziell Feature wéi Variabelen, vernetzte Regelen a Mixine bäifüügt (heiansdo bezeechent als syntaktesch Zocker) a normale CSS. Zil ass et de Kodéierungsprozess méi einfach a méi effizient ze maachen. Loosst eis méi detailléiert entdecken.
Fir méi Tools, entdeckt eise Guide fir de bescht CSS Kaderen an uewen Web Design Tools versichen.
- Déi bescht Code Editoren
Wat ass e CSS Viraarbechter?
E CSS Viraarbechter ass eng Skriptsprooch déi CSS verlängert andeems d'Entwéckler Code an enger Sprooch schreiwen an duerno an CSS kompiléieren. Sass ass vläicht dee populäerste Viraarbechter am Moment, awer aner bekannte Beispiller enthalen Manner a Stylus.
Ier mer weiderfuere geet eng séier ëffentlech Ukënnegung an Uerdnung: Déi meescht Webdesigner soen datt wann Dir nei beim CSS sidd, besser sidd Dir Sass ze vermeiden (oder all Virveraarbechter, Extensiounen oder Frameworks) wann Dir nach ëmmer sidd léieren. Obwuel et richteg ass, bidden se vill Virdeeler a Geschwindegkeet an Effizienz, et ass wichteg datt Dir wierklech d'Grondlage vun CSS an de Grëff kritt. Gitt sécher datt Dir d'Kärkonzepter léiert ier Dir ufänkt Ofkierzungen unzefänken a verwiessele Saachen.
Wat ass Sass?
Sass (wat steet fir 'Syntaktesch fantastesch Styleblieder) ass eng Extensioun vu CSS déi et erméiglecht Saache wéi Variabelen, vernetzte Regelen, Inline Importer a méi ze benotzen. Et hëlleft och d'Saachen organiséiert ze halen an erlaabt Iech Stilblieder méi séier ze kreéieren.
Sass ass kompatibel mat alle Versioune vu CSS. Déi eenzeg Viraussetzung fir se ze benotzen ass datt Dir Ruby installéiert hutt. D'Benotzer ginn och gefrot d'Sass Community Guidelines ze befollegen.
Wéi benotzt Dir Sass
An der folgender Sektioun wäerte mir e puer Basis Tipps fir Sass benotzen, mat Beispiller vun der offizieller Sass Websäit. Kuckt d'Sass Dokumentatioun fir zousätzlech Referenzen a Beispiller.
Syntax
Sass enthält zwou Syntaxoptiounen:
- SCSS (Sassy CSS): Benotzt den .scss Dateiendung an ass voll konform mat der CSS Syntax
- Indented (einfach 'Sass' genannt): Benotzungen .sass Dateiextensioun an Andréck anstatt Klammer; et ass net voll mat der CSS Syntax konform, awer et ass méi séier ze schreiwen
Bedenkt datt Dateie vun enger Syntax op déi aner konvertéiert kënne ginn mat der sass-konvertéieren Kommando.
Variabelen
Just wéi aner Programméierungssproochen erlaabt Sass d'Benotzung vu Variablen déi Informatioun späichere kënnt déi Dir an Ärem Stilblat benotze kënnt. Zum Beispill kënnt Dir e Faarfwäert an enger Variabel uewen op der Datei späicheren, an dann dës Variabel benotze wann Dir d'Faarf vun Ären Elementer setzt. Dëst erlaabt Iech séier Är Faarwen z'änneren ouni all Zeil separat z'änneren.
Zum Beispill:
$ font-stack: Helvetica, sans-serif; $ primär-Faarf: # 333; Kierper {Schrëft: 100% $ Schrëft-Stack; Faarf: $ primär-Faarf; }
Déi folgend CSS ginn hiergestallt:
Kierper {Schrëft: 100% Helvetica, sans-serif; Faarf: # 333; }
Nascht
Nesting ass en duebelsidegt Schwert. Och wann et eng exzellent Method gëtt fir de Betrag vum Code ze reduzéieren deen Dir braucht ze schreiwen, kann et och zu iwwerqualifizéierten CSS féieren wann net suergfälteg ausgefouert gëtt. D'Iddi ass Är CSS Selekter sou ze nestelen datt Är HTML Hierarchie imitéiert.
Déi folgend weist e Basis Navigatiounsstil deen Nist benotzt:
nav {ul {Spillraum: 0; padding: 0; Lëscht-Stil: kee; } li {affichéieren: inline-block; } a {affichéieren: blockéieren; padding: 6px 12px; Textdekoratioun: keen; }}
D'CSS Ausgab ass wéi follegt:
nav ul {Spillraum: 0; padding: 0; Lëscht-Stil: kee; } nav li {affichéieren: inline-block; } nav a {affichéieren: blockéieren; padding: 6px 12px; Textdekoratioun: keen; }
Partiell
Partiell si méi kleng Sass Dateien déi importéiert kënne ginn (kuckt nächsten Abschnitt) an aner Sass Dateien. Denkt un Partiell als Codestécker. Mat dëse Codestécker kann Äre CSS elo modulär sinn a méi einfach ze pflegen. Eng Partiell gëtt als sou bezeechent andeems en se mat engem féierende Ënnersträich benannt: _partial.scss.
Importéieren
Benotzt mat Partialen (kuckt viregte Sektioun), den @importéieren Direktiv erlaabt Iech Är deelweis Dateien an déi aktuell Datei z'importéieren, fir eng eenzeg CSS Datei ze bauen. Opgepasst wéi vill Importer Dir als HTTP Ufro benotzt fir all eenzel generéiert.
// _reset.scss html, body, ul, ol {margin: 0; padding: 0; }
// basefile.scss @ import 'reset'; Kierper {Schrëft: 100% Helvetica, sans-serif; Hannergrondfaarf: #efefef; }
An déi entspriechend CSS Ausgab:
html, Kierper, ul, ol {Spillraum: 0; padding: 0; } Kierper {Schrëft: 100% Helvetica, sans-serif; Hannergrondfaarf: #efefef; }
Opgepasst: Wann Dir Partialer importéiert, musst Dir d'Dateiextensioun oder den Ënnerstreck net enthalen.
Mixins
Ee vun de Virdeeler vum Benotze vu Viraarbechter ass hir Fäegkeet komplexe laangwierege Code ze huelen an ze vereinfachen. Dëst ass wou Mixins praktesch kommen!
Zum Beispill, wann Dir d'Verkeefer Präfixe musst abannen, kënnt Dir e Mixin amplaz benotzen. Huelt e Bléck op dëst Beispill fir Grenz-Radius:
@mixin Grenzradius ($ Radius) {-webkit-Grenzradius: $ Radius; -moz-Grenz-Radius: $ Radius; -ms-Grenz-Radius: $ Radius; Grenzradius: $ Radius; } .box {@ enthalen Grenzradius (10px); }
Notiz den @mixin Direktiv uewen. Et huet den Numm kritt Grenz-Radius a benotzt d'Variabel $ Radius als Parameter. Dës Variabel gëtt benotzt fir de Radiuswäert fir all Element ze setzen.
Méi spéit huet den @ abegraff Direktiv nennt, zesumme mam Mixin Numm (Grenz-Radius) an e Parameter (10px). Sou .box {@ enthalen Grenzradius (10px); }.
Déi folgend CSS gëtt produzéiert:
.box {-webkit-Grenz-Radius: 10px; -moz-Grenz-Radius: 10px; -ms-Grenz-Radius: 10px; Grenzradius: 10px; }
Verlängeren / Ierwen
Den @ verlängeren Direktiv gouf als ee vun de mächtegste Feature vu Sass genannt. Nodeems et an Aktioun gesinn ass, ass et kloer firwat.
D'Iddi ass datt Dir mat dëser Direktiv net méi Klassennimm op Ären HTML Elementer musst abannen an Äre Code DRY ka behalen (widderhuelt Iech net). Är Selekter kënnen d'Stiler vun aneren Auswieler ierwen, an dann einfach verlängert ginn wann néideg. Elo dat ass mächteg.
Bedreiwer
D'Fäegkeet ze hunn Berechnungen an Ärem CSS ze maachen erlaabt Iech méi ze maachen, wéi Pixel Wäerter a Prozenter ëmsetzen. Dir hutt Zougang zu Standard mathematesch Funktiounen wéi Zousaz, Subtraktioun, Multiplikatioun an Divisioun. Natierlech kënnen dës Funktiounen kombinéiert gi fir komplex Berechnungen ze kreéieren.
Zousätzlech enthält Sass e puer agebaute Funktiounen fir ze hëllefen Zuelen ze manipuléieren. Funktiounen wéi Prozentsaz (), Buedem () an Ronn () fir der e puer ze nennen.
