Как установить sass в visual studio code

Обновлено: 04.07.2024

Как я могу использовать препроцессор Sass CSS в Visual Studio 2013 ? Существуют ли какие-либо расширения, обеспечивающие поддержку Sass?

Visual Studio 2013 Update 2 имеет встроенную поддержку синтаксиса для файлов SCSS и LESS. Вы можете создавать файлы SCSS или LESS и видеть подсветку синтаксиса и intellisense для этих типов файлов. Однако он не предоставляет метод компиляции.

Вот ссылка на блог с пояснениями о новых функциях:

Мы добавили LESS в RTM VS2013, и теперь у нас есть элемент проекта SASS и редактор. Возможности редактора SASS сопоставимы с редактором LESS, включают раскраска, переменная и Mixins IntelliSense, комментарий /раскомментирование, краткая информация, форматирование, проверка синтаксиса, выделение, определение перехода, Выбор цвета, настройка параметров инструментов и т. д.

Обратите внимание: Это обновление поддерживает только новый синтаксис SassyCSS. Я пытался заставить его работать со старым синтаксисом с отступом SASS, но безуспешно.

Компиляция

Веб-основы. Это отличный инструмент, который выполняет всю «грубую» работу для тебя. Более новые версии Web Essentials доступны для Visual Studio 2013, обновление 3, 4 и 5.
Еще одна бесплатная программа, которая занимается только компиляцией, - CompileSASS это также работает в VS2015.
В качестве альтернативы вы можете использовать MindScape WebWorkbench, который это отличный инструмент с множеством приятных функций. Есть бесплатная версия, которой достаточно, чтобы обойтись, но есть и платная версия, которая гораздо более всеобъемлющая (но, на мой взгляд, слишком дорогая, учитывая, что есть лучшая бесплатная альтернатива).

Для тех, кто переходит в Visual Studio 2015, к сожалению, нет встроенной поддержки компиляции SASS и LESS. И, к сожалению, Web Essentials больше не будет поддерживать сборку. Автор Web Essentials (Мэдс Кристенсен) объясняет причину этого решения. здесь .

Вот список расширений, которые могут обрабатывать компиляцию:

Веб-компилятор (БЕСПЛАТНО)

Мэдс Кристенсен (Mads Kristensen), автор веб-материалов, создал автономный инструмент для компиляции под названием веб-компилятор . Все, что вам нужно сделать, это установить его, затем щелкнуть правой кнопкой мыши по любому из файлов SASS, которые вы хотите скомпилировать, и выбрать Web Compiler> Компилировать файл. С этого момента он отслеживается, и каждый раз, когда он сохраняется, файл будет скомпилирован.

CompileSASS (БЕСПЛАТНО)

Подобно веб-компилятору, это автономное расширение, которое было создано для работы как в VS2013 , так и в VS2015 , поскольку компиляция была удалена из популярного расширения Web Essentials. Он легок и отлично справляется со своей задачей благодаря великолепному составлению отчетов об ошибках. Прочитайте блог автора о расширении здесь .

Веб-верстак(FREE /ПЛАТНЫЕ)

То же самое, что и выше, на самом деле, он имеет встроенную поддержку SASS и LESS посредством подсветки синтаксиса и Intellisense, но не компилируется.

Любой из описанных выше компиляторов будет работать, но если вы хотите настроить компиляцию вручную, вот отличное руководство:

Работая над небольшим веб-проектом в Visual Studio 2013, я впервые захотел использовать SASS. Я немного покопался и обнаружил, что VS 2013 Update 2 был выпущен с собственной поддержкой файлов SASS ( .scss ).

После еще нескольких копаний и без опыта использования SASS я установил Web Essentials 2013 для обновления 2 , который используется для компиляции и создания соответствующих файлов .css .

Даже до сих пор я не понимал, как все это связано, но этот пост в блоге отлично объяснил все для первого таймера.

Фрагменты из блога (кредит @akatakritos)

Visual Studio 2013 предоставляет возможность добавлять файлы SASS ( .scss )
Установите Web Essentials 2013 для обновления 2
Добавьте новый файл .scss в свой проект, например, styles.scss
Обновите styles.scss , сохраните, и он автоматически сгенерирует styles.css файл в файле .scss
Затем вы можете связать или связать его как обычный .css файл

