Верстаем по-взрослому
Мы уже рассказывали про препроцессоры для CSS — что это такое, зачем нужны и как работают. На всякий случай напомним.
- Существует CSS — это язык, которым описывается внешний вид всего в интернете: кнопок, фонов, текстов, окон, картинок и т. д.
- Когда нужно оформить большой и сложный веб-продукт, нужно очень много CSS-правил. Эти правила неудобно прописывать вручную.
- Существуют препроцессоры CSS — это инструменты, которые позволяют написать несколько глобальных правил оформления, а потом на их основе сгенерировать гору рабочего CSS-кода.
- Благодаря препроцессорам CSS разработчики могут создавать более читаемый исходный код и легче его поддерживать. Например, чтобы перекрасить все кнопки на сайте, можно будет изменить одну переменную, а не триста параметров для трёхсот разных кнопок.
- Ещё с препроцессорами можно автоматизировать CSS через циклы, переменные и прочие атрибуты программирования.
Что делаем
Сегодня мы установим препроцессор Sass и поработаем с ним из командной строки: напишем небольшой код и преобразуем его в привычный CSS-файл.
Преимущество препроцессора в командной строке в том, что в ней всё выполняется плюс-минус одинаково на любом компьютере с любой операционной системой. Но если есть желание, можно установить что-то с графическим интерфейсом:
- CodeKit (Mac)
- Hammer (Mac)
- LiveReload (Mac и Windows)
- Prepros (Mac, Windows и Linux)
- Scout-App (Mac, Windows и Linux) — бесплатная, но интерфейс и управление сильно на любителя.
Установка Sass в Windows
Самый простой способ установить Sass на компьютер под управлением Windows — установить Ruby, а потом с его помощью поставить Sass.
Для этого идём на сайт c установщиками Ruby для Windows и выбираем версию и архитектуру процессора. Так как нам не нужна полноценная разработка, выбираем версию без инструментария разработчика:
Когда файл скачается, запускаем его и соглашаемся со всеми параметрами по умолчанию. В конце установки появится командная строка с настройками — просто нажимаем Энтер, и Ruby сама скачает всё, что ей нужно:
Когда всё завершится, идём в меню «Пуск» и находим там Ruby → Start Command Prompt with Ruby:
Перед нами откроется командная строка Ruby. Устанавливаем Sass командой:
После установки проверяем, что Sass появился и доступен для работы, — используем для этого команду sass -v. Если всё в порядке, мы увидим номер версии Sass:
На этом установка Sass в Windows закончена, можно приступать к работе.
Установка Sass в MacOS
Тут будет немного легче, чем в Windows, потому что на маках Ruby уже установлена заранее. Самый быстрый и практичный способ установить Sass на MacOS — установить менеджер пакетов brew, а с его помощью установить всё остальное.
Для установки brew открываем терминал и пишем такое:
Теперь устанавливаем Sass одной командой:
Различия между Sass и SCSS
Изначально в Sass был только один вариант написания кода — с отступами, как в Python, и без фигурных скобок:
При этом с самого начала нужно выбрать для отступов что-то одно: или табы, или пробелы. Некоторые препроцессоры откажутся переводить код в CSS, если в документе будут табы вместе с пробелами.
Некоторое время спустя появился новый диалект — SCSS. Он больше похож на стандартный CSS, такие же скобки, точки с запятой и правила оформления. Но, кроме внешнего вида, есть отличия от классического Sass — в названиях функций и поведении. Когда встретятся, мы про это расскажем.
Вот тот же код на SCSS:
При переводе в CSS оба препроцессора выдадут один и тот же результат.
В дальнейших проектах мы разберём основные возможности Sass: работу с переменными, циклы, вложенности и привязки. Пока для затравки вот пример организации цикла для красивой анимации:
- Объявляем ключевые фреймы.
- Говорим, что нам нужно будет 20 кадров.
- Перебираем все кадры по очереди и для каждого считаем своё значение процентов.
- Внутри каждого процента рисуем прямоугольник со случайными координатами углов.
Как переводить файлы SCSS и Sass в CSS
Чтобы преобразовать SCSS- и Sass-код в CSS, нужно запустить командную строку Ruby и выполнить такую команду:
Исходный файл — это наш код на SCSS или Sass, а конечный файл — это то, куда мы хотим сохранить результат. Например, если исходный файл лежит в папке «Мои документы» и результат нам нужен в той же папке, то команда может выглядеть так:
sass C:\Users\Mike\Documents\test.scss C:\Users\Mike\Documents\result.css
Ещё есть возможность просто посмотреть на готовый код без конвертации — для этого нужно указать только исходный файл. В этом случае результат появится только на экране:
Что дальше
Теперь у нас есть все ресурсы, чтобы сделать интересный веб-проект, используя стили с препроцессором Sass. Этим и займёмся в следующий раз.