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

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

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

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

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

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

Установка Ruby

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Пошаговая установка 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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

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

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

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

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

gem install sass

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

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

Пример

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

<html>
 <head>
 <title> Import example of sass</title>
 <link rel = "stylesheet" type = "text/css" href = "style.css"/>
 </head>

 <body>
 <h1>Simple Example</h1>
 <h3>Welcome to TutorialsPoint</h3>
 </body>
</html>

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

h1{
 color: #AF80ED;
}

h3{
 color: #DE5E85;
}

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

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

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

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

h1 {
 color: #AF80ED;
}
h3 {
 color: #DE5E85;
}

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

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

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree