Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Установка SASS: Основы

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

  • онлайн-окружение, которое автоматически переводит код из SASS в CSS,
  • пакет в вашей системе (как например surge из первого проекта),
  • отдельное программное обеспечение, переводящее файлы из .sass/.scss в .css.

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

Онлайн-окружение

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

Использование CodePen с SCSS

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

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

Программное обеспечение

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

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

Koala SCSS

Установка SASS в виде пакета

Вы можете установить 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/.scss.
  • Путь к выходному файлу. Здесь указывается путь до файла .css, в который запишется весь CSS после компиляции. Не обязательно создавать этот файл заранее. Если его не существует, то программа сама создаст его по пути, который вы указали.
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 и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»