Начало работы с Sass: установка и основы

В этом посте мы собираемся обсудить препроцессор CSS под названием пререкаться или Синтаксически удивительные таблицы стилей.

Если вы читали наши предыдущие посты на LESS, мы уверены, что вы знакомы с препроцессором CSS. Обе пререкаться и МЕНЬШЕ являются препроцессорами CSS, которые в основном расширяют способ составления простого статического CSS более динамичным способом с использованием языков программирования, таких как переменные, миксины и функции.

Установка Sass

Прежде чем мы сможем написать Sass, нам нужно его установить. Sass построен на Рубин, Если вы работаете на Mac, скорее всего, у вас уже установлен Ruby. Если вы можете установить Ruby в Windows, используйте это Ruby Installer,

После завершения установки вы можете перейти в терминал (на Mac) или в командной строке (в Windows), а затем ввести в нем следующую командную строку:

На Mac;

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

На винде;

Gem Install Sass

Если установка прошла успешно, в вашем терминале / командной строке появится следующее уведомление.

Далее нам нужно выбрать каталог для просмотра Sass, используя следующую команду;

sass – путь к часам / sass-каталог

Приведенная выше командная строка будет отслеживать все файлы .scss / .sass в пути / каталоге, и всякий раз, когда один из файлов в этом каталоге изменяется, Sass обновляет соответствующие файлы или создает их, если их нет.

Если нам нужен Sass для генерации файлов в определенном каталоге, мы можем сделать это следующим образом;

sass – смотреть путь / sass-каталог: путь / css-каталог

С помощью этой командной строки мы также можем смотреть конкретный файл, а не каталог;

sass – путь к часам / sass-directory / styles.css

Если команда watch выполнена успешно, в терминале / командной строке появится что-то вроде этого уведомления ниже.

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

Sass Applications
Однако, если вам не нравится работать через терминал или командную строку, вы можете использовать некоторые приложения для Sass. Бесплатный вариант разведчик; он построен на Adobe Air, поэтому его можно запускать на всех ОС (Windows, OSX и Linux).

Тем не менее, он работает очень медленно, так как некоторые ранее сообщали.

Так что если у вас нет терпения для этого, есть также некоторые платные варианты. Цена варьируется для каждого приложения, Compass.app идет за 10 долларов, Fire.app, $ 14 и Codekit за 25 долларов.

Подсветка кода

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

Если вы работаете с Sublime Text 2, как я, вы можете использовать эти пакеты; Возвышенный текст HAML & Sass и Sublime Text 2 Sass Packageи, для более простого способа, вы можете установить один из этих пакетов через управление пакетами.

Для других редакторов кода, смотрите ниже, или попробуйте Googling для этого.

Sass Language

Sass и LESS на самом деле имеют несколько общих языков, ниже приведены некоторые из них.
переменные

$ color-base: # 000;
ширина: 100 пикселей;

Единственное отличие от переменных LESS состоит в том, что переменная в Sass определяется знаком $.
Правила вложенности

header {
ширина: 980 пикселей;
высота: 80 пикселей;
nav {
ul {
стиль списка: нет;
набивка: нет;
поле: нет;
}
li {
дисплей: встроенный;
{
текстовое оформление: нет;
}
}
}
}

Mixins и функции

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

операции

li {
ширина: $ ширина / 5 – 10 пикселей;
}

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

@if lightness ($ color-base)> = 51% {
цвет фона: # 333333;
} @else {
цвет фона: #ffffff;
}

В LESS вы можете сделать подобное через Стражное выражение, о которых мы рассказали в этом уроке.

Последняя мысль

И это все. В следующем посте мы начнем изучать языки Sass и его компаньон Compass. Быть в курсе.