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.