Du har muligvis hørt om CSS-forbehandling og undrer dig over, hvad alt er i gang med. Du har måske endda hørt om Sass eller MINDRE .
Kort sagt, forbehandling af din CSS giver dig mulighed for at skrive mere koncise stilark, der er formateret pænt og kræver mindre gentagne teknikker, der almindeligvis findes, når du skriver CSS-kode. Resultatet er mere dynamisk styling og rigelige mængder tid, der er gemt, når der udvikles websteder eller applikationer.
Hvis du allerede skriver CSS, kan du nemt lære at præprocessere dit CSS. Når du forstår omfanget af Sass, vil du spekulere på, hvorfor du ikke skifter før.
Sass ligner CSS, men har sine oplagte forskelle, når du dykker ind. Der er to måder at skrive Sass på, og det er i sidste ende op til dig, hvilken stil du foretrækker. Jeg bruger den indrykte og bracketed stil (.scss) i mine projekter, fordi jeg virkelig gerne visualiserer, hvor en blok slutter og begynder, når en masse kode bliver nestet. Når Sass-koden er blevet behandlet, kompileres den automatisk til traditionel CSS ved hjælp af en forarbejdningsmotor.
Der er mange apps til rådighed, som gør det muligt at forudkompilere din Sass til at være sømløse og let nemt. For at installere, kan du bruge kommandolinjen, så længe du har installeret Ruby på din maskine. Hvis du ikke er fortrolig med kommandolinjen, er der andre muligheder (mere på nedenstående), og hvis dette er over dit hoved, skal du besøge Sass-lang.com for at lære at gøre dette i et let trin for trin format. I sidste ende vil Sass-installationen ved hjælp af en hvilken som helst metode være kommandolinje eller app, se dine ændringer og automatisk kompilere ned til det traditionelle CSS for dig.
Jeg anbefaler stærkt at bruge apps som f.eks Codekit , LiveReload , eller Blanding som hjælper dig med at oprette et Sass-projekt på en Mac fra bunden, eller hvis du er en Windows-bruger, jeg anbefaler PrePros . Codekit, mit valg af præprocessor, hjælper mig med at forarbejde min Sass samt validere og reducere din kode for at gøre det muligt for dit websted at køre hurtigt og effektivt. (Evnen til at skabe Kompas eller bourbon baserede projekter inden for Codekit er også en fantastisk funktion, men er uden for denne artikels anvendelsesområde.) Når du er mere komfortabel med Sass, skal du tjekke, hvordan du bruger Compass og Bourbon i dine Sass-projekter.
Sass står for Syntactically Awesome Stylesheets og blev oprettet af Hampton Catlin . Sass introducerer nye koncepter som variabler, mixins og nesting i CSS-koden, du allerede kender og elsker. Disse begreber gør i sidste ende din CSS fantastisk, lettere at skrive og mere dynamisk. Alle disse funktioner kombineret, fremskynde enhver designer eller udviklerens workflow.
Hvad der ofte forveksles med folk er de alternative måder at skrive Sass på. Du vil se andre tutorials eller forklaringer på Sass ved hjælp af .SCSS eller .Sass udvidelsen for deres Sass filer. Dette er tydeligt, fordi der er to måder at skrive koden på, som producerer samme output. Det mest almindelige, jeg har set, og den metode, jeg aktuelt bruger, er den konsolerede version, der kaldes .SCSS. En anden metode er .Sass-udvidelsen, som afhænger mere af indrykning snarere end punktlige elementer og er afhængig af hvidt rum. Med denne syntaks er der ikke behov for halvkolonner eller parenteser, som du ser i CSS og .SCSS-syntaksen.
Tjek nedenstående eksempel.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackOkay så nu spekulerer du sikkert på, hvordan du får Sass opsætning til dine egne projekter. Processen er temmelig let, især hvis du bruger Codekit eller en lignende applikation til at hjælpe dig undervejs.
En typisk filstruktur af et Sass-projekt ser ud som nedenstående skitse. Dette kan se skræmmende ud, men jeg lover at din arbejdsgang vil blive forbedret, når du har pakket dit hoved om, hvordan tingene fungerer sammen. I sidste ende bliver hele din Sass samlet ned til en CSS-fil, som vil være den fil, du indeholder i dine arbejdsdokumenter, det være sig HTML, PHP osv.
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Hvordan du opsætter din struktur i sidste ende afhænger af dig. Start med en grundlæggende struktur og finjuster dine egne behov og arbejdsgang.
Sass udvider CSS @ import- reglen for at tillade det at importere Sass- og SCSS-filer. Alle importerede filer slås sammen til en enkelt udgivet CSS-fil. Derudover overføres alle variabler eller mixins defineret i importerede filer til hovedfilen, hvilket betyder at du næsten kan blande og matche enhver fil og være sikker på, at alle dine stilarter forbliver på globalt niveau.
@import tager et filnavn, der skal importeres. Som en sidste udvej importeres Sass- eller SCSS-filer via det valgte filnavn. Hvis der ikke er nogen udvidelse, vil Sass forsøge at finde en fil med det navn og .scss eller .Sass udvidelsen og importere det.
Hvis du har en typisk Sass-projektopsætning, vil du bemærke nogle @import-regler inden for en basisfil. Dette giver dig simpelthen mulighed for at have flere filer, som synkroniseres effektivt, når de er kompileret, for eksempel:
@import "main.scss";eller:
@import "main";@PartialsHvis du har en SCSS- eller Sass-fil, som du vil importere, men ikke kompilerer til CSS, kan du tilføje en understregning til begyndelsen af filnavnet, som ellers er kendt som en Delvis. Når koden samler, ignorerer Sass partikler, når de behandles til CSS. For eksempel kan du have _buttons.scss, ingen _buttons.css fil ville blive oprettet, og du kan derefter @import "knapper";
Bedste praksis er at oprette en delvise mappe og placere alle dine delvise Sass-filer inde i den. Hvis du gør dette forsikringer, vil du ikke have duplikatfilnavne, som Sass ikke tillader, for eksempel den delvise _buttons.scss og filknapperne .scss kan ikke findes i samme mappe. Brug af partials er en fantastisk måde at holde orden på globalt plan. Så længe du @import filen, er Sass du skriver brugbar i hele projektet. Typisk inden for delpartikler skaber jeg mixins eller variabler til brug i hele mit projekt. Jeg navngiver dem baseret på deres indhold og de elementer, de styler.
Variabler i CSS er et gennembrud i moderne webudvikling. Med Sass kan du oprette variabler til ting som fonte, farver, størrelser, margen, polstring osv. Listen er uendelig. Hvis du skriver JavaScript eller PHP, er begrebet forholdsvis ensartet med hensyn til at definere variabler og konventioner.
Så hvorfor bruge variabler? Nemme, variabler giver dig mulighed for at bruge et element mere end én gang, ligner en klasse i HTML eller en variabel i JavaScript. For eksempel, sig du definere flere divs med en bestemt baggrundsfarve. Du kan bruge variablen, der er lettere at huske i stedet for den traditionelle hex-kode eller RGB-beregning. At lave en variabel med et let at huske navn giver mulighed for mindre kopiering og indsætning og en mere produktiv arbejdsgang. Det samme koncept gælder, når en variabel kan implementeres, og med Sass, der er stort set hvor som helst, for eksempel dette .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}vil resultere i denne .css fil:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Den kolde del om variabler er, at de er ekstremt ligner dem, der anvendes i skriptsprog. Variabler inde i Sass kan bruges indenfor både operationer og funktioner. Standardmatematikoperationerne (+, -, *, / og%) understøttes for tal. Til farver er der indbygget funktioner i Sass, der retter sig mod lys, nuance, mætning og meget mere.
At have denne funktionalitet gør din kode mere dynamisk end nogensinde. Hvis du for eksempel vil ændre den samlede linkfarve på dit websted, kan du simpelthen ændre variablen, genopsætte, og dit websted opdateres dynamisk hele tiden. Tjek et andet eksempel nedenfor for en genbrugsnavigationsliste, dette .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} vil resultere i dette .css:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Nesting er en stor grund til, at jeg elsker Sass. Du skriver færre kodelinjer i sidste ende, og hele din kode er let at læse på grund af den indlejrede formatering. (Det samme begreb om høsting findes også i mindre.)
Der er to typer nesting:
Selector nesting i Sass ligner hvordan du ville neste HTML:
Main Content
Sidebar Content
Sass-versionen af nesting:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}ville resultere i følgende CSS:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}Den anden type nestning er ejendom nesting. Du kan huse egenskaber med samme præfiks til bedre målelementer, hvilket resulterer i færre linjer kode, for eksempel dette:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}ville resultere i dette CSS:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Af alle Sass-funktionerne skal Mixins være den mest kraftfulde. Mixiner ligner en variabel men på steroider. Du kan definere en komplet stil af et element og genbruge disse stilarter i hele dit projekt.
Mixiner er defineret ved hjælp af @mixin- direktivet, som tager en blok af stilarter, du har oprettet før, og anvender den til den valgte vælger ved hjælp af @include- direktivet. Nedenfor er et fælles CSS-mønster, der bruges til at oprette en vandret navigationsmenu. I stedet for at skrive den samme kode for hver navigationsinstans, skal du blot bruge en mixin og senere inkludere den, hvor det er nødvendigt. Dette koncept kan gøres til alt hvad du bruger igen og igen som knapper, typografi, gradienter osv. ..
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}Og her inkludere vi mixin med en linje kode:
ul.navbar {@include navigate;}hvilket resulterer i denne udarbejdede CSS:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Du kan endda gå så langt som at oprette brugerdefinerede mixins, der bruger argumenter til at opdatere dynamisk. Derudover kan du inkludere mixins inden for andre mixins eller oprette funktioner ved hjælp af mixins og mere. Kraften bag disse er helt enorm.
Der er nogle populære foruddefinerede mixin samlinger, som jeg nævnte tidligere kaldet Compass og Bourbon. Med et simpelt @import i dit projekt kan du få adgang til allerede genererede mixins, der almindeligvis anvendes på internettet. Der er så mange muligheder, at det er svært at dække alt, der er tilgængeligt, men det er absolut sjovt at eksperimentere og få dine hænder snavset ved at udvikle brugerdefinerede animationer eller overgange med et par linjer kode snarere end en skærm fuld. Mixins gør kryds browser udvikling en leg, hvis du ikke har lyst til at skrive browserdefinerede præfikser igen og igen i dit CSS.
For eksempel her skaber vi en mixin med argumenter, der gør det muligt at tilpasse det.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }som giver os dette CSS, når det er sammensat:
p {border-color: blue;border-width: lin;border-style: dashed;}Mens Sass har en læringskurve, tror jeg virkelig, at når du først forstår metoderne og syntaksen, vil du aldrig vil gå tilbage til at skrive standard CSS igen.
Sass er ekstremt kraftfuld, og jeg har kun dækket det grundlæggende her. Med traditionelle CSS har vi alle fundet kopi og indsæt eller find og erstatter opgaver, der spilder så meget tid i udviklingsfasen af dit projekt. Giv Sass et forsøg og opdag, hvordan du opbygger en effektiv arbejdsgang i dine fremtidige projekter.
Bruger du Sass, eller favoriserer en anden CSS preprocessor? Har du en favorit mixin? Lad os vide i kommentarerne.
Fremhævet billede / thumbnail, bruger nul til helt-billede via Shutterstock.