Препроцессор sass настройка на linux и windows, добавление в редактор
Вернуться назад
10

Препроцессор sass настройка на linux и windows, добавление в редактор

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

Linux - Настройка препроцессора SASS

1. Начнем сначала с установки ruby компас, в командной строке пишем:

sudo apt-get install ruby-compass

2. Далее с помощью ruby получаем gem пакет, с помощью которго устанавливаем sass:

gem install sass

3. Для ознакомления посмотреть путь куда установлен sass:

which sass

4. И для ознакомления посмотреть версию которую установили:

sass -v

Есть пример как применить в редакторе phpShtorm сам препроцессор sass

В настройках прописал так:

- заходим в настройки

- находим раздел tools, и заходим

- в tools находим раздел File watcher, заходим туда

- нажимаем плюсик и выбираем SASS

- в нем прописываем пути

Programm: /usr/local/bin/scss

Arguments: —no-cache —update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css


Windows - Настройка препроцессора SASS

1. Скачать ruby с сайта https://rubyinstaller.org/downloads/ и установить

2. В установке со всем соглашаться

3. Далее с помощью ruby получаем gem пакет, с помощью которго устанавливаем sass:

gem install sass

4. проверить в командной строке sass, для этого написать sass и нажать enter

Есть пример как применить в редакторе phpShtorm сам препроцессор sass

В настройках прописал так:

- захом в настройки

- находим раздел tools, и заходим

- в tools находим раздел File watcher, заходим туда

- нажимаем плюсик и выбираем SASS

- в нем прописываем пути

Programm: sass

Arguments: $FileName$:$FileNameWithoutExtension$.css

Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

Working directory: $FileDir$

Все теперь должно все работать

создано:
06.09.2020
обновлено:
15.11.2022
автор:
admin
Теги
yandex metrika