Komme i gang med Sass Installasjon og Grunnleggende
I dette innlegget skal vi diskutere en CSS Preprocessor kalt Sass eller Syntactically Awesome Stylesheets.
Hvis du har fulgt våre tidligere innlegg på LESS, er vi sikre på at du er kjent med CSS Preprocessor. Både Sass og LESS er CSS Preprocessors som hovedsakelig utvider måten vi komponerer plain static på CSS på en mer dynamisk måte ved hjelp av programmeringsspråk som variabler, mixins og funksjoner.
Installere Sass
Før vi kan komponere Sass, må vi installere den. Sass er bygget på Ruby. Hvis du jobber på en Mac, er det sjansene for at du allerede har Ruby installert. Hvis du kan installere Ruby i Windows, bruker du denne Ruby Installer.
Etter at installasjonen er fullført, kan du gå til Terminal (på en Mac) eller i Kommandoprompt (på Windows), og skriv deretter følgende kommandolinje i den:
På Mac;
sudo gem installasjon sass
På Windows;
perle installasjon sass
Hvis installasjonen lykkes, vil du ha følgende varsel i Terminal / Command Prompt.
Deretter må vi velge hvilken katalog for Sass å se ved å bruke følgende kommando;
sass - watch bane / sass-katalog
Kommandolinjen over vil se hver .SCSS/.sass filer i sti / katalog og når en av filene i katalogen blir endret, vil Sass oppdatere de tilsvarende filene eller opprette en hvis ingen finnes.
Hvis vi trenger Sass for å generere filene i en bestemt katalog, kan vi gjøre det på denne måten.
sass-watch-sti / sass-katalog: sti / css-katalog
Vi kan også se en bestemt fil i stedet for katalogen, med denne kommandolinjen;
sass - watch bane / sass-katalog / styles.css
Hvis klokkekommandoen lykkes, vises noe som dette varselet nedenfor i Terminal / Kommandoprompt.
Videre lesning: Auto-kompilere Sass-filer med Sass 3
Sass-applikasjoner
Men hvis du hater å jobbe gjennom Terminal eller Command Prompt, kan du bruke noen programmer for Sass. Det frie alternativet er Scout; den er bygget på Adobe Air, slik at den kan kjøres på alle operativsystemer (Windows, OSX og Linux).
Det går imidlertid veldig sakte som noen tidligere har rapportert.
Så hvis du ikke har tålmodighet for det, er det også noen betalte alternativer. Prisen varierer for hver app, Compass.app går for $ 10, Fire.app, $ 14 og Codekit for $ 25.
Kode Høydepunkt
Selv om Sass primært er en CSS-utvidelse, kan den aktuelle editoren ikke markere syntaksen riktig. Heldigvis finnes det allerede noen pakker for nesten alle kodeditorer for å aktivere .sass eller .SCSS kodeutheving.
Hvis du jobber med Sublime Text 2 som jeg, kan du bruke disse pakkene; Sublim tekst HAML & Sass og Sublime Text 2 Sass pakken, og for en enklere måte kan du installere en av disse pakkene gjennom pakkekontroll.
For andre kodeditorer, se nedenfor, eller prøv Googling for det.
- Denne er en flott screencast-veiledning om å jobbe med Sass med Dreamweaver
- Sass-modus for Coda. Men det virker som om denne modusen er integrert med Coda fra versjon 2
- TextMate Offisiell SCSS Bundle
- Espressosukker til Sass
- InType Bundles
Sass Språk
Sass og mindre deler faktisk noen vanlige språk, nedenfor er noen av dem.
variabler
$ fargebase: # 000; $ bredde: 100px;
Den eneste forskjellen fra LESS variabler er at variabelen i Sass er definert med a $ skilt.
Nesting Rules
overskrift bredde: 980px; høyde: 80px; nav ul listestil: none; polstring: ingen; margin: ingen; li display: inline; en tekst-dekorasjon: ingen;
Mixins og Funksjoner
@mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-grense-radius: $ radius; -ms-grense-radius: $ radius; border-radius: $ radius;
operasjoner
li bredde: $ bredde / 5 - 10px;
Betinget erklæring
@if lyshet ($ fargebase)> = 51% bakgrunnsfarge: # 333333; @else bakgrunnsfarge: #ffffff;
I LESS kan du gjøre en lignende ting via Guard uttrykk, som vi har dekket i denne opplæringen.
Endelig tanke
Og det er det. I neste innlegg vil vi begynne å utforske Sass-språkene og kompaniet, Compass. Følg med.
