Kom godt i gang med Sass Installation og det grundlæggende

I dette indlæg skal vi diskutere en CSS Preprocessor kaldet Sass eller Syntactically Awesome Stylesheets.

Hvis du har fulgt vores tidligere indlæg på LESS, er vi sikre på, at du er bekendt med CSS Preprocessor. Både Sass og LESS er CSS-præprocessorer, der primært udvider måden, hvorpå vi komponerer plain static-CSS på en mere dynamisk måde ved hjælp af programmeringssprog som variabler, mixins og funktioner.

Installation af Sass

Før vi kan komponere Sass, skal vi installere det. Sass er bygget på Ruby. Hvis du arbejder på en Mac, er der chancer for, at du allerede har Ruby installeret. Hvis du kan installere Ruby i Windows, skal du bruge denne Ruby Installer.

Når installationen er færdig, kan du gå til Terminal (på en Mac) eller i Kommandoprompt (på Windows) og derefter skrive følgende kommandolinje i den:

På Mac;

 sudo gem installation sass

På Windows;

 perle installation sass

Hvis installationen lykkes, får du følgende meddelelse i din Terminal / Command Prompt.

Dernæst skal vi vælge, hvilken mappe Sass skal se ved at bruge følgende kommando;

 sass - watch bane / sass-katalog

Kommandolinjen ovenfor vil se alle .SCSS/.sass filer i sti / mappe og når en af filerne i den pågældende mappe ændres, vil Sass opdatere de tilsvarende filer eller oprette en, hvis ingen findes.

Hvis vi har brug for Sass til at generere filerne i en bestemt mappe, kan vi gøre det på denne måde.

 sass - watch bane / sass-mappe: path / css-directory

Vi kan også se en bestemt fil i stedet for biblioteket, med denne kommandolinje;

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

Hvis urkommandoen lykkes, vises noget som denne underretning nedenfor i din Terminal / Kommandoprompt.

Yderligere læsning: Auto-kompilere Sass-filer med Sass 3

Sass Applications

Men hvis du hader at arbejde gennem Terminal eller Command Prompt, kan du bruge nogle applikationer til Sass. Den gratis indstilling er Scout; den er bygget på Adobe Air, så den kan køres på alle operativsystemer (Windows, OSX og Linux).

Det går dog meget langsomt, som nogle tidligere har rapporteret.

Så hvis du ikke har tålmodigheden for det, er der også nogle betalte muligheder. Prisen varierer for hver app, Compass.app går for $ 10, Fire.app, $ 14 og Codekit for $ 25.

Kode Fremhævning

Selv om Sass primært er en CSS-udvidelse, kan din nuværende editor muligvis ikke fremhæve syntaksen korrekt. Heldigvis er der allerede nogle pakker til næsten enhver kode editor til at aktivere .sass eller .SCSS kode fremhævning.

Hvis du arbejder med Sublime Text 2 som jeg gør, kan du bruge disse pakker; Sublim tekst HAML & Sass og Sublime Text 2 Sass-pakken, og for en nemmere måde kan du installere en af disse pakker gennem pakke kontrol.

For andre kode redaktører, se nedenfor, eller prøv Googling for det.

Denne er en stor screencast tutorial om at arbejde på Sass med Dreamweaver
Sass Mode til Coda. Men det ser ud til, at denne tilstand er blevet integreret med Coda fra version 2
TextMate Officiel SCSS Bundle
Espressosukker til Sass
InType Bundles

Sass Language

Sass og LESS deler faktisk nogle fælles sprog, nedenfor er et par af dem.

Variable

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

Den eneste forskel fra MINDRE variabler er, at variablen i Sass er defineret med a $ skilt.

Nestende regler

 overskrift bredde: 980px; højde: 80px; nav ul listestil: none; polstring: ingen; margen: ingen;  li display: inline; en tekst-dekoration: ingen;

Mixins og funktioner

 @mixin grænse-radius ($ radius) -moz-grænse-radius: $ radius; -webkit-grænse-radius: $ radius; -ms-grænseradius: $ radius; grænse-radius: $ radius;

operationer

 li bredde: $ bredde / 5 - 10px;

Betinget erklæring

 @if lyshed ($ farvebase)> = 51% baggrundsfarve: # 333333;  @else baggrundsfarve: #ffffff;

I LESS kan du gøre en lignende ting via Guard udtryk, som vi har dækket i denne vejledning.

Endelig tanke

Og det er det. I det næste indlæg begynder vi at udforske Sass-sprogene og dens ledsager, Compass. Bliv hængende.