Začíname s inštaláciou Sass a základmi
V tomto príspevku budeme diskutovať o CSS Preprocessor s názvom Sass alebo Syntakticky úžasné štýlové hárky.
Ak ste sledovali naše predchádzajúce príspevky na LESS, sme si istí, že ste oboznámení s CSS Preprocessor. Obaja Sass a LESS sú CSS Preprocessors, ktoré primárne rozširujú spôsob, akým vytvárame dynamickejšie obyčajne-static-CSS pomocou programovacích jazykov ako sú premenné, Mixins a Functions.
Inštalácia Sass
Než budeme môcť kompilovať Sass, potrebujeme ho nainštalovať. Sass je postavený na Ruby. Ak pracujete na počítači Mac, je pravdepodobné, že máte nainštalovaný Ruby. Ak môžete nainštalovať Ruby v systéme Windows, použite tento Ruby Installer.
Po dokončení inštalácie môžete prejsť do terminálu (na počítači Macintosh) alebo do príkazového riadka (v systéme Windows) a zadajte nasledujúci príkazový riadok:
Na počítači Mac;
sudo gem nainštalujte sass
V systéme Windows;
gem install sass
Ak je inštalácia úspešná, budete mať vo svojom terminálovom / príkazovom riadku nasledujúce upozornenie.
Ďalej musíme vybrať, ktorý adresár sa má Sass pozerať pomocou nasledujúceho príkazu;
sass - sledovať cestu / sass-adresár
Príkazový riadok vyššie bude sledovať každý .SCSS/.Sass súbory v path / adresár a kedykoľvek sa zmení jeden zo súborov v tomto adresári, Sass aktualizuje príslušné súbory alebo vytvorí jeden, ak neexistuje.
Ak potrebujeme Sass generovať súbory v konkrétnom adresári, môžeme to urobiť takto;
sass - sledovať cestu / sass-adresár: path / css-directory
Môžeme tiež sledovať konkrétny súbor a nie adresár s týmto príkazovým riadkom;
sass - sledovať cestu / sass-adresár / styles.css
Ak sa príkaz na sledovanie stane úspešným, vo vašom terminálovom / príkazovom riadku sa objaví niečo podobné.
Ďalšie čítanie: Auto-kompilovať Sass súbory s Sass 3
Aplikácie Sass
Ak však nenávidíte prácu prostredníctvom terminálu alebo príkazového riadku, môžete použiť niektoré aplikácie pre Sass. Voľná voľba je Scout; je postavený na platforme Adobe Air, takže môže byť spustený na všetkých OS (Windows, OSX a Linux).
Avšak, to je veľmi pomalé, ako niektorí predtým hlásili.
Takže ak nemáte pre ne trpezlivosť, existujú aj niektoré platené možnosti. Cena za každú aplikáciu sa líši, Compass.app platí za 10 dolárov, Fire.app, 14 dolárov a Codekit za 25 dolárov.
Zvýraznenie kódu
Hoci Sass je predovšetkým rozšírenie CSS, váš aktuálny editor nemusí správne vyzdvihnúť syntax. Našťastie už existujú nejaké balíky pre takmer ľubovoľný editor kódov, ktoré umožňujú .Sass alebo .SCSS zvýraznenie kódu.
Ak pracujete s Sublime Text 2 ako ja, môžete použiť tieto balíky; Hlboký text HAML & Sass a Sublime Text 2 Sass Package a pre jednoduchší spôsob môžete nainštalovať jeden z týchto balíčkov cez Control Package.
Ďalšie editory kódov nájdete nižšie alebo skúste Googling za to.
- Toto je skvelý screencast tutorial na práci s Sass s Dreamweaverom
- Režim Sass pre Coda. Zdá sa však, že tento režim bol integrovaný s verziou 2 od spoločnosti Coda
- Textový úradný balík SCSS
- Espresso Sugar pre Sass
- InType Bundles
Jazyk Sass
Sass a LESS skutočne zdieľajú niektoré bežné jazyky, nižšie sú niektoré z nich.
premenné
$ color-base: # 000; $ width: 100px;
Jediný rozdiel medzi premennými LESS je to, že premenná v Sass je definovaná a $ znamenie.
Pravidlá hniezdenia
hlavička šírka: 980px; výška: 80px; nav ul zoznam-štýl: žiadny; polstrovanie: žiadne; rozpätie: žiadne; li zobrazenie: inline; a text-decoration: none;
Mixiny a funkcie
@mixin okraj polomeru (polomer $) -moz-border-radius: polomer $; -webkit-border-radius: polomer $; -ms-border-radius: polomer $; okraj polomeru: polomer $;
operácie
li šírka: $ šírka / 5 - 10px;
Podmienené vyhlásenie
@if ľahkosť ($ color-base)> = 51% farba pozadia: # 333333; @else farba pozadia: #ffffff;
V LESS môžete urobiť podobnú vec prostredníctvom výrazu Guard, o ktorom sme sa v tejto príručke zaoberali.
Konečná myšlienka
A to je všetko. V ďalšom príspevku začneme skúmať jazyky Sass a jeho spoločníka Compass. Zostaňte naladení.
