Как использовать Sass в Visual Studio 2013

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

Ответ 1

Обновление Visual Studio 2013 2

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

Здесь ссылка в блог, объясняющий новые функции:

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

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

Компиляция

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

Visual Studio 2015

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

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

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

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

Загрузить веб-компилятор

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

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

Загрузить компиляцию SASS

Web Workbench (FREE/PAID)

Mindscape Web Workbench был моим любимым расширением в течение многих лет при компиляции SASS, но с тех пор я ушел в сторону бесплатных альтернатив. Тем не менее, версия Pro - это мощный инструмент с множеством способов настройки выведенных файлов, но он также довольно дорог (39 долларов США), поскольку есть бесплатные инструменты там.

Загрузить Web WorkBench

Код Visual Studio

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

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

https://code.visualstudio.com/Docs/languages/css

Ответ 2

Для кого-либо, кто ищет ответ на этот вопрос, я отправляю сообщение, чтобы сэкономить ваше время, так как некоторые ответы немного устарели.

Во время работы над небольшим веб-проектом в 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:

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

Альтернативные компиляторы:

SassyStudio
Web Workbench
Web Compiler Поддерживает только VS2015

Ответ 3

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

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

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

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

Я не пробовал их всех, кроме Scout, Koala, LiveReload, Compass.app и Fire.app также являются аналогичными.

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

Я надеюсь, что это поможет!

Ответ 4

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

К сожалению, Web Essentials больше не собирается компилировать Sass.

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

Отъезд CompileSass.

Ответ 5

для ASP.NET существует несколько способов интеграции с SASS. Chripy является распространенным подключаемым модулем, это то, что вы хотите установить в visual studio как расширение.
и, таким образом, компоновку времени разработки, вы можете узнать больше о chripy в http://chirpy.codeplex.com/,
а также есть другой пакет, который вы можете установить через Nuget:

install-package SassAndCoffee

Ответ 6

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

http://pwkad.wordpress.com/2014/05/30/using-scss-in-visual-studio-2013-with-web-essentials-starring-compass-and-susy/

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

Последняя версия Visual Studio + последней версии веб-Essentials http://vswebessentials.com/download позволяет использовать Sass и Less из коробки.

Ответ 10

Если у вас MVC 6, вы можете просто использовать gulp. Оригинальный источник здесь: http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/

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

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "3.8.11",
    ...
    "gulp-sass": "2.2.0",
  },
  "dependencies": {
    "gulp-sass": "^2.2.0"
  }
}

Затем в gulpfile.js:

var gulp = require("gulp"),
    ...
    sass = require("gulp-sass");


paths.js = paths.webroot + "js/**/*.js";
...
paths.sass = paths.webroot + "css/**/*.scss";
paths.cssOutput = paths.webroot + "css";


gulp.task('sass', function () {
    gulp.src(paths.sass)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.cssOutput));
});

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

Ответ 11

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

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

$body-main: 45px;
body {
    padding-top: $body-main + 25px;
    padding-bottom: $body-main - 5px;
}

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

body {
    padding-top: $body-main + 25px;
    padding-bottom: $body-main - 5px;
}
$body-main: 45px;

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