Sass — Установка

Поділитись

В этой главе мы изучим пошаговую процедуру установки Ruby, которая используется для выполнения файлов SASS.

Системные требования для SASS

  • Операционная система — кроссплатформенная
  • Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
  • Язык программирования — Ruby

Операционная система — кроссплатформенная

Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

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

Установка Ruby

Шаг 1 — Откройте ссылку https://www.ruby-lang.org/en/downloads/ , вы увидите экран, как показано ниже —

SASS Установка

Загрузите текущую стабильную версию zip-файла.

Шаг 2 — Затем запустите программу установки, чтобы установить Ruby в Системе.

Шаг 3 — Затем добавьте папку Ruby bin в вашу переменную пользователя PATH и системную переменную для работы с командой gem.

Пользовательская переменная пути —

  • Щелкните правой кнопкой мыши значок « Мой компьютер» .
  • Выберите Свойства .
  • Затем перейдите на вкладку « Дополнительно » и нажмите « Переменные среды» .

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

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

Затем перейдите на вкладку « Дополнительно » и нажмите « Переменные среды» .

SASS Установка

В окне Переменные среды дважды щелкните PATH, как показано на снимке экрана ниже.

SASS Установка

Вы получите окно Изменить пользовательскую переменную, как показано на рисунке. Добавьте путь к папке ruby ​​bin в поле Значение переменной как C: \ Ruby \ bin . Если путь уже задан для других файлов, введите точку с запятой и добавьте путь к папке Ruby, как показано ниже.

SASS Установка

Нажмите кнопку ОК .

Системная переменная —

  • Нажмите кнопку Новый .

Нажмите кнопку Новый .

SASS Установка

Далее отображается блок New System Variable, как показано ниже.

SASS Установка
  • Введите RubyOpt в поле Имя переменной и rubygems в поле Значение переменной . После ввода имени и значения переменной нажмите кнопку ОК .

Введите RubyOpt в поле Имя переменной и rubygems в поле Значение переменной . После ввода имени и значения переменной нажмите кнопку ОК .

Шаг 4 — Откройте командную строку в вашей системе и введите следующую строку —

gem install sass

Шаг 5 — Далее вы увидите следующий экран после успешной установки SASS.

SASS Установка

пример

Ниже приведен простой пример 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. Оба файла .htm и .scss должны быть созданы внутри папки ruby . Вы можете сохранить ваш файл .scss в папке ruby \ lib \ sass \ (перед этим создайте папку sass в каталоге lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Вы можете указать SASS смотреть файл и обновлять CSS при каждом изменении файла SASS, используя следующую команду:

sass --watch C:\ruby\lib\sass\style.scss:style.css
SASS Установка

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

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

style.css

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

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

Сохраните приведенный выше код в файле hello.html .

Откройте этот файл HTML в браузере.


Поділитись