Установка Sass на виртуальный сервер Ubuntu

Ubuntu, VPS | Amber | Комментировать запись

Sass – это CSS-препроцессор, который значительно ускоряет и упрощает процесс создания таблицы стилей по сравнению с использованием обычного CSS. Динамические компоненты Sass позволяют уменьшить код, а также делают его более универсальным. Синтаксис Sass похож на немного улучшенный синтаксис CSS.

Данное руководство продемонстрирует, как установить и запустить Sass на Ubuntu VPS. Для выполнения руководства нужно иметь предварительно настроенный сервер Ubuntu (и веб-сервер, если нужен браузер).

Пожалуйста, обратите внимание, что Sass можно установить и на системы Windows и OS X.

Чтобы получить инструкции по начальной настройке сервера, обратитесь к данной статье.

Установка Sass

Для установки Sass нужно сначала установить Ruby. Кроме того, необходимо установить rubygems (систему управления пакетами Ruby). Для этого используйте команды:

sudo apt-get update
sudo apt-get install ruby-full rubygems

Теперь используйте команду gem, чтобы установить Sass:

sudo gem install sass

Готово! Препроцессор Sass установлен, можно приступать к работе с ним.

Использование Sass

Итак, создайте тестовую таблицу стиля. Перейдите в root каталог веб-сервера (в Apache это /var/www) и создайте в нем файл style.scss:

cd /var/www
nano style.scss

В этот файл внесите правило css:

.box {
padding:20px;
background-color:red;
}

Как видите, это базовый css. Сохраните и закройте файл. Теперь Sass должен перевести этот файл в обычный формат css (с расширением .css):

sass --watch style.scss:style.css

При помощи данной команды Sass сгенерирует файл .css и проверит, нет ли изменений в файле .scss. При внесении изменений в .scss файл .css будет автоматически обновляться.

При первом запуске команды появится ошибка:

[Listen warning]:
Missing dependency 'rb-inotify' (version '~> 0.9')!
Please run the following to satisfy the dependency:
gem install --version '~> 0.9' rb-inotify

Чтобы устранить ее, установив зависимость, запустите команду:

gem install --version '~> 0.9' rb-inotify

При работе с несколькими файлами Sass запустите команду –watch, чтобы скомпилировать целую папку файлов .scss:

sass --watch stylesheets/sass:stylesheets/css

Данная команда скажет Sass отслеживать все файлы .scss в папке stylesheets/sass, автоматически компилировать их и превращать их в эквиваленты в папке stylesheets/cs. После запуска этой команды Sass будет оставаться в дежурном режиме (watch mode) до тех пор, пока он не будет отключен.

Чтобы отключить дежурный режим, нажмите Ctrl+C. После этого все изменения файлов .scss перестанут автоматически передаваться в файлы .css до следующего запуска команды –watch.

Итак, все довольно просто: нужно только внести правила css в один файл, и его содержимое будет скопировано в другой файл. Но это еще далеко не все функции Sass.

Вложения (Nesting)

Использование вложений – это отличный способ сэкономить время на постоянном переписывании одного и того же селектора. К примеру, на данный момент есть три селектора, которые начинаются одинаково: .box ul, .box li и .box li a. Как правило, для таких селекторов нужно создавать три отдельных правила:

.box ul {
...
}
.box li {
...
}
.box li a {
...
}

Но Sass позволяет их вложить:

.box {
padding:20px;
background-color:red;
ul {
margin:10px;
}
li {
float:left;
a {
color:#eee;
}
}
}

Как видите, это устраняет необходимость трижды прописывать часть .box в селекторе. Кроме того, такой код выглядит просто и понятно. Теперь команда –watch автоматически создаст три эквивалента блоков .css:

.box {
padding: 20px;
background-color: red;
}
.box ul {
margin: 10px;
}
.box li {
float: left;
}
.box li a {
color: #eee;
}

Кроме того, таким же образом можно вкладывать свойства. К примеру, можно написать что-то вроде:

.box {
padding: {
top:20px;
right:10px;
bottom:15px;
left:10px;
}
}

Это сэкономит время, поскольку теперь не придется четыре раза писать padding.

Переменные

Еще одна удобная функция Sass, которая способна сэкономить время разработки – это переменные. Подобно языкам программирования вроде PHP или Java, Sass позволяет задавать переменные один раз и использовать их в коде в случае необходимости. Например, можно написать что-то вроде:

$color: #eee;
a {
color: $color;
}

Тогда Sass заменит все значения переменной $color по всему файлу только что установленным кодом цвета #eee.

Миксины (примешивания; mixins)

Это, пожалуй, самая мощная функция Sass. Миксины ведут себя в основном как функции. При помощи миксинов можно использовать целые объявления стиля и даже передавать их аргументы. Подобно функции, миксин сначала нужно объявить. Для примера объявите два разных миксина:

@mixin box-size {
width:200px;
height:200px;
padding:10px;
margin:0px;
}
@mixin border($width) {
border: $width solid #eee;
}

Как видите, в первом миксине нет аргументов. Это можно использовать следующим образом:

.box {
@include box-size;
}

В результате получится следующий css:

.box {
width:200px;
height:200px;
padding:10px;
margin:0px;
}

Можно задать второму миксину аргументы:

.box2 {
@include border(1px);
}

При этом будет использоваться правило, определенное в миксине, которое передаст ему аргумент size, что сделает его еще более гибким. Получится следующий css:

.box2 {
border: 1px solid #eee;
}

Это только основные возможности Sass; охватить все функции данного препроцессора в рамках одной статьи, к сожалению, невозможно. Чтобы получить более подробную информацию, обратитесь к веб-сайту Sass.

Форматы вывода Sass

При запуске команды –watch Sass выводит получившиеся данные CSS в файл .css стандартным путем (nested). В целом, существует 4 типа вывода Sass:

• Nested (вложенный): отображает структуру стилей CSS и документа HTML.
• Expanded (расширенный): добавляет строки со свойствами и правилами.
• Compact (компактный): каждое правило CSS со всеми свойствами занимает только одну строку.
• Compressed (сжатый): без пробелов (за исключением необходимых пробелов для отделения селекторов и новой строки в конце файла).

Больше об этих форматах вывода можно прочесть по данной ссылке.

Самый простой способ изменения формата вывода – это команда –watch, запущенная с соответствующим флагом в конце. К примеру, чтобы использовать формат expanded:

sass --watch style.scss:style.css --style=expanded

Итоги

Sass – очень мощный препроцессор; научившись использовать его продуктивно, можно тратить намного меньше времени и сил на фронт-энд. Он дополняет синтаксис CSS, делает его более гибким, а также позволяет повысить производительность работы.