Использовать SASS можно во многих случаях. Это может быть:
Разберёмся с каждым пунктом отдельно. Во время прохождения курса вы можете использовать любой вариант, который вам удобен. При работе с реальными проектами лучше устанавливать SASS в виде пакета в вашу систему. Тогда, используя сборщики можно будет автоматизировать процесс компиляции, то есть перевода кода из SASS в CSS.
Для использования SASS в онлайн-окружении подойдёт почти любой известный вам онлайн-редактор кода. Например, CodePen. Во вкладке с CSS выберите использование препроцессора SASS. Для синтаксиса SCSS необходимо выбрать соответствующий пункт выпадающего меню.
Это самый простой и быстрый вариант, который позволит вам писать CSS-код с использованием препроцессора SASS.
Другим популярным инструментом является сервис Sassmeister. Он позволяет быстро переводить код SASS в обычный CSS. Преимуществом данного сервиса является возможность выбора разных типов компиляторов. Это позволяет проверить свой код в разных условиях и, возможно, выявить несколько ошибок, с которыми можно столкнуться.
Вы можете установить отдельное ПО, которое будет компилировать файлы препроцессора в обычный CSS. Таких программ достаточно много, и многие из них доступны под все основные платформы (Windows, Linux, macOS). Распространённой программой является Koala. Она доступна под все основные платформы, а её интуитивный интерфейс позволит быстро разобраться в процессе компиляции файлов препроцессора.
Просто выберете директорию с вашими файлами .scss, и Koala автоматически преобразует их в файлы .css.
Вы можете установить SCSS в виде обычного npm-пакета в вашу систему. Это наиболее простой и быстрый путь, позволяющий вам использовать SASS без установки дополнительного программного обеспечения и не требует выхода в интернет, как в случае с онлайн-сервисами.
Для установки SASS убедитесь, что у вас установлен Node.js. Откройте терминал и выполните следующую команду:
sudo npm install -g sass
Если вы используете операционную систему Windows, вам необходимо установить пакетный менеджер Chocolatey. О способах установки вы можете прочитать в руководстве Как начать разрабатывать в Windows.
После установки Chocolatey выполните следующую команду:
choco install sass
Для установки SASS на macOS используйте следующую команду:
brew install sass/sass/sass
После установки пакета вам в терминале станет доступна команда sass. В базовом её виде вам достаточно передать ей два параметра:
sass /project/src/style/style.scss /project/build/style/style.css
Помимо возможности компиляции, у вас также будет возможность запустить интерактивную оболочку (shell). С помощью неё вы можете легко экспериментировать с различными функциями SASS. Для запуска интерактивной оболочки выполните в терминале команду sass -i:
sass -i
>> 1px + 1px
2px
По мере прохождения курса вы будете встречать различные функции. Пробуйте их в интерактивной оболочке.
Все примеры и упражнения в данном курсе будут компилироваться с помощью этой библиотеки. Библиотека называется Dart-SASS. Это важно, так как разные компиляторы могут по разному обрабатывать SASS код. Различия незначительны, но при выборе другой библиотеки стоит поискать отличия.
Установите на свой компьютер SASS с помощью пакетного менеджера. Попробуйте создать файл с расширением .scss и скомпилировать его. В scss-файле можете указать следующий код:
header {
width: 50%;
background: brown;
&.w-100 {
width: 100%;
}
}
Посмотрите, что получится в файле .css после компиляции.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт