Share
Sass kan potensielt kalles CSS 2.0; Den har noen veldig finkjente funksjoner som lar deg skrive koden på kortere tid og med større fleksibilitet. I dagens artikkel skal vi arbeide med det grunnleggende!
Sass er ganske enkelt en annen måte å jobbe med CSS. Det lar deg holde CSS-koden veldig enkel og bidrar til å øke lesbarheten. Det tar noe slikt:
Og gjør det til:
Du kan sjekke ut Sass på http://sass-lang.com/
Kompass gjør det enda enklere å jobbe med Sass. Forfatteren, Chris Eppstein, har også tatt med noen konverterte rammer som Blueprint, YUI og 960.gs. Den integreres også enkelt med Ruby-baserte prosjekter, men er like lett å legge til i et annet prosjekt. Kompass er åpen kildekode og er ekstremt godt dokumentert. Sjekk ut kilden og dokumentasjonen.
Både Sass (som er en del av Haml-prosjektet) og Kompass er installert gjennom RubyGems. Hvis du ikke har noen anelse om hva jeg snakker om, sjekk ut "Trinn 1 - Installere Ruby on Rails" i min forrige artikkel Ruby on Rails for Designers, og følg trinnene ned til du treffer delen "Installing Rails".
For å installere begge disse edelstenene kan vi bare kjøre en enkelt kommando:
(sudo) perle installere haml chriseppstein-kompass
Så lenge det står at det er vellykket installert begge edelstener, er det godt å gå!
Hvis du jobber med et Ruby-basert prosjekt, så sjekk ut dokumentasjonen som det vil forklare hvordan du får det til å fungere med ditt spesifikke rammeverk, men jeg antar at vi jobber med et enkelt HTML eller lignende prosjekt.
Kompasskommandoen har mange alternativer, og hvis du kjører kompass --hjelp, ser du kanskje:
FYI: Den neste til topplinjen som sier "Laster hamlkanten perle." er fordi jeg bruker den nyeste versjonen, så du trenger ikke å bekymre deg om det hvis din sier noe annet.
Nå skal vi starte vårt Kompass-prosjekt. For å opprette kjøre følgende kommando (inkludert etterfølgende periode, som forteller kompass hvor vi vil gjøre prosjektet vårt!)
kompass - sass-dir = sass .
Og du bør se:
Hvor initialiserer, ville Compass normalt være standard for å ha Sass i et mappenavn src, men jeg ville endre det, så jeg la til alternativet. Hvis du ser på mappen, bør du se en fil med navnet config.rb og to andre mapper.
Config.rb er konfigurasjonen som Compass ser på, men det meste du ikke trenger å rote med dette. Også, som produksjonen fra opprettelseskommandoen sier, har vi tre måter å oppdatere vår CSS fra vår Sass:
Accentsconagua
kompass - Ved å bruke dette alternativet, må du være i riktig katalog, og Compass vil da kompilere Sass en gang.kompass -u sti / til / prosjekt - Dette er omtrent det samme som kommandoen som ovenfor, men du trenger ikke å være i prosjektkatalogen, og heller passere den med kommandoen.kompass - klokke [sti / til / prosjekt] - Denne kommandoen er ganske kjempebra fordi den overvåker eventuelle endringer i Sass-filene dine, og vil automatisk kompilere dem når det oppdages en endring.Nå som du vet hvordan du skal sette opp et prosjekt, skal jeg forklare noen av "reglene" for å jobbe med Sass
Normalt når du skriver CSS, vil du skrive noe som:
#header width: 900px; bakgrunn: # 111; #header a color: # 000; text-decoration: none;
Et av problemene med det er at du gjentar det samme navnet mange ganger. La oss gjøre dette til Sass. Jeg skal jobbe i screen.sass-filen, så slett alt og Sass vil gjerne:
#header: width 900px: background # 111 a: color # 000: tekst-decoration none
Personlig at det er mye lettere å lese og skrive på denne måten, ingen krøllete braces eller semikolon. Måten Sass forstår hekket på, er gjennom innrykk.
Den første velgeren er ikke innrykk i det hele tatt, så den endelige CSS starter med det. Også, alle egenskaper, (så farge, høyde bredde, etc) begynner med et kolon. Så for egenskapene til #header er de innrykket. Det spiller ingen rolle om du bruker faner eller mellomrom, men du må forbli konsistent, ellers vil du se en feil (som jeg vil vise om et minutt).
Så nå som du har dine eiendommer, har vi vår neste valg. Siden dette er innrykket til det samme som egenskapene, vil CSS-utgangen være #header a ...
Nå som vi er så langt, kan vi prøve å samle: (i prosjektkatalogen)
kompass
Og voila!
La oss si at du ikke har sagt alt det samme, Compass ville feil:
Nå, når du vet CSS, vil Sass ikke være veldig mye av en læringskurve, da den største forskjellen når du kommer i gang, er de forskjellige formateringsreglene. Deretter skal vi jobbe med noen av de mer avanserte (men kjøligere!) Delene av Sass.
En fantastisk funksjon av Sass er det er evne til å bruke variabler. Et eksempel:
!link_color = #fff #header: width 900px: background # 111 a: color =! link_color: tekst-dekorasjon ingen
Kompilere dette, ville gi deg:
Du kan være latter på denne tittelen, men det er sant, du kan gjøre matte i Sass! For denne demonstrasjonen bruker vi Sass interaktive modus, så kjør:
sass -i
Og litt rote rundt ville gi deg:
Eller en mer visuell tilnærming:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Bortsett fra tillegg og subtraksjon, kan du også multiplisere og dele:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
For å gå ut av Sass interaktive modus, trykk på Control-C, og skriv deretter "slutt", og trykk enter.
Hvis du noen gang har hørt om å holde koden DRY, betyr DRY "ikke gjenta selv". Mixins lar deg gjøre nettopp det. For eksempel, med den økende populariteten til avrundede hjørner, vil du kanskje lage en mixin for å håndtere det, så et sted, (ikke under en väljare) du vil legge til:
= avrundet: grense-radius 4px: -moz-grense-radius 4px: -webkit-grense-radius 4px
Og for å bruke, ville du gjøre noe som helst:
#header: bredde 900px: bakgrunn # 111 + avrundet
Og når de er samlet:
La oss si at du kanskje vil at grensediameteren er variabel - vel, du kan ha en mixin for å forvente å bli bestått noen verdier. Endre vår mixin, det ville se ut som:
= avrundet (! radius = 4px): grense-radius =! radius: -moz-border-radius =! radius: -webkit-border-radius =! radius
Og da for å bruke kan du bruke det vi gjorde før, og da ville verdien være standard til 4px, ellers:
#header: width 900px: background # 111 + rounded (8px)
Sass har også muligheten til å importere andre Sass-filer, så vi kan si at du ønsket å importere en fil (i samme som denne sass-filen), du vil legge til:
@import reset.sass
Denne funksjonen er veldig hyggelig i å gi deg muligheten til å holde fremmede stiler utenfor hovedfilen din. For eksempel kan du også beholde en mixins sass-fil som du kopierte rundt prosjekter, og deretter ville en enkel import legge til den koden den - ingen kopi og lim inn.
Jeg håper du forstår det grunnleggende ved å bruke Sass og Compass og vil muligens bruke det i ditt neste prosjekt! Nå, hvis du er som jeg var da jeg fant Sass, og sa "Jeg trenger ikke dette!", Prøv det. Jeg har byttet til den for alle mine siste prosjekter, og jeg liker virkelig å jobbe med det.
Her er noen få lenker som kan hjelpe deg underveis:
