Установка 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
Как установить sass в visual studio code
Компиляция SASS/SCSS в CSS в VS CODE с помощью плагина Live Sass Compiler
14 апреля 2023
Оценки статьи
Еще никто не оценил статью
SASS (Syntactically Awesome Style Sheets) и SCSS (Sassy CSS) — это мощные препроцессоры CSS, которые предоставляют разработчикам множество дополнительных функций, таких как переменные, вложенность, миксины и многое другое, что делает стилизацию веб-сайтов более эффективной и организованной. Однако, браузеры не могут понимать эти языки препроцессоров напрямую, поэтому необходимо компилировать их в обычный CSS перед использованием на веб-страницах.
VS Code — одна из популярных интегрированных сред разработки (IDE) с множеством расширений для облегчения работы разработчиков. Одним из таких расширений является Live Sass Compiler, которое позволяет автоматически компилировать SASS/SCSS файлы в CSS и создавать уменьшенные версии CSS. Давайте рассмотрим, как установить и настроить это расширение.
Установка Live Sass Compiler
Для начала, откройте VS Code и перейдите в расширения VSCODE (Visual Studio Marketplace), либо используйте поиск расширений по идентификатору @glenn2223.live-sass . Установите расширение Live Sass Compiler и перезагрузите VS Code, если это требуется.
Настройка компиляции SASS/SCSS в CSS
Теперь, когда расширение установлено, откройте ваш файл SASS/SCSS в VS Code. Внизу на панели инструментов вы увидите надпись «Watch Sass» с иконкой глаза. Щелкните по ней, чтобы включить автоматическую компиляцию SASS/SCSS файлов в CSS.
При изменении файла SASS/SCSS, расширение будет автоматически компилировать его в CSS, и результат будет сохраняться в отдельном CSS файле.
Оптимизация CSS файла с помощью Live Sass Compiler
Вы также можете настроить различные параметры компиляции, используя настройки расширения.
Например, вы можете настроить расположение экспортируемого CSS файла, стиль компиляции CSS (расширенный или сжатый), имя расширения для экспортируемого файла и другие параметры.
Для этого нажмите Ctrl+Shift+P, введите «Открыть пользовательские настройки (JSON)» и откройте файл с настройками. Затем добавьте необходимые параметры в файл настройки.
Например, добавим следующий фрагмент:
settings.json
"liveSassCompile.settings.formats":[ "format": "compressed" >, ] 
При компиляции SASS/SCSS файлов, ваш CSS файл будет максимально сжат.
Другие полезные настройки:
Подробнее о них на github.
settings.json
"liveSassCompile.settings.formats":[ "format": "expanded", "extensionName": ".css", "savePath": "/css" >, "extensionName": ".min.css", "format": "compressed", "savePath": "/dist/css" > ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "defaults" ] > Меню категорий
-
Загрузка категорий.
Добро пожаловать в Блог Разработчика Владислава Александровича.
Ведется медленная, но уверенная разработка функционала сайта.
Django Core: 0.3.4 / Next.js 1.0 / UPD: 05.06.2023
Как прикрепить внешний CSS файл к SCSS/SASS в VS Code?
Решил опробовать VS Code. И застрял на моменте компиляции файла со стилями.
Дело в том, что обычно по мимо собственных стилей зачастую приходится в основной файл добавлять стили из различных библиотек. Раньше я просто прописывал путь к нужному css фалу так: @import ‘path/to/file/filename’
и его код компилировался с основным файлом. При компиляции в VS Code через LiveSassCompile он создает лишь ссылку на файл.
Возможно ли что-то с этим сделать или LiveSassCompile совсем не поддерживает импорт файлов?
- Вопрос задан более двух лет назад
- 313 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
PiCensored @PiCensored
Дело не в LiveSassCompile. А в том что директива @import устроена в sass, так что файлы импортируются с расширением .sass(.scss). А если расширение .css, то иморт вставляется как ссылка.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Перестал работать Live Sass Compiler в Visual Studio Code
Сегодня обновил Мак-ОС до актуальной Big Sur 11.2.3 и при открытии проекта в VS Code, он мне выдал: «Хост-процессор расширений неожиданно завершил работу» (Extension host terminated unexpectedly). Как всегда очень не вовремя.
Я не все проекты собираю в Галпе, простые чаще всего компилирую прямо в VS Code. Но в этот раз все пошло не по плану.
Оказалось, проблема в расширении Live Sass Compiler от Ритвика Дея — оно не обновлялось с 2018 года, и удивительно, что работало вообще. В ветке расширения на гитхабе выяснилось, что на маркетплейсе Visual Studio имеется одноименный форк этого расширения от другого разработчика Гленна Маркса — Live Sass Compiler. В отличие от первого, оно не такое популярное и имеет гораздо меньше скачиваний. Но зато прекрасно заводится на Big Sur 11.2.3, проверил лично.
Решение как-то тяжело гуглилось.
Поэтому, решил зафиксировать у себя, возможно кому-то поможет.
Подписывайтесь на мой канал @DanilinBiz.
Делюсь опытом и полезными материалами по разработке на фрилансе.
Автор Иван Данилин
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.