Початок роботи з інсталяцією Sass та Основами

У цій посаді ми обговоримо попередній CSS, який називається Sass або Синтаксично стильні таблиці.

Якщо ви дотримувалися наших попередніх постів на LESS, ми впевнені, що ви знайомі з Препроцесор CSS. Обидва Sass і LESS є попередніми процесорами CSS, які в першу чергу розширюють спосіб, у який ми створюємо просто-статичний CSS більш динамічним способом, використовуючи мови програмування, такі як змінні, міксини та функції.

Установка Sass

Перш ніж ми зможемо створити Sass, нам потрібно його встановити. Sass побудований на Ruby. Якщо ви працюєте на Mac, можливо, у вас вже встановлено Ruby. Якщо ви можете встановити Ruby у Windows, скористайтеся цим інсталятором Ruby.

Після завершення інсталяції можна перейти до терміналу (на комп'ютері Macintosh) або в командному рядку (у Windows), після чого ввести в нього командний рядок:

На Mac;

 sudo gem встановити sass

У Windows;

 gem встановити sass

Якщо інсталяція завершиться успішно, у вашому терміналі / командному рядку з'явиться таке повідомлення.

Далі, ми повинні вибрати, який каталог для Sass дивитися за допомогою наступної команди;

 sass - шлях для перегляду / sass-каталог

Командний рядок вище буде переглядати кожен .scss/.sass файлів у path / каталог і всякий раз, коли один з файлів в цьому каталозі змінюється, Sass буде оновлювати відповідні файли або створювати його, якщо їх не існує.

Якщо нам потрібен Sass для створення файлів у певному каталозі, ми можемо зробити це таким чином;

 sass - шлях стеження / sass-каталог: шлях / css-каталог

Ми також можемо дивитися певний файл, а не каталог, за допомогою цього командного рядка;

 sass - шлях для перегляду / sass-directory / styles.css

Якщо команда перегляду завершиться успішно, у вашому терміналі / командному рядку з'явиться щось на зразок цього сповіщення нижче.

Подальше читання: Автоматична компіляція файлів Sass з Sass 3

Програми Sass

Однак, якщо ви ненавидите працювати через термінал або командний рядок, ви можете використовувати деякі програми для Sass. Безкоштовний варіант - Scout; вона побудована на Adobe Air, тому її можна запускати на всіх ОС (Windows, OSX і Linux).

Тим не менш, він працює дуже повільно, як деякі раніше повідомляли.

Так що якщо у вас немає терпіння до нього, є й деякі платні варіанти. Ціна змінюється для кожної програми, Compass.app коштує $ 10, Fire.app, $ 14 і Codekit за $ 25.

Підсвічування коду

Хоча Sass - це, перш за все, розширення CSS, ваш поточний редактор може не виділити синтаксис належним чином. На щастя, вже існують деякі пакети для майже будь-якого редактора коду для включення .sass або .scss підсвічування коду.

Якщо ви працюєте з Sublime Text 2, як я, ви можете використовувати ці пакети; Пакунок Sublime Text HAML & Sass і Sublime Text 2 Sass, а для більш легкого способу, ви можете встановити один з цих пакетів за допомогою пакета керування пакетами.

Для інших редакторів коду див. Нижче або спробуйте користуватися Google.

Це один з великих підручників скринкаста про роботу над Sass з Dreamweaver
Режим Sass для Coda. Але, здається, цей режим був інтегрований з Coda з версії 2
TextMate Офіційний пакет SCSS
Цукор-еспресо для Sass
Пакети InType

Sass Language

Sass та LESS фактично поділяють деякі спільні мови, нижче наведено деякі з них.

Змінні

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

Єдина відмінність від змінних LESS полягає в тому, що змінна в Sass визначається a $ знак.

Правила вкладання

 header ширина: 980px; висота: 80px; nav ul-list: немає; прокладка: немає; маржа: немає;  li відображення: inline; a text-decoration: none;

Mixins і функції

 @mixin кордон-радіус ($ радиус) -moz-border-radius: $ radius; -вібкіт-кордон-радіус: $ радіус; -ms-border-radius: $ радиус; радіус кордону: $ радіус;

Операції

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

Умовний виклад

 @if lightness ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

У LESS ви можете зробити подібну річ через експресію Guard, про яку ми розповідали в цьому підручнику.

Заключна думка

І це все. У наступному пості ми почнемо вивчати мови Sass та його компаньона Compass. Залишайтеся з нами.