Share
Sass kan potentiellt kallas CSS 2.0; det har några riktigt fina funktioner som gör att du kan skriva din kod på mindre tid och med större flexibilitet. I dagens artikel arbetar vi med grunderna!
Sass är helt enkelt ett annat sätt att arbeta med CSS. Det låter dig hålla din CSS-kod väldigt enkelt och hjälper till att öka läsbarheten. Det tar något sånt här:
Och gör det till:
Du kan kolla in Sass på http://sass-lang.com/
Kompass gör det lättare att arbeta med Sass. Författaren, Chris Eppstein, har också inkluderat några konverterade ramar som Blueprint, YUI och 960.gs. Det integreras också enkelt med Ruby-baserade projekt, men är lika lätt att lägga till i något annat projekt. Kompass är öppen källkod och är extremt väl dokumenterad. Kolla in källan och dokumentationen.
Båda Sass (som ingår i Hamlprojektet) och Compass installeras via RubyGems. Om du inte har någon aning om vad jag pratar om, kolla in "Steg 1 - Installera Ruby on Rails" i min tidigare artikel Ruby on Rails for Designers och följ stegen ner tills du slår på avsnittet "Installing Rails".
För att installera båda dessa pärlor kan vi bara köra ett enda kommando:
(sudo) pärla installera haml chriseppstein-kompass
Så länge det står att det har installerats båda ädelstenarna, är det bra att gå!
Om du arbetar med ett Ruby-baserat projekt, kolla sedan dokumentationen eftersom det kommer att förklara hur du får det att fungera med din specifika ram, men jag antar att vi arbetar med ett enkelt HTML eller liknande projekt.
Kompasskommandot har många alternativ, och om du kör kompass - hjälp kan du se:
FYI: Nästa till topplinjen som säger "Hämtar hamlkanten pärla." beror på att jag använder den senaste versionen, så du behöver inte oroa dig för det om din säger något annat.
Nu ska vi börja vårt kompassprojekt. För att skapa springa följande kommando (inklusive efterföljande period, som berättar kompass där vi vill göra vårt projekt!)
kompass - sass-dir = sass .
Och du borde se:
Där initialiseras skulle Compass normalt vara standard för att ha Sass i ett mappnamn src, men jag ville ändra det så jag lade till alternativet. Om du tittar på mappen ska du se en fil med namnet config.rb och två andra mappar.
Config.rb är den konfiguration som Compass tittar på, men det mesta du behöver inte röra med det här. Också, som utgången från skapningskommandot säger, har vi tre sätt att uppdatera vår CSS från vår Sass:
Accentsconagua
kompass - Om du använder det här alternativet måste du vara i rätt katalog, och sedan skulle Compass kompilera din Sass en gång.kompass -u väg / till / projekt - Det här är ungefär samma som kommandot som ovan, men du behöver inte vara i projektkatalogen och passera det snarare med kommandot.kompass - klocka [väg / till / projekt] - det här kommandot är ganska jättefint eftersom det tittar på eventuella ändringar i dina Sass-filer och kommer automatiskt att kompilera dem när en förändring upptäcks.Nu när du vet hur du installerar ett projekt ska jag förklara några av "reglerna" för att arbeta med Sass
Normalt när du skriver CSS skulle du skriva något som:
#header width: 900px; bakgrund: # 111; #header a color: # 000; text-decoration: none;
Ett av problemen med det är att du upprepar samma namn många gånger. Låt oss göra detta till Sass. Jag ska arbeta i filen screen.sass, så ta bort allt och din Sass skulle vilja:
#header: width 900px: background # 111 a: color # 000: text-decoration none
Personligen är det mycket lättare att läsa och skriva på det här sättet, inga lockiga hängslen eller semikolon. Det sätt som Sass förstår häckningen är genom indragning.
Den första väljaren är inte indragad alls, så den slutliga CSS med början med det. Dessutom börjar alla egenskaper, (så färg, höjd bredd, etc.) med ett kolon. Så för egenskaperna till #header är de indragna. Det spelar ingen roll om du använder flikar eller mellanslag, men du måste förbli konsekvent, annars kommer du att se ett fel (som jag visar på bara en minut).
Så nu du har dina egenskaper har vi vår nästa väljare. Eftersom detta är indragna till samma som egenskaperna kommer CSS-utgången att vara #header a ...
Nu när vi är så här långt, kan vi försöka kompilera: (i din projektkatalog)
kompass
Och voila!
Låt oss säga att du inte indragit allt detsamma, Compass skulle fel:
Nu, när du väl vet CSS, kommer Sass inte att vara väldigt mycket av en inlärningskurva, eftersom den största skillnaden när du kommer igång är de olika formateringsreglerna. Därefter kommer vi att arbeta med några av de mer avancerade (men svalare!) Delarna av Sass.
En fantastisk egenskap hos Sass är dess förmåga att använda variabler. Ett exempel:
!link_color = #fff #header: bredd 900px: bakgrund # 111 a: color =! link_color: text-decoration none
Att sammanställa detta skulle ge dig:
Du kan skratta åt den här titeln, men det är sant, du kan göra matte i Sass! För den här demonstrationen använder vi Sass interaktiva läge, så kör:
sass -i
Och lite röra runt skulle ge dig:
Eller ett mer visuellt tillvägagångssätt:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Förutom addition och subtraktion kan du också multiplicera och dela upp:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
För att lämna Sass interaktivt läge, tryck på Control-C och skriv sedan "avsluta" och tryck på enter.
Om du någonsin har hört talas om att hålla din kod DRY, betyder DRY "repetera inte dig själv". Mixins tillåter dig att göra just det. Till exempel, med den ökande populariteten av avrundade hörn, kanske du vill skapa en mixin för att hantera det, så någonstans (inte under en väljare) du skulle lägga till:
= avrundad: radieradio 4px: -moz-gränsradio 4px: -webkit-gränsradio 4px
Och att använda, skulle du göra något som:
#header: bredd 900px: bakgrund # 111 + rundad
Och när de sammanställdes:
Låt oss säga att du kanske vill att gränsenradiusen ska vara variabel - du kan få en mixin att förvänta dig att passera några värden. Ändra vårt mixin, det skulle se ut som:
= avrundad (! radien = 4px): radie-radien =! radie: -moz-border-radius =! radie: -webkit-border-radius =! radius
Och då att använda kan du använda vad vi gjorde tidigare, och då skulle värdet vara standard till 4px, annars:
#header: width 900px: background # 111 + rounded (8px)
Sass har också möjlighet att importera andra Sass-filer, så vi kan säga att du ville importera en fil (i samma som den här sass-filen), du skulle lägga till:
@import reset.sass
Den här funktionen är väldigt trevligt för att ge dig möjlighet att hålla utomstående stilar utanför din huvudfil. Till exempel kan du också behålla en mixins sass-fil som du kopierade runt projekt och då skulle en enkel import lägga till den koden den - ingen kopia och klistra in.
Jag hoppas du förstår grunderna i att använda Sass och Compass och kommer eventuellt att använda den i ditt nästa projekt! Nu, om du är som jag var när jag hittade Sass och sa "Jag behöver inte det här!", Prova. Jag har övergått till det för alla mina senaste projekt och jag gillar verkligen att jobba med det.
Här är några länkar som kan hjälpa dig på vägen:
