Първи стъпки с инсталацията на Sass и с Основите

В този пост ще обсъдим CSS Preprocessor, наречен Sass или Синтактично страхотни стилове.

Ако сте следвали предишните ни постове на LESS, ние сме сигурни, че сте запознати с CSS Preprocessor. Както Sass, така и LESS са CSS Preprocessors, които основно разширяват начина, по който съставяме чиста статична CSS по по-динамичен начин, използвайки езици за програмиране като Variables, Mixins и Functions..

Инсталиране на Sass

Преди да можем да съставим Sass трябва да го инсталираме. Sass е построен върху Ruby. Ако работите на Mac, шансовете са, че вече имате инсталиран Ruby. Ако можете да инсталирате Ruby в Windows, използвайте този Ruby Installer.

След като инсталацията приключи, можете да отидете в терминала (на Mac) или в командния ред (в Windows) и след това да въведете следния команден ред:

На Mac;

 sudo gem install sass

В Windows;

 gem install sass

Ако инсталацията успее, ще имате следното известие във вашия терминален / команден ред.

След това трябва да изберете коя директория за Sass да гледате, като използвате следната команда;

 sass - часовник път / sass-директория

Командният ред по-горе ще гледа всеки .SCSS/.дръзки приказки файлове в път / директория и когато един от файловете в тази директория бъде променен, Sass ще актуализира съответните файлове или ще ги създаде, ако няма такива.

Ако се нуждаем от Sass за генериране на файлове в определена директория, можем да го направим по този начин;

 sass - път на пътеката / sass-директория: path / css-directory

Можем също да гледаме определен файл, а не директорията, с този команден ред;

 sass - път на пътеката / sass-директория / styles.css

Ако командата за гледане успее, нещо като това уведомление по-долу ще се появи в терминалния / командния ред.

Допълнителна информация: Автоматично компилиране на Sass файлове с Sass 3

Приложения на Sass

Въпреки това, ако мразите да работите чрез терминал или команден ред, можете да използвате някои приложения за Sass. Безплатната опция е Скаут; той е изграден на Adobe Air, така че може да се изпълнява на всички операционни системи (Windows, OSX и Linux).

Въпреки това, той работи много бавно, както някои вече са докладвали.

Така че, ако нямате търпение за него, има и платени опции. Цената варира за всяко приложение, Compass.app за $ 10, Fire.app, $ 14 и Codekit за $ 25.

Маркиране на код

Въпреки че Sass е предимно CSS разширение, вашият текущ редактор може да не подчертава правилно синтаксиса. За щастие, вече съществуват някои пакети за почти всеки редактор на кодове, които да се включат .дръзки приказки или .SCSS осветяване на код.

Ако работите с Sublime Text 2 като мен, можете да използвате тези пакети; Sublime Text HAML & Sass и Sublime Text 2 Sass Package, и за по-лесен начин можете да инсталирате един от тези пакети чрез контрол на пакети.

За други редактори на кодове вижте по-долу или опитайте в нея да използвате Google.

Това е чудесен урок за скрийнкаст за работа с Sass с Dreamweaver
Режим Sass за Coda. Но изглежда, че този режим е интегриран с Coda от версия 2
TextMate Официален SCSS пакет
Захарта за еспресо за Сас
Пакети InType

Sass Language

Sass и LESS действително споделят някои общи езици, по-долу са няколко от тях.

Променливи

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

Единствената разлика от LESS променливите е, че променливата в Sass е дефинирана с a $ знак.

Правила за гнездене

 header ширина: 980px; височина: 80px; nav ul list-style: няма; пълнеж: няма; марж: няма;  li дисплей: inline; a text-decoration: none;

Mixins и функции

 @mixin радиус на радиус ($ радиус) -moz-border-radius: $ radius; - радиус на радиус: $ радиус; -ms-border-radius: $ радиус; радиус на радиус: $ радиус;

Операции

 li ширина: $ width / 5 - 10px;

Условно изявление

 @if лекота ($ цвят-основа)> = 51% фон-цвят: # 333333;  @else цвят на фона: #ffffff;

В МАЛКО можете да направите подобно нещо чрез Guard израз, което сме разгледали в този урок.

Заключителна мисъл

И това е. В следващия пост ще започнем да изследваме езиците Sass и неговия спътник, Compass. Останете на линия.