Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

От автора: в этой главе мы пошагово рассмотрим, как проходит установка Sass, файлы которого выполняются с помощью Ruby.

Системные требования Sass

ОС – кроссплатформенный

Поддержка в браузерах – IE 8+, Firefox, Google Chrome, Safari, Opera

Язык программирования – Ruby

Установка Ruby

Шаг 1 – Откройте ссылку //www.ruby-lang.org/en/downloads/, вы увидите следующее:

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Загрузите Current stable версию (zip файл). Шаг 2 – запустите установку Ruby. Шаг 3 – добавьте Ruby папку bin в переменную пользователя и системную переменную PATH, для работы с гемами. Пользовательская переменная Path:

Щелкните правой кнопкой мыши на иконке Мой компьютер.

Выберите свойства.

Кликните Дополнительные параметры системы – Параметры среды.

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

В окне параметры среды два раза кликните по PATH, как показано на скриншоте ниже:

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Откроется окно изменения пользовательской переменной. Добавьте путь к папке Ruby bin в значение переменной (C:\Ruby\bin). Путь уже установлен на другие файлы, поэтому в конце поставьте точку с запятой и поле этого вставьте путь к папке, как показано ниже.

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Кликните ОК — Системные переменные — Кликните на кнопку Создать.

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Откроется окно создания новой системной переменной.

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

В качестве имени укажите RubyOpt, значение rubygems. Кликните ОК. Шаг 4 – откройте командную строку и введите следующую команду:

Шаг 5 – после успешной установки Sass вы увидите следующее.

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Пример

Ниже показан простой пример Sass.

Теперь давайте создадим файл style.scss, который очень похож на CSS. Единственное отличие – он сохраняется с расширением .scss. Оба файла .html и .scss необходимо создать в папке Ruby. Файл .scss можно сохранить в папке ruby\lib\sass\ (перед этим создайте эту папку).

С помощью следующей команды вы можете заставить Sass следить за файлом и обновлять CSS, когда Sass файл изменяется.

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Когда вы запустите команду сверху, файл style.css создастся автоматически. Когда бы вы не изменили файл SCSS, style.css автоматически подтянет все изменения.

Файл style.css будет иметь следующий код, когда вы запустите команду сверху.

Давайте выполним следующие шаги, чтобы увидеть все это в действии. Сохраните код выше в hello.html. Откройте этот файл в браузере

Пошаговая установка Ruby и Sass для автоматического обновления файла CSS

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: