Aan de slag met Sass installatie en de basisprincipes

In dit bericht bespreken we een CSS Preprocessor genaamd Sass of Syntactisch geweldige stylesheets.

Als je onze vorige berichten op LESS hebt gevolgd, zijn we er zeker van dat je bekend bent met de CSS Preprocessor. Zowel Sass als LESS zijn CSS Preprocessors die voornamelijk de manier uitbreiden waarop we duidelijk-statische CSS op een meer dynamische manier samenstellen met behulp van programmeertalen zoals variabelen, mixins en functies.

Sass installeren

Voordat we Sass kunnen samenstellen, moeten we het installeren. Sass is gebouwd op Ruby. Als je op een Mac werkt, is de kans groot dat je Ruby al hebt geïnstalleerd. Als u Ruby in Windows mag installeren, gebruikt u dit Ruby-installatieprogramma.

Nadat de installatie is voltooid, kunt u naar Terminal (op een Mac) of in Opdrachtprompt (op Windows) gaan en vervolgens de volgende opdrachtregel typen:

Op Mac;

 sudo gem install sass

Op Windows;

 gem installeer sass

Als de installatie slaagt, hebt u de volgende melding in uw terminal- / opdrachtprompt.

Vervolgens moeten we selecteren welke directory voor Sass moet worden bekeken met behulp van de volgende opdracht;

 sass --watch path / sass-directory

De bovenstaande opdrachtregel zal elk bekijken .SCSS/.sass bestanden in path / directory en telkens wanneer een van de bestanden in die map wordt gewijzigd, zal Sass de corresponderende bestanden bijwerken of er een maken als er geen bestaat.

Als we Sass nodig hebben om de bestanden in een specifieke map te genereren, kunnen we het op deze manier doen;

 sass --watch path / sass-directory: pad / css-map

We kunnen ook een specifiek bestand bekijken in plaats van de directory, met deze opdrachtregel;

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

Als de watch-opdracht slaagt, verschijnt zoiets als deze melding hieronder in uw terminal- / opdrachtprompt.

Verder lezen: Sass-bestanden automatisch compileren met Sass 3

Sass-toepassingen

Als je het echter niet leuk vindt om via Terminal of Command Prompt te werken, kun je sommige applicaties voor Sass gebruiken. De gratis optie is Scout; het is gebouwd op Adobe Air, zodat het kan worden uitgevoerd op alle besturingssystemen (Windows, OSX en Linux).

Het werkt echter erg langzaam, zoals sommigen eerder hebben gemeld.

Dus als je er geen geduld voor hebt, zijn er ook enkele betaalde opties. De prijs varieert voor elke app, Compass.app gaat voor $ 10, Fire.app, $ 14 en Codekit voor $ 25.

Codemarkering

Hoewel Sass in de eerste plaats een CSS-extensie is, is het mogelijk dat uw huidige editor de syntaxis niet correct markeert. Gelukkig zijn er al enkele pakketten voor bijna elke code-editor in te schakelen .sass of .SCSS code markeren.

Als je met Sublime Text 2 werkt zoals ik, kun je deze pakketten gebruiken; Sublime Text HAML & Sass en Sublime Text 2 Sass Package, en voor een eenvoudigere manier, kunt u een van deze pakketten installeren via Package Control.

Voor andere code-editors, zie hieronder, of probeer ernaar te googelen.

Deze is een geweldige screencast-tutorial over werken aan Sass met Dreamweaver
Sass-modus voor Coda. Maar het lijkt erop dat deze modus vanaf versie 2 is geïntegreerd met Coda
De officiële SCSS-bundel van TextMate
Espresso Sugar voor Sass
InType-bundels

Sass Language

Sass en LESS delen eigenlijk enkele veel voorkomende talen, hieronder enkele.

Variabelen

 $ color-base: # 000; $ width: 100px;

Het enige verschil met minder variabele is dat de variabele in Sass is gedefinieerd met een $ teken.

Nesten regels

 header width: 980px; hoogte: 80 px; nav ul list-style: none; opvulling: geen; marge: geen;  li display: inline; een text-decoration: none;

Mixins en functies

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ straal; -ms-border-radius: $ straal; grensradius: $ straal;

Activiteiten

 li breedte: $ width / 5 - 10px;

Voorwaardelijke verklaring

 @if lightness ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

In MINDER kun je iets soortgelijks doen via Guard-expressie, waarover we in deze tutorial aandacht hebben besteed.

Laatste gedachte

En dat is het. In de volgende post zullen we de Sass-talen en de bijbehorende Compass gaan verkennen. Blijf kijken.