Главная > CSS/Style Sheets > Введение в Sass: установка и основы

Введение в Sass: установка и основы


3 декабря 2012, 11:15. Разместил: Design FactoRy
Сегодня мы хотим рассказать вам о CSS-препроцессоре под названием Sass или Syntactically Awesome Stylesheets.

Введение в Sass: установка и основы

Если вы читали наши статьи о LESS, то уже наверняка знакомы с CSS-препроцессорами. Как Sass, так и LESS представляют собой CSS-препроцессоры, которые, прежде всего, преобразуют способ, в котором мы компилируем простой статичный CSS-код, в более динамичный способ применения языка программирования, включая перемеренные, миксины и функции.

Установка Sass

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

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

На Mac:

sudo gem install sass

На Windows:

gem install sass

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

Введение в Sass: установка и основы

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

sass --watch path/sass-directory

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

Если нам нужно, чтобы Sass генерировал файлы в определенной директории, то нужно сделать следующее:

sass --watch path/sass-directory:path/css-directory

Мы также можем отслеживать отдельный файл, вместо директории. Для этого мы используем следующую строку:

sass --watch path/sass-directory/styles.css

Если команда пройдет успешно, то вы увидите оповещение вроде следующего:

Введение в Sass: установка и основы

Sass-приложения

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

Правда, работает оно очень медленно, судя по отзывам.

Введение в Sass: установка и основы

Если у вас не хватит терпения, есть также и платные варианты. Цены варьируются от приложения к приложению: Compass.app стоит $10, Fire.app $14, а Codekit – $25.

Выделение кода

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

Введение в Sass: установка и основы

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

Для других редакторов мы предлагаем вам ознакомиться с подборкой ниже:

* Отличный скринкаст о том, как работать с Sass в Dreamweaver
* Режим Sass для Coda. Но нам кажется, что этот режим был интегрирован с Coda второй версии
* Официальное дополнение SCSS для TextMate
* Espresso Sugar для Sass
* Дополнения для InType

Язык Sass

Sass и LESS, на самом деле, разделяют много общего:

Переменные

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

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

Вложенные правила

header {
width: 980px;
height: 80px;
nav {
ul {
list-style: none;
padding: none;
margin: none;
}
li {
display: inline;
a {
text-decoration: none;
}
}
}
}

Миксины и функции

@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

Операции

li {
width: $width/5 - 10px;
}

Условные положения

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

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

В завершение

И на этом все! В следующих статьях мы хотим рассказать вам о Sass-языке и его коллеге, Compass. Следите за обновлениями!
Вернуться назад