Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 ИспользоватьSASSможно во многих случаях. Это может быть:

2 <ul><li>онлайн-окружение, которое автоматически переводит код изSASSвCSS,</li>

3 <li>пакет в вашей системе (как напримерsurgeиз первого проекта),</li>

4 <li>отдельное программное обеспечение, переводящее файлы из.sass/.scssв.css.</li>

5 </ul>Разберёмся с каждым пунктом отдельно. Во время прохождения курса вы можете использовать любой вариант, который вам удобен. При работе с реальными проектами лучше устанавливатьSASSв виде пакета в вашу систему. Тогда, используя сборщики можно будет автоматизировать процесс компиляции, то есть перевода кода изSASSвCSS.

6 <h2>Онлайн-окружение</h2>

7 Для использованияSASSв онлайн-окружении подойдёт почти любой известный вам онлайн-редактор кода. Например,<a>CodePen</a>. Во вкладке с CSS выберите использование препроцессораSASS. Для синтаксисаSCSSнеобходимо выбрать соответствующий пункт выпадающего меню.

8 Это самый простой и быстрый вариант, который позволит вам писать CSS-код с использованием препроцессораSASS.

9 Другим популярным инструментом является сервис<a>Sassmeister</a>. Он позволяет быстро переводить код SASS в обычный CSS. Преимуществом данного сервиса является возможность выбора разных типов компиляторов. Это позволяет проверить свой код в разных условиях и, возможно, выявить несколько ошибок, с которыми можно столкнуться.

10 <h2>Программное обеспечение</h2>

11 Вы можете установить отдельное ПО, которое будет компилировать файлы препроцессора в обычныйCSS. Таких программ достаточно много, и многие из них доступны под все основные платформы (Windows, Linux, macOS). Распространённой программой является<a>Koala</a>. Она доступна под все основные платформы, а её интуитивный интерфейс позволит быстро разобраться в процессе компиляции файлов препроцессора.

12 Просто выберите директорию с вашими файлами.scss, иKoalaавтоматически преобразует их в файлы.css.

13 Вы можете установить SCSS в виде обычногоnpm-пакетав вашу систему. Это наиболее простой и быстрый путь, позволяющий вам использоватьSASSбез установки дополнительного программного обеспечения и не требует выхода в интернет, как в случае с онлайн-сервисами.

14 Для установкиSASSубедитесь, что у вас установленNode.js. Откройте терминал и выполните следующую команду:

15 Если вы используете операционную системуWindows, вам необходимо установить пакетный менеджерChocolatey. О способах установки вы можете прочитать в руководстве<a>Как начать разрабатывать в Windows</a>.

16 После установкиChocolateyвыполните следующую команду:

17 Для установкиSASSнаmacOSиспользуйте следующую команду:

18 После установки пакета вам в терминале станет доступна командаsass. В базовом её виде вам достаточно передать ей два параметра:

19 <ul><li>Путь к входному файлу. Это находящийся в вашей системе файл.sass/.scss.</li>

20 <li>Путь к выходному файлу. Здесь указывается путь до файла.css, в который запишется весьCSSпосле компиляции. Не обязательно создавать этот файл заранее. Если его не существует, то программа сама создаст его по пути, который вы указали.</li>

21 </ul>Помимо возможности компиляции, у вас также будет возможность запустить интерактивную оболочку (shell). С помощью неё вы можете легко экспериментировать с различными функциямиSASS. Для запуска интерактивной оболочки выполните в терминале командуsass -i:

22 По мере прохождения курса вы будете встречать различные функции. Пробуйте их в интерактивной оболочке.

23 Все примеры и упражнения в данном курсе будут компилироваться с помощью этой библиотеки. Библиотека называется Dart-SASS. Это важно, так как разные компиляторы могут по-разному обрабатывать SASS код. Различия незначительны, но при выборе другой библиотеки стоит поискать отличия.

24 <h2>Дополнительные материалы</h2>

25 <ul><li><a>Документация SASS по установке</a>. По ссылке вы также найдёте и другое программное обеспечение, с помощью которого можно преобразовыватьSASS-файлы.</li>

26 </ul><h2>Дополнительное задание</h2>

27 Установите на свой компьютерSASSс помощью пакетного менеджера. Попробуйте создать файл с расширением.scssи скомпилировать его. Вscss-файле можете указать следующий код:

28 Посмотрите, что получится в файле.cssпосле компиляции.