Komma igång med Sass Installation och grunderna

I det här inlägget kommer vi att diskutera en CSS Preprocessor som heter Sass eller Syntactically Awesome Stylesheets.

Om du har följt våra tidigare inlägg på LESS, är vi säkra på att du är bekant med CSS Preprocessor. Både Sass och LESS är CSS Preprocessors som i första hand utökar sättet att skapa renstatisk-CSS på ett mer dynamiskt sätt med hjälp av programmeringsspråk som variabler, mixins och funktioner.

Installera Sass

Innan vi kan komponera Sass behöver vi installera den. Sass är byggt på Ruby. Om du arbetar på en Mac, är chansen att du redan har Ruby installerad. Om du kan installera Ruby i Windows, använd den här Ruby Installer.

När installationen är klar kan du gå till Terminal (på en Mac) eller i Command Prompt (på Windows) och skriv sedan följande kommandorad i den:

På Mac;

 sudo gem installation sass

På Windows;

 gem installation sass

Om installationen lyckas har du följande meddelande i din Terminal / Command Prompt.

Därefter måste vi välja vilken katalog för Sass att titta på med följande kommando;

 sass-watch-sökväg / sass-katalog

Kommandoraden ovan kommer att titta på alla .SCSS/.sass filer i sökväg / katalog och när någon av filerna i den katalogen ändras, kommer Sass att uppdatera motsvarande filer eller skapa en om ingen finns.

Om vi behöver Sass att generera filerna i en specifik katalog kan vi göra det på så sätt.

 sass-watch-path / sass-katalog: sökväg / css-katalog

Vi kan också titta på en specifik fil i stället för katalogen, med den här kommandoraden.

 sass-watch path / sass-katalog / styles.css

Om klockkommandot lyckas kommer något liknande den här meddelandet nedan att visas i din Terminal / Command Prompt.

Vidare läsning: Auto-kompilera Sass-filer med Sass 3

Sass Applications

Om du hatar att arbeta via Terminal eller Command Prompt kan du dock använda vissa applikationer för Sass. Det fria alternativet är Scout; det är byggt på Adobe Air så att det kan köras på alla operativsystem (Windows, OSX och Linux).

Det går emellertid mycket långsamt som vissa tidigare rapporterat.

Så om du inte har tålamod för det finns det också några betalda alternativ. Priset varierar för varje app, Compass.app går för $ 10, Fire.app, $ 14 och Codekit för $ 25.

Kod Highlighting

Även om Sass är främst en CSS-förlängning, kanske din nuvarande editor inte markerar syntaxen korrekt. Lyckligtvis finns det redan några paket för nästan vilken kodredigerare som helst .sass eller .SCSS kodmarkering.

Om du arbetar med Sublime Text 2 som jag gör kan du använda dessa paket. Sublim Text HAML & Sass och Sublime Text 2 Sass Paket, och för ett enklare sätt kan du installera ett av dessa paket genom Paketkontroll.

För andra kodredigerare, se nedan, eller försök Googling för det.

Den här är en bra screencast-handledning om att arbeta med Sass med Dreamweaver
Sass-läge för Coda. Men det verkar som om det här läget har integrerats med Coda från version 2
TextMate Officiell SCSS Bundle
Espressosocker för Sass
InType Bundles

Sass Language

Sass och LESS delar faktiskt några vanliga språk, nedan är några av dem.

variabler

 $ färgbas: # 000; $ bredd: 100px;

Den enda skillnaden från LESS-variabler är att variabeln i Sass definieras med a $ skylt.

Nesting Rules

 rubrik bredd: 980px; höjd: 80px; nav ul list-style: none; vaddering: ingen; marginal: ingen;  li display: inline; en text-decoration: none;

Mixins och funktioner

 @mixin gränsenradie ($ radie) -moz-gränsen-radie: $ radie; -webkit-gräns-radie: $ radius; -ms-gränsen-radien: $ radie; gränsstrålning: $ radie;

Operationer

 li bredd: $ width / 5 - 10px;

Villkorligt uttalande

 @if ljushet ($ färgbas)> = 51% bakgrundsfärg: # 333333;  @else bakgrundsfärg: #ffffff;

I MINDRE kan du göra en liknande sak via Guard uttryck, som vi har behandlat i denna handledning.

Slutlig tanke

Och det är allt. I nästa inlägg börjar vi utforska Sass-språken och dess följeslagare, Compass. Håll dig igång.