Установка — SASS: Основы работы
Использовать SASS можно во многих случаях. Это может быть:
- онлайн-окружение, которое автоматически переводит код из SASS в CSS,
- пакет в вашей системе (как например surge из первого проекта),
- отдельное программное обеспечение, переводящее файлы из .sass/.scss в .css.
Разберёмся с каждым пунктом отдельно. Во время прохождения курса вы можете использовать любой вариант, который вам удобен. При работе с реальными проектами лучше устанавливать SASS в виде пакета в вашу систему. Тогда, используя сборщики можно будет автоматизировать процесс компиляции, то есть перевода кода из SASS в CSS.
Онлайн-окружение
Для использования SASS в онлайн-окружении подойдёт почти любой известный вам онлайн-редактор кода. Например, CodePen . Во вкладке с CSS выберите использование препроцессора SASS. Для синтаксиса SCSS необходимо выбрать соответствующий пункт выпадающего меню.
Это самый простой и быстрый вариант, который позволит вам писать CSS-код с использованием препроцессора SASS.
Другим популярным инструментом является сервис Sassmeister . Он позволяет быстро переводить код SASS в обычный CSS. Преимуществом данного сервиса является возможность выбора разных типов компиляторов. Это позволяет проверить свой код в разных условиях и, возможно, выявить несколько ошибок, с которыми можно столкнуться.
Программное обеспечение
Вы можете установить отдельное ПО, которое будет компилировать файлы препроцессора в обычный CSS. Таких программ достаточно много, и многие из них доступны под все основные платформы (Windows, Linux, macOS). Распространённой программой является Koala . Она доступна под все основные платформы, а её интуитивный интерфейс позволит быстро разобраться в процессе компиляции файлов препроцессора.
Просто выберете директорию с вашими файлами .scss, и Koala автоматически преобразует их в файлы .css.
Установка SASS в виде пакета
Вы можете установить SCSS в виде обычного npm-пакета в вашу систему. Это наиболее простой и быстрый путь, позволяющий вам использовать SASS без установки дополнительного программного обеспечения и не требует выхода в интернет, как в случае с онлайн-сервисами.
Для установки SASS убедитесь, что у вас установлен Node.js. Откройте терминал и выполните следующую команду:
sudo npm install -g sass Если вы используете операционную систему Windows, вам необходимо установить пакетный менеджер Chocolatey. О способах установки вы можете прочитать в руководстве Как начать разрабатывать в Windows.
После установки Chocolatey выполните следующую команду:
install sass Для установки SASS на macOS используйте следующую команду:
install sass/sass/sass После установки пакета вам в терминале станет доступна команда sass. В базовом её виде вам достаточно передать ей два параметра:
- Путь к входному файлу. Это находящийся в вашей системе файл .sass/.scss.
- Путь к выходному файлу. Здесь указывается путь до файла .css, в который запишется весь CSS после компиляции. Не обязательно создавать этот файл заранее. Если его не существует, то программа сама создаст его по пути, который вы указали.
Помимо возможности компиляции, у вас также будет возможность запустить интерактивную оболочку (shell). С помощью неё вы можете легко экспериментировать с различными функциями SASS. Для запуска интерактивной оболочки выполните в терминале команду sass -i:
-i >> 1px + 1px 2px По мере прохождения курса вы будете встречать различные функции. Пробуйте их в интерактивной оболочке.
Все примеры и упражнения в данном курсе будут компилироваться с помощью этой библиотеки. Библиотека называется Dart-SASS. Это важно, так как разные компиляторы могут по-разному обрабатывать SASS код. Различия незначительны, но при выборе другой библиотеки стоит поискать отличия.
Дополнительные материалы
- Документация SASS по установке . По ссылке вы также найдёте и другое программное обеспечение, с помощью которого можно преобразовывать SASS-файлы.
Дополнительное задание
Установите на свой компьютер SASS с помощью пакетного менеджера. Попробуйте создать файл с расширением .scss и скомпилировать его. В scss-файле можете указать следующий код:
header width: 50%; background: brown; &.w-100 width: 100%; > > Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Как правильно подключать css в sass?
в консоли выдает
DEPRECATION WARNING on line 4, column 8 of C:/Users/Nikolay/Desktop/fasovkin/dev/base/_libs.sass:
Including .css files with @impоrt is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
- Вопрос задан более трёх лет назад
- 3719 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Трансформируйте css в scss и импортите его. Поскольку любой валидный css — это валидный scss, то достаточно изменить расширение файла. В свою очередь scss и sass вполне совместимы.
Если вам не важна очередь подключения стилей, которые есть в css, то вы также можете добавить шаг в ваш gulpfile с конвертацией css в scss и объединять scss и sass через gulp.
Директива @import
Sass расширяет CSS правило 1 @import , позволяя импортировать scss и sass файлы. Все импортированные scss и sass файлы могут быть объединены в одном результирующем css файле. Кроме того, любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.
Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключ —load-path в командной строке.
@import использует название файла для импорта. По умолчанию, @import ищет Sass-файлы, но есть несколько правил, по которым @import отрабатывает как CSS-правило:
- Если расширение файла .css
- Если имя файла начинается с http://
- Если имя файла вызывается через url()
- Если правило @import включает в себя любые медиа-запросы
Если ни одно из вышеперечисленных условий не соблюдено, а расширение файлов .scss или .sass, то эти файлы будут импортированы. Если расширения файлов не указаны, то Sass попытается найти файлы по имени с расширением .scss или .sass и импортирует их. Например:
@import "foo.scss"; // или @import "foo"; @import foo.sass // или @import foo будет импортирован файл foo, в то время как:
@import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); @import "foo.css" @import "foo" screen @import "http://foo.com/bar" @import url(foo) @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); Также возможно импортирование нескольких файлов через одну директиву.
@import "rounded-corners", "text-shadow"; @import rounded-corners, text-shadow Будут импортированы файлы rounded-corners.scss и text-shadow.scss.
Импортирование может содержать в себе интерполяцию #<> , но только с некоторыми ограничениями. Невозможно динамически импортировать файлы Sass через переменные; интерполяция нужна только для правила @import в CSS. Как таковая, интерполяция работает только с url().
$family: unquote("Droid+Sans"); @import url("http://fonts.googleapis.com/css?family=#"); $family: unquote("Droid+Sans") @import url("http://fonts.googleapis.com/css?family=#") @import url("http://fonts.googleapis.com/css?family=Droid+Sans"); 1 Правилом является только функционал с возможностями CSS, директива — функционал правила CSS + расширение функционалом Sass.
Установка Sass
Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).
- CodeKit (Платно) Mac
- Compass.app (Условно-бесплатно) Mac Windows Linux
- Ghostlab (Платно) Mac Windows
- Hammer (Платно) Mac
- Koala (Бесплатно) Mac Windows Linux
- LiveReload (Условно-бесплатно) Mac Windows
- Prepros (Платно) Mac Windows Linux
- Scout-App (Бесплатно) Windows Linux Mac
Командная строка
Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:
sass source/stylesheets/index.scss build/stylesheets/index.css Используя любой способ установки Sass, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.
Как только все настроено, начинайте наслаждаться. Если вы впервые столкнулись с Sass, то специально для вас мы создали несколько ресурсов для обучения.
Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)
Если вы используете Node.js, то вы можете установить Sass c помощью npm:
npm install -g sass
Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)
Если вы используете менеджер пакетов Chocolatey для Windows, вы можете установить Dart Sass при помощи команды:
choco install sass
Установка в Mac OS X (Homebrew)
Если вы используете менеджер пакетов Homebrew для Mac OS X, вы можете установить Dart Sass при помощи команды:
brew install sass/sass/sass