Začínáme s instalací Sass a základy
V tomto příspěvku budeme diskutovat o CSS Preprocessor nazvaném Sass nebo Syntakticky úžasné styly.
Pokud jste sledovali naše předchozí příspěvky na LESS, jsme si jisti, že jste se seznámil s CSS Preprocessor. Sass i LESS jsou CSS Preprocessors, které primárně rozšiřují způsob, jakým skládáme plain-static-CSS dynamičtěji pomocí programovacích jazyků jako jsou Proměnné, Mixiny a Funkce.
Instalace Sass
Než budeme moci vytvořit Sass, musíme ho nainstalovat. Sass je postaven na Ruby. Pokud pracujete na Macu, šance jsou, máte již nainstalovaný Ruby. Pokud můžete nainstalovat Ruby ve Windows, použijte tento Ruby Installer.
Po dokončení instalace můžete přejít na Terminál (v systému Mac) nebo na příkazový řádek (v systému Windows) a zadat do něj následující příkazový řádek:
Na počítačích Mac;
sudo gem nainstalovat sass
Ve Windows;
gem nainstalovat sass
Pokud instalace proběhne úspěšně, budete mít v terminálu / příkazovém řádku následující upozornění.
Dále musíme vybrat, který adresář pro Sass bude sledovat pomocí následujícího příkazu;
sass --watch cesta / sass-adresář
Příkazový řádek bude sledovat každý .scss/.sass soubory v cesta / adresář a kdykoliv dojde ke změně jednoho ze souborů v tomto adresáři, Sass aktualizuje odpovídající soubory nebo je vytvoří, pokud žádný neexistuje.
Pokud potřebujeme Sass generovat soubory ve specifickém adresáři, můžeme to udělat tímto způsobem;
sass --watch cesta / sass-adresář: cesta / css-adresář
S tímto příkazovým řádkem můžeme také sledovat konkrétní soubor, nikoli adresář;
sass --watch cesta / sass-directory / styles.css
Pokud příkaz watch uspěje, objeví se v terminálu / příkazovém řádku něco jako toto oznámení.
Další čtení: Automatické kompilace souborů Sass s programem Sass 3
Aplikace Sass
Pokud však nenávidíte práci prostřednictvím terminálu nebo příkazového řádku, můžete pro aplikaci Sass použít některé aplikace. Volnou možností je Scout; je postaven na Adobe Air, takže může být spuštěn na všech OS (Windows, OSX a Linux).
Nicméně, to běží velmi pomalu, jak někteří dříve hlášeny.
Takže pokud na to nemáte trpělivost, existují i některé placené možnosti. Cena se liší pro každou aplikaci, Compass.app jde za $ 10, Fire.app, $ 14 a Codekit za $ 25.
Zvýraznění kódu
Ačkoli Sass je primárně rozšířením CSS, váš současný editor nemusí správně zvýraznit syntaxi. Naštěstí již existují některé balíčky pro téměř jakýkoli editor kódu, které by bylo možné povolit .sass nebo .scss zvýraznění kódu.
Pokud pracujete se Sublime Text 2 jako já, můžete tyto balíčky používat; Balíček Sublime Text HAML & Sass a Sublime Text 2 Sass Package, a pro snadnější způsob, můžete jeden z těchto balíčků nainstalovat prostřednictvím služby Package Control.
Pro ostatní editory kódu si přečtěte níže nebo zkuste službu Google pro ně.
- Tenhle je skvělý screencast návod na práci na Sassu s Dreamweaverem
- Režim Sass pro Codu. Zdá se však, že tento režim byl s verzí Coda integrován
- TextMate Oficiální SCSS balíček
- Espresso cukr pro Sass
- InType svazky
Jazyk Sass
Sass a LESS vlastně sdílí některé běžné jazyky, níže je jich několik.
Proměnné
$ color-base: # 000; $ width: 100px;
Jediný rozdíl od LESS proměnných je, že proměnná v Sass je definována pomocí a $ podepsat.
Pravidla hnízdění
header width: 980px; výška: 80px; nav ul seznam-styl: žádný; polstrování: žádné; marže: žádné; li zobrazit: inline; a text-decoration: none;
Směsi a funkce
@ poloměr ohraničení hrany ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; hraniční rádius: $ radius;
Operace
li width: $ width / 5 - 10px;
Podmíněné prohlášení
@f lehkost ($ color-base)> = 51% barva pozadí: # 333333; @else background-color: #ffffff;
V LESS můžete udělat něco podobného prostřednictvím výrazu Guard, o kterém jsme se zmiňovali v tomto tutoriálu.
Závěrečná myšlenka
A to je vše. V následujícím příspěvku začneme zkoumat jazyky Sass a jejich společníka Compass. Zůstaňte naladěni.
