Для меня, как новичка в изучении фреймворков данная тема интересна.

В этой статье приводится краткое сравнение двух популярных продуктов - Boilerplate и Bootstrap. Далее - вольный перевод статьи, написанной автором Ivaylo Gerchev для известного среди веб-дизайнеров сайта SitePoint.com.

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

Boilerplate и Bootstrap - оба являются очень полезными инструментами для создания проектов. Но вопрос заключается в том: какой из них выбрать и какой лучше подойдет для меня и моего проекта? Вы не первый, кто задается таким вопросом (если вообще задаетесь). Именно для цели прояснить ситуацию и принять правильное решение и была написана данная статья.

Самый очевидный вопрос из всех - какой продукт лучше всего использовать? Ответ на него является слишком общим и расплывчатым, поэтому нам потребуется более детальное сравнение и объяснение каждого из них. В действительности, решений на данный вопрос не два, а четыре: можно использовать Boilerplate, можно использовать Bootstrap, можно использовать оба этих продукта совместно или не использовать никакой из них. Для того, чтобы решить, какой этих пунктов является лучшим, позвольте мне погрузиться в детали и рассказать о преимуществах и недостатках каждого из двух претендентов.

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

Boilerplate является шаблоном для быстрого старта при разработке fron-end’а, который содержит в себе наилучшие готовые образцы, взятые из практики веб-разработки. Данный шаблон предлагает готовую общую структуру папок и файлов будущего проекта, готовый HTML5-шаблон и основные конфигурации для взаимодействия с сервером. Он похож на план постройки для вашего дома, но у него отсутствуют строительные блоки. Другими словами, у вас есть общее представление, как построить дом и вы сделали все необходимые предварительные шаги для его постройки, но у вас нет под рукой необходимых строительных материалов, чтобы приступить к строительству. Но вы вольны добавить в Boilerplate любые “отсутствующие” HTML/CSS/Javascript-компоненты из любого места, включая и Bootstrap.

На первый взгляд Boilerplate может показаться достаточно простым шаблоном. Но на самом деле он готов предоставить вам множество преимуществ, которые не заметны изначально. Давайте рассмотрим некоторые из них:

• Готовый HTML5-шаблон совместно с базовой структурой файлов и папок под будущий проект;
• Готовые к использованию, оптимизированные стили печати;
• Кросс-браузерная совместимость;
• Оптимизация под мобильные браузеры;
• Прогрессивное улучшение (progressive enhancement) и постепенная деградация (graceful degradation);
• Улучшенная конфигурация взаимодействия с сервером;
• Правила для сжатия и оптимального кеширования;
• Оптимизированный под Google Analytics сниппет сайта;
• и многое другое …

Вы получаете все эти прекрасные вещи сразу, не написав ни единой строчки кода. Ниже представлено содержимое распакованного архива Boilerplate:

• 1

  css

  - директория, в которой содержатся файлы

  1	normalize.css

  ,

  1

  main.css

  с настройками Boilerplate по умолчанию, основные helpers, медиа-запросы и стили печати;

• 1

  doc

  - директория с документацией по Boilerplate. Вы можете использовать эту директорию, чтобы хранить в ней документацию по своему собственному проекту;

• 1

  img

  - пустая директория под изображения вашего будущего проекта;

• 1

  js

  - директория, содержащая файл main.js для вашего собственного кода и файл

  1

  plugin.js

  , содержащий код под плагины. Также здесь располагаются библиотеки Modernizr и jQuery, каждая в своей отдельной папке;
• Настройки по умолчанию для сервера Apache. Для остальных серверов существует репозиторий настроек Server Configs;

• 1

  404.html

  - очень обобщенный шаблон страницы ошибки 404;

• 1	apple touch icons

  - набор готовых иконок для Apple TouchScreen;

• 1	crossdomain.xml

  - шаблон для работы с кросс-доменными запросами

• 1	favicon.ico

  - файл фавикона;

• 1	humans.txt

  - файл со списков разработчиков проекта (вашего проекта);

• 1	index.html

  - готовый HTML5-шаблон, основа для всех страниц вашего проекта;

• 1	robots.txt

  - файл для включения в список всех страниц, которые вы хотите исключить поиска.

С этого момента вы можете приступать к созданию своего собственного сайта, просто добавляя код и компоненты, которые необходимо использовать.

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

