От автора: в этой главе мы пошагово рассмотрим, как проходит установка Sass, файлы которого выполняются с помощью Ruby.
Системные требования Sass
ОС – кроссплатформенный
Поддержка в браузерах – IE 8+, Firefox, Google Chrome, Safari, Opera
Язык программирования – Ruby
Установка Ruby
Шаг 1 – Откройте ссылку //www.ruby-lang.org/en/downloads/, вы увидите следующее:
Загрузите Current stable версию (zip файл). Шаг 2 – запустите установку Ruby. Шаг 3 – добавьте Ruby папку bin в переменную пользователя и системную переменную PATH, для работы с гемами. Пользовательская переменная Path:
Щелкните правой кнопкой мыши на иконке Мой компьютер.
Выберите свойства.
Кликните Дополнительные параметры системы – Параметры среды.
В окне параметры среды два раза кликните по PATH, как показано на скриншоте ниже:
Откроется окно изменения пользовательской переменной. Добавьте путь к папке Ruby bin в значение переменной (C:\Ruby\bin). Путь уже установлен на другие файлы, поэтому в конце поставьте точку с запятой и поле этого вставьте путь к папке, как показано ниже.
Кликните ОК — Системные переменные — Кликните на кнопку Создать.
Откроется окно создания новой системной переменной.
В качестве имени укажите RubyOpt, значение rubygems. Кликните ОК. Шаг 4 – откройте командную строку и введите следующую команду:
|
1 |
gem install sass |
Шаг 5 – после успешной установки Sass вы увидите следующее.
Пример
Ниже показан простой пример Sass.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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\ (перед этим создайте эту папку).
|
1 2 3 4 5 6 7 |
h1{ color: #AF80ED; } h3{ color: #DE5E85; } |
С помощью следующей команды вы можете заставить Sass следить за файлом и обновлять CSS, когда Sass файл изменяется.
|
1 |
sass --watch C:\ruby\lib\sass\style.scss:style.css |
Когда вы запустите команду сверху, файл style.css создастся автоматически. Когда бы вы не изменили файл SCSS, style.css автоматически подтянет все изменения.
Файл style.css будет иметь следующий код, когда вы запустите команду сверху.
|
1 2 3 4 5 6 |
h1 { color: #AF80ED; } h3 { color: #DE5E85; } |
Давайте выполним следующие шаги, чтобы увидеть все это в действии. Сохраните код выше в hello.html. Откройте этот файл в браузере
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