ОБНОВЛЕНИЕ июль 2015 г .:

В более позднем обновлении Web Essentials , а именно: версия 2.5 для обновления 4 ноября 12, 2014, компилятор SASS был удален.

SassyStudio
Web Workbench
веб-компилятор поддерживает только VS2015

Я не использовал Chripy, но есть и другие варианты, которые вы тоже можете попробовать.

Мое любимое расширение для работы с Sass в Visual Studio - это Web Workbench от Mindscape . Он хорошо интегрирован, работает с Visual Studio 2013 и даже поддерживает Compass. Если вы используете Less или CoffeeScript, он позаботится и о них. Я также поболтал с одним из разработчиков, и он был очень отзывчив и дружелюбен, что является огромным плюсом в моей книге. О, и я слышал, что еще много интересных вещей в работе.
SassyStudio - еще одна возможность, но она этого не сделала мне показалось, что он такой же мощный, как Web Workbench.
Это еще не сделано, но следите за Веб-основы . В настоящее время он поддерживает только LESS с точки зрения CSS препроцессоров, но поддержка Sass получила тонна запросов , и менеджер программы ответил, что" разработка идет полным ходом ". Надеюсь, скоро!

Последний вариант, к которому я часто прибегаю, это просто использовать внешний инструмент, чтобы посмотреть мои файлы SASS, скомпилировать их в фоновом режиме и позволить Visual Studio перезагрузить файлы CSS по мере их компиляции.

Установка Ruby и SASS через командную строку и указание следить за изменениями в каталоге вашего проекта работает нормально, но я обожаю Prepros для такого рода вещей.

Я не пробовал их все, кроме разведчика , Коала , LiveReload , Compass.app и Fire .app - также похожие варианты.

Хотя это не всегда правильные решения для каждого проекта, они дают вам большую гибкость и зрелость, которых вы пока не обязательно найдете в расширениях Visual Studio.

Надеюсь, это поможет!

Чтобы скомпилировать SCSS в Visual studio, установите CompileSass Расширение Visual Studio.

Я подумал, что это довольно печально, потому что это был абсолютно простой способ компиляции Sass из Visual Studio. Я создал новое расширение Visual Studio, которое ведет себя так же. Вы просто устанавливаете расширение, и оно автоматически компилирует файлы .scss в сжатые файлы .min.css при сохранении.

Я написал пост в блоге на эту тему, который, как мне кажется, может помочь другим. В основном SCSS поддерживается, но не расширение SASS.

Также будьте осторожны, поскольку я столкнулся с несколькими проблемами при компиляции, такими как, например, в файле compass /css3 /images были ошибки при сбое.

Мой комментарий, вероятно, бесполезен, так как у людей уже может быть ответ, но Scout доступен для окон :), я использую в своих проектах с марта 2013 года.

Вы можете использовать Mixture, действительно мощную и создающую уменьшенную версию ваших файлов CSS и JS.

Я думаю, что расширение Web Essentials, которое, как я предполагаю, работает каждый веб-разработчик и является своего рода предшественником поддержки родной VS IDE, имеет поддержку компиляции SCSS, но я думаю, что оно работает только с VS2013 Update 2, который находится в ОСАГО все еще в это время.

Добавьте зависимости NPM в package.json :

Тогда в gulpfile.js :

Наконец, в Task Runner Explorer , right-click в вашем новом задании sass затем Bindings затем выберите After Build

В Visual Studio 2013 SP 4 нет проблем с добавлением файла SCSS и синхронизацией при каждом сохранении. Я запутался, когда синхронизация не удалась, и обнаружил, что проблема заключалась в использовании переменной до ее определения. Файл SCSS не показывает никаких ошибок, но синхронизация не удалась.

Это работает для синхронизации:

Это не работает для синхронизации

Во втором случае ошибок нет, и intellisense работает, но синхронизация не удалась.

SassyStudio в настоящий момент поддерживает два способа генерации CSS: внутренний механизм, когда на ПК ничего специально ставить не нужно, и внешний, используя Ruby и получая, внимание, базовую поддержку Compass!

Внутренний механизм, это быстренький NSass, никакой жирноты под капотом в виде IronRuby (как это сделано в Mindscape Web Workbench). Для использования инструментария Ruby нужно заглянуть в настройки и указать путь к папке с установленным дистрибутивом Ruby (пакеты sass и compass должны быть установлены). Там-же, в настройках, включается экспериментальная поддержка IntelliSense, которая по умолчанию отключена.

Бах, и настроили поддержку Compass!

При использовании встроенного компилятора вся обработка происходит в директории обрабатываемого файла, где и появятся готовые CSS-файлы. С настройками по умолчанию там появится два файла: стандартный и минимизированный.

По поводу поддержки внешнего компилятора

Стоит отметить факт того, что Даррен Копп хороший парень! Он заставил меня пищать от восторга и удовольствия в процессе работы! Собственно, сперва в виде картинок, а дальше я поясню:

Пояснение

При использовании SassyStudio с внешним компилятором нужда в файлах sass-watch.cmd, и подобных батниках, пропала. При работе файлы config.rb подхватываются автоматически и независимо друг от друга. Открываем основной файл стилей для редактирования и сохраняем – автоматически происходит компиляция. Также автоматическая компиляция происходит при изменении файлов указанных посредством import.

Compass

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

Единственный момент, это IntelliSense. Однако и это решаемо. Обратите внимание ещё раз на параметры расширения. Пункт Include Paths это то что нам нужно. Пропишите в строке ваш путь к Compass, например:

В строке может быть и несколько путей, разделённых точкой с запятой.

Более подробная информация по фичам расширения на сайте автора и на странице GitHub – Issues, пока там самая подробная информация и все тонкости. А тонкостей много и это хорошо!

Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2021 году.

1. Live Server

Автоматическая перезагрузка статических и динамических страниц.

Включение Live Server для .html или .htm файлов:

Включение Live Server, если нет .html или .htm файлов:

нажатием горячих клавиш alt + l alt + o - для запуска сервера и alt + l alt + c - для его остановки
нажатием F1 или ctrl + shift + p » Live Server: Open With Live Server

Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server

Нужно установить дополнение для браузера Chrome или Firefox.
Должен быть установлен локальный сервер. Я использую Open Server.
Помещаем свой проект на локальный сервер и запускаем его.
Откроем установленное расширение и заполним необходимые поля. Actual Server Address: адрес и порт на котором расположен сервер.
Live Server Address: адрес, на котором работает расширение Live Server.
Нажимаем кнопку Go Live в статус баре.
Заходим на адрес локального сервера (в моём случае Open Server и адрес является названием проекта), т.е. заходим по адресу, который записали в Actual Server Address .

2. Sass

Поддержка синтаксиса Sass: отступы, автозаполнение и прочее

3. Live Sass Complier

Компилирует SASS / SCSS файлы в CSS в режиме реального времени

Для включения Live Sass Complier нужно нажать Watch Sass в статус баре

Что включает в себя Live Sass Complier:

выбор папки экспорта компилируемого файла
выбор стиля CSS (расширенный, компактный, сжатый, вложенный)
выбор имени расширения (.css или .min.css)
совместимость с расширением Live Server
настройка автоматической простановки вендорных префиксов
и прочее

4. Higlight Matching Tag

Выделение тегов - открывающего и закрывающего

Подсветку выделения тегов можно кастомизировать под себя. Моя настройка:

5. Color Highlight

Выделение web-цветов в редакторе соответствующим цветом

6. Bracket Pair Colorizer

Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.

7. Auto Rename Tag

При изменении одного парного тега, второй будет изменён автоматически.

По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:

8. Auto Close Tag

Автоматическое закрытие тегов

По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json

9. Import Cost

Это расширение будет отображать встроенный в редакторе размер импортируемого пакета.

10. Material Theme

Одна из самых популярных тем для VS Code. Так же можно установить шрифт, поддерживающий лигатуры (преобразование последовательности символов в единый элемент)

Тогда настройки для settings.json будут такими

11. Apache Conf

Поддержка синтаксиса Apache. Удобно для редактирования файлов с расширениями .htaccess. Также поддерживает типы файлов: .conf, .htgroups, .htpasswd