Bootstrap является фреймворком для front-end разработки и набором инструментов веб-дизайнера для создания современных web-сайтов. С помощью фреймворка Bootstrap вы можете создать полностью функциональный web-сайт с нуля. То есть, он предоставляет вам не только стартовую точку, но и все строительные материалы, которые могут потребоваться при создании сайта. Скачиваемый архив Bootstrap содержит в себе только файлы для CSS и JS компонентов, плюс набор шрифтовых иконок. В дополнение к этому, вы можете скачать основной шаблон для начала создания сайта. Структуры файлов и папок для будущего проекта или конфигураций для взаимодействия с серверной частью сайта - не существует.

Преимущества и основные характеристики:

• Ориентированность в первую очередь на мобильные устройства;
• Кросс-браузерная совместимость;
• Легкость использования;
• Система CSS-сетки;
• Готовые к использованию компоненты и утилиты;
• и многое другое …

Список компонентов и утилит фреймворка Bootstrap представлен ниже:

• 1

  Grid

  - утилита для создания разметки дизайна сайта;

• 1

  Icons

  - набор иконок, отсортированных по размерам;

• 1	CSS classes

  - набор основных классов стилей для разработки сайта;

• 1	CSS components

  - стилизованные HTML-компоненты;

• 1	JS widgets

  - замечательный набор интерактивных компонентов на Javascript;
• Шаблоны и примеры для начала работы.

Как видите, фреймворк Bootstrap предоставляет полный набор компонентов, с помощью которых вы можете начать создание собственного сайта.

Использование Boilerplate плюс Bootstrap

Как насчет совместного использования обоих продуктов? Нет проблем! Это легко настроить с помощью проекта Initializr, который автоматически интегрирует Boilerplate и Bootstrap друг с другом. Используя Initializr, можно создать настраиваемый архив, содержащий в себе все “вкусности” обоих пакетов. Вы можете воспользоваться данным ресурсом, если вам для работы необходимы лучшие части обоих миров.

Использование вашего собственного решения на базе Boilerplate

Некоторые разработчики не любят пользоваться таким продуктами, как Boilerplate или Bootstrap. Их самым главным аргументом в этом вопросе является тот факт, что подобные инструменты содержат в себе слишком много неиспользуемого в проекте кода (грубо говоря - в Bootstrap имеется 100 CSS-классов, но в текущем проекте используется только 20 из них. Остальные получаются бесплезным балластом, который только нагружает каналы связи с сервером и сам браузер). Если вы думаете точно также, то вы должны знать, что вы не ограничены рамками чьих-то сторонних разработок. Вы можете легко собрать для себя лучшие разработки в один собственный фреймворк. Такой способ поможет создать вам коллекцию только тех компонентов, которые вам необходимы.

Вердикт

Правильный выбор между этими продуктами зависит от двух вещей. Первое - вы должны знать, что вам необходимо для создания проекта и какие требования предъявляет сам проект. И второе - вы должны знать, что может предложить вам каждый из этих программных продуктов (Boilerplate & Bootstrap), их достоинства и недостатки. Понятно, что с первым вопросом я не смогу помочь вам, а вот по второму вопросу могу дать краткий совет, состоящий из нескольких пунктов:

• с помощью Boilerplate вы не сможете создать цельный сайт - это только отправная точка;
• с помощью Bootstrap можно создать с нуля полный сайт благодаря компонентам и утилитам этого фреймворка;
• Boilerplate является серверно-ориентированным продуктом - хороший шаблон для старта проекта, если вы работаете с серверными технологиями, как например PHP;
• Bootstrap - клиент-ориентированный продукт, это полный набор инструментов для создания сайтов (front-end разработка);
• Boilerplate - это набор основного кода, в который вы можете добавить любой компонент, который необходим;
• Bootstrap - наоборот, это полный набор готовых к использованию компонентов, которые вы можете использовать “из коробки”;
• Вы можете объединить вместе Boilerplate и Bootstrap, чтобы получить преимущества обоих продуктов;
• Вы можете создать и использовать свой собственный настроенный шаблон, включающий только те компоненты, которые вам необходимы.

Моим заключительным словом будет следующее. Оба продукта - и Boilerplate и Bootstrap являются прекрасными инструментами, которые вы можете использовать для своей работы. Все зависит о того, какие задачи перед вами стоят - тот инструмент вам и требуется выбрать для решения задачи.

На этом перевод закончен, ибо закончена сама статья …

Приступаем к изучению Compass. А что такое?

Говоря официальным языком - это фреймворк для SASS. Если неофициальным - то библиотека (коллекция) готовых

1

mixin

Но вернемся к Compass - ведь это практически неотъемлемая часть SASS. И логично было бы продолжить изучение последнего, перейдя к Compass. Этот фреймворк, также как и сам SASS, является приложением, написанном на Ruby. Установка Compass производится точно также, как и SASS - с помощью менеджера пакетов gem.

Запускаем терминал Windows сочетанием клавиш Win+R и вводим в нем команду:

gem install compass

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

Введем в терминале команду справки по этому фреймворку, чтобы получить полный список доступных команд (обратите внимание, что у ключей команды

1

compass

compass help

Самые нужные команды из этого списка:

• 1

  watch

  - мониторинг scss-файлов (аналог этой команды в sass)

• 1

  create

  - создать новый compass-проект

• 1

  init

  - создать новый compass-проект из существующего css-проекта

Давайте создадим новый проект. Перейдем через терминал в заранее подготовленную для этой цели директорию и запустим там команду:

compass create

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

Видим, что появились папки

1

stylesheets

1

sass

1

config.rb

1

compass

В папке

1

sass

1

stylesheets

1

config.rb

Переменная

1

css_dir

1

stylesheets

1

sass_dir

1

images_dir

1

javascript_dir

Значения всех этих переменных можно изменить на свой вкус - кто как привык. Например,

1

images

1

img

1

javascript

1

js

1

stylesheets

1

styles

Давайте откроем файл

1

screen.scss

Эта строка подключает в проект фреймворк Compass и один из его модулей - файл сброса CSS-стилей

1

reset

1

reset

Теперь нам стоит отвлечься от терминала и перейти в браузер. Вводим в адресной строке http://compass-style.org/, чтобы попасть на домашнюю страницу проекта.

Все оставшееся время мы будем проводить там за увлекательным чтением документации. Переходим по ссылке reusable patterns, где размещены сами модули Compass. По своему функционалу они разбиты на три большие группы: “CSS3”, “Typography”, “Utilities”. К примеру, перейдем в раздел “CSS3”. Чтобы воспользоваться миксинами модуля “CSS3”, необходимо подключить этот модуль.

Делается это так:

Ниже представлен список ссылок с миксинами, отсортированными по их функционалу. К примеру, “Border Radius” - это

1

mixin

Удобство использования фреймворка Compass и его миксинов я расписывать не буду - это и так ясно. И что касается применения каждого из миксинов в отдельности - также. На сайте они описаны подробно и с примерами. Пересказ всех их является пустой задачей. Просто учите английский, кто не знает.

На этом все.

Наконец-то у меня дошли руки и пришло время разобраться с палитрой “Символ” в Photoshop.

До сегодняшнего дня о ней знал не полностью. Конечно, с такими полями, как “Шрифт”, “Размер шрифта”, “Цвет шрифта”, “Межстрочное расстояние” я был знаком. Но вот столкнулся в одном из psd-макетов с неизвестным мне полем.

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

1

letter-spacing

Еще более загадочным для меня было значение этого поля:

1

-25

Ответы на эти вопросы в русскоязычной части Интернета я не нашел. Не спорю, может и плохо искал. Но обнаружил их в англоязычной части. Вольный пересказ одной замечательной статьи, посвященной этому вопросу, я привожу в данном небольшом обзоре.

Итак, есть psd-макет, на котором для шрифтов применено загадочное значение

1

-25

Смотрим внимательно на панельку “Символ”. Здесь собраны воедино все свойства, отвечающие за прорисовку шрифта на макете.

Верхние два поля - “Georgia” и “Regular”. Здесь все просто и понятно - семейство шрифта и его начертание. В CSS данные значения оформляются через правила

1

font-family

1

font-weight

Второй ряд из двух полей, со значениями

1

22px

1

24px

1

22px

1

24px

1

font-size

1

line-height

Перехожу к третьему ряду. Первое поле в нем - насколько я могу судить - предназначено для единиц измерения, в которых будет производиться изменение межбуквенного расстояния. Второе поле, как вы уже могли догадаться, это межбуквенное расстояние.

В CSS имеется аналогичное правило, которое называется

1

letter-spacing

1

word-spacing

1

Word-spacing

1

letter-spacing

Вернемся к нашим баранам. Видно, что в поле стоит значение

1

-25

В четвертом ряду располагаются два поля, назначение которых в оригинале пишется так: “Vertical scalar tool” и “Horizontal scalar tool”. Можно догадаться, что с помощью этих настроек можно масштабировать (растягивать или сжимать) буквы как по-вертикали, так и по-горизонтали.

В последнем (пятом) ряду находится поле изменения расстояния для индексов, и поле цвета шрифта (букв).

Вот, в принципе, и все описание. Краткое - но к чему растягивать его? Полное описание с картинками, полезное для себя, нашел в этой статье.

Перейду к вопросу, который остался открыт - как преобразовать значение

1

letter-spacing

Что за единицы измерения использует Photoshop в данном случае, честно сказать, не знаю. Какие-то загадочные, свои собственные, наверное. Но это и не интересно, если что. Нужно лишь перевести их в одну из двух наиболее популярных единиц измерения CSS -

1

px

1

em

Перевод осуществляется с помощью формул. Эти формулы были выведены опытным путем автором статьи - Justin Marsan. На своей собственной практике я пару раз проверил их и пришел к выводу, что они верны.

Формула перевода значения

1

letter-spacing

1

em

X / 1000

где

1

X

1

letter-spacing

-25 / 1000 = -0.025em

Формула перевода значения

1

letter-spacing

1

px

X * Y / 1000

где

1

X

1

letter-spacing

1

Y

В конкретном случае формула и результат будет следующим:

-25 * 22 / 1000 = -0.55px

На этом, думаю, что все сказано.

В предыдущей части данного обзора - “SASS в картинках - Часть 1” мы посвятили все время установке, настройке и примерам мониторинга “сладкой” парочки Ruby/SASS.

Разобрались, как установить под Windows платформу Ruby и ее приложение SASS, в чем отличия между старой и новой версией синтаксиса SASS. Как запустить SASS для мониторинга редактируемых файлов или директорий.

В этой статье мы приступим к самому интересному - разбору вкусностей SASS. Что он может, как он это делает. И каким образом мы можем облегчить себе жизнь с помощью него. И начнем с самого простого, постепенно переходя к более сложному.

Переменные (Variables)

SASS “вводит” в состав CSS переменные, которых изначально в нем нет. Тем самым, язык стилевых правил постепенно превращается в более-менее полноценный язык программирования. Как и в обычном языке программирования, сначала объявляется переменная (с помощью спецсимвола

1

$

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

Например, на рисунке ниже переменной

1

$color

Вложенность (Nesting)

Тут все просто - как вы обычно пишите правила CSS?

Наверное, так:

h1 {
  font-size: 12px;
  color: #ccc;
}

h1 a {
  text-decoration: none;
  color: #ddd;
}

То есть, пишем, что заголовку первого уровня присвоить свойства - кегль и цвет шрифта. Ссылке, вложенной в этот заголовок, присваиваем свойства - убираем подчеркивание и задаем свой цвет.

Теперь напишем этот же код на SASS (SCSS):

h1 {
  font-size: 12px;
  color: #ccc;

  a {
    text-decoration: none;
    color: #ddd;
  }
}

Вот в чем “фокус” - на SASS (SCSS) мы пишем код так, как видим. Смотрим HTML-код - ссылка вложена в тег

1

h1

1

h1

1

a

1

a

1

h1

В SASS вложенность (

1

nesting

Вложенность свойств - это почти тоже самое, что и первый случай. Разница лишь в том, что применяется она к CSS-свойствам, а не селекторам. Ее удобно использовать для сложносоставных свойств, таких как

1

font

Например, на CSS мы бы написали так:

h1{
  font-size: 30px;
  font-style: italic;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #ccc;
  padding-left: 10px;
}

На SASS (SCSS) этот же код мы напишем так:

h1{

  font: {
    size: 30px;
    style: italic;
    weight: bold;
    family: Arial, sans-serif;
  }

  color: #ccc;
  padding-left: 10px;
}

Наследование

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

Наследование в SASS (SCSS) выполняется с помощью директивы

1

@extend

h1{
  font: {
    size: 30px;
    style: italic;
    weight: bold;
    family: Arial, sans-serif;
  }

  color: #ccc;
  padding-left: 10px;
}

h2{
  @extend h1;
  color: #aaa;
}

Parent

Не знаю, как переводиться данная фича в SASS, но в примере кода она очень понятна - может, и нет смысла искать ее перевод? Если кто изучал Javascript & jQuery, то знает о таком символе -

1

&

Давайте посмотрим код, и все сразу станет ясно:

Видим, что в коде для ссылки прописаны свойства. И в этом же правиле прописано правило для

1

hover

1

a

1

a:hover

1

a

1

&:hover

1

:hover

Функции SASS

Когда мы рассматривали переменные, то упомянули об арифметических операциях над значением переменных. Иногда это удобно, а иногда нет. В SASS имеется достаточно большой набор функций, предназначенных для самых разнообразных задач. Ознакомиться с их полным перечнем можно по адресу sass-lang.com/docs/yardoc/Sass/Script/Functions.html:

К примеру, у нас в коде имеется правило задания цвета для ссылки. А также есть правило, по которому ссылка изменяет цвет по наведению на нее курсора мыши.

На SASS (SCSS) такой код можно написать так:

a{
  color: #ddd;
}

a:hover{
  color: darken(#ddd, 30%);
}

То есть, берем функцию

1

darken()

Ну просто очень удобно и быстро!

Подмешивания (Mixin)

Подмешивания в SASS полностью отвечают своему названию, по принципу применения. Но, в тоже время, по принципу своей работы это самые настоящие функции. То есть, SASS еще больше расширяет возможности CSS и превращает его из описательного языка в язык программирования.

Если сказать простым языком, то

1

mixin

1

mixin

1

@mixin

После объявления

1

mixin

1

@include

Достаточно прописать всего одну строчку - “вставить такой кусок кода здесь”:

Интерполяция (Interpolation)

Под таким непонятным первоначально словом подразумевается подстановка значения переменной в название CSS-свойства. Благодаря этому можно легко изменять само свойство в функции.

Например, таким образом:

(На картинке закралась ошибка. Конечно же, переменной

1

$top

1

border

1

$vert

Подмешивания (

1

mixin

) с аргументами

Ранее мы познакомились с функциями без аргументов (

1

mixin

1

mixin

Например, рассмотрим такой рисунок:

Видим, что в начале кода объявлена функция (

1

mixin

1

corners

1

$vert

1

$hor

1

$radius

1

$vert

1

$hor

1

$radius

1

border

В результате можно очень легко и быстро изменять вид и значение CSS-свойства:

1

border-top-left: 8px

1

border-bottom-left: 8px

1

border-top-right: 8px

1

border-top-right: 8px

Далее в коде подключается (вызывается) функция

1

corners

1

@include

@include corners(top,left,15px);
@include corners(bottom,right,35px);

В результате обработки этих аргументов функцией corners получиться следующий CSS-код:

border-top-left: 15px;
border-bottom-right: 35px;

Фантастика! Ну что же, на этом можно закончить обзор того, что умеет SASS (SCSS). Я думаю, что вы по достоинству оценили все преимущества данного языка и сразу же кинулись применять его на практике.

Вроде ничего не забыл ))

Следующий виток саморазвития верстальщика - начинаем изучение препроцессора SASS.

Вы спросите - а зачем он нужен и что это за “зверь” такой? Ведь в багаже знаний верстальщика и так полно вещей, которые он должен знать. Это и HTML&CSS, и Javascript с jQuery, и основы PHP с системами управления контентом (CMS) WordPress, Joomla, Drupal. Помимо этого - знание основ Photoshop (не сможете нарезать psd-макет). И еще куча всего по мелочи. Так зачем усложнять себе жизнь еще чем-то?

И будете неправы. В данном случае - это не усложнение, а облегчение “тяжелой” жизни верстальщика. Достаточно потратить пару дней на изучение SASS, чтобы потом верстать страницы быстрее и семантически более правильно. Ну хорошо, скажете вы - уговорил. Так что же это за такая прекрасная вещь, SASS?

SASS - это надстройка над CSS, написанная на языке программирования Ruby (есть такой). Правильно такая надстройка называется препроцессором. SASS добавляет в CSS такие вещи, как переменные, функции и многое другое. Тем самым, описательный язык CSS превращается в более-менее полноценный язык программирования. Часто ли вы при написании CSS-кода повторяете один и тот же код?

Я думаю, ответ однозначен - конечно часто! И тут на помощь может прийти функции - достаточно один раз прописать ее в начале документа, а затем только подключать в нужных местах. Или, к примеру, вы прописали цвет для ссылок, но заказчику он не понравился - это нужно выискивать все подобные ссылки в коде и менять их. Но можно прописать одну переменную, и присваивать ее значение там, где это необходимо.

Существует аналог SASS по имени LESS. Отличие в том, что LESS моложе, проще и не имеет такой мощной библиотеки-фреймворка Compass, какую имеет SASS.

Стоит также сказать, что существую две версии SASS - собственно SASS и SCSS. Первый - это старая версия синтаксиса, которая только отдаленно напоминает CSS. В нем построение кода выполняется с помощью табуляции размером в два пробела.

При этом отсутствуют точки запятой и фигурные скобки. На сегодняшний день такой синтаксис (и эта версия - соответственно) уже не используются.

Пример такого кода показан ниже:

table.hl
  margin: 2em 0
  td.ln
    text-align: right

Более новая версия - SCSS (SASS-подобный CSS) имеет синтаксис почти такой же, как и у CSS. Поэтому особо рассказывать тут нечего, лучше посмотреть на пример кода:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Прежде чем начинать изучение SASS, его необходимо установить. В этой статье все время будет посвящено установке и настройке последнего. А во второй части уже будет самое интересное - показ и рассказ того, что может и что умеет SASS.

Установка SASS разделена на два этапа. Первый - необходимо установить поддержку языка Ruby в операционной системе, так как SASS - это всего лишь одно из многих приложений, написанное на этом языке. Больше всего в этом плане повезло пользователям MacOS X - там поддержка Ruby предустановлена по-умолчанию. Для пользователей Linux OS нужно только немного напрячься - установить эту поддержку с помощью менеджера пакетов. Например, для систем Debian* эта команда будет выглядеть так:

apt-get install ruby

Пользователи же Windows как всегда “впереди планеты всей”. Придется находить и скачивать вручную пакет-инсталлятор Ruby. Для этого переходим по адресу rubyinstaller.org/downloads/, выбираем из списка самую свежую версию пакета (на момент написания это Ruby 2.0.0-p247) и скачиваем ее:

Потом запускаем программу на установку. Инсталлятор Ruby имеет стандартный вид и опции, кроме одной, на которую нужно обратить внимание:

Необходимо поставить галочки так, как это показано на рисунке, иначе Ruby и его приложение SASS не запустятся в терминале. Стоит сразу оговориться, что ни сам Ruby, ни программа SASS не имеют графического интерфейса. Управление обоими программными продуктами осуществляется через командную строку.

Что касается трех галочек в окне инсталлятора, то тут все просто. Первая галочка устанавливает поддержку языка Tcl\Tk, вторая галочка добавляет путь к исполняемому файлу Ruby в окружение командной оболочки, третья галочка устанавливает привязку файлов с расширением

1

.rb

1

.rdw

После того, как установлен Ruby, настало время SASS. Здесь ситуация проще, так как Ruby имеет свой собственный менеджер пакетов a-la системы Linux OS. Менеджер пакетов имеет название

1

gem

Если все прошло успешно, то вывод в терминале должен быть таким:

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

sass --help

Должен появиться список всех команд программы SASS. Это подтверждает факт, что установка прошла успешно. Теперь немного отвлечемся от темы и углубимся в сторону HTML. Как хорошо известно, подключение таблиц со стилями в HTML-странице производится по следующему типу:

Браузеры понимают только файлы с расширением .css и кодом, созданным в синтаксисе CSS. Однако, мы уже выяснили, что SASS имеет свой собственный синтаксис и файлы создает с расширением .scss. Как быть в такой ситуации? Все очень просто - программа SASS может конвертировать свои собственные файлы в файлы формата CSS, а также сохранять их с расширением .css. Поэтому то, что создается в SASS можно считать промежуточным результатом.

Приложение SASS умеет выполнять мониторинг редактируемого sass-файла в автоматическом режиме, для этого достаточно указать ей входной (input) и выходной (output) файлы. К примеру, такая команда может выглядеть следующим образом:

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

sass --watch input_directory:output_directory

Из рисунка видно, что программа в автоматическом режиме производит анализ всех изменений в sass-файле и записывает их в выходной css-файл. При этом фиксируются все изменения, в том числе и ошибки:

При этом, если взглянуть на содержимое директории, к которой расположен проект, то увидим, что там, помимо sass-файла, располагается и css-файл (результат работы):

Кроме того, из подсказки командной строки видно, что процесс мониторинга можно прервать в любой момент, нажав сочетание клавиш Ctrl+C. Программа настроена с умом и случайно (по ошибке) остановить ее не получиться - она попросит подтверждения выбранного действия путем ввода буковки

1

Y

Помимо конвертации sass-файлов с css-файлы, в SASS имеется встроенная возможность обратного процесса. Осуществляется она с помощью утилиты

1

sass-convert

sass-convert --from css --to sass -R .

Такая команда рекурсивно (ключ

1

-R

В принципе, все что нужно сказать об установке Ruby/SASS, о том как прекрасен и хорошо SASS - уже сказано. В следующей статье будет рассмотрено на примерах, на что же действительно способен SASS.

На этом все.