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

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

70 голосов | спросил Hamed mayahian 22 SunEurope/Moscow2013-12-22T11:07:57+04:00Europe/Moscow12bEurope/MoscowSun, 22 Dec 2013 11:07:57 +0400 2013, 11:07:57

11 ответов


0

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

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

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

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

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

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

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

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

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

Загрузить Compile SASS

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

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

Загрузить веб-рабочую среду


Код Visual Studio

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

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

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

ответил Chris Spittles 17 PMpThu, 17 Apr 2014 18:25:16 +040025Thursday 2014, 18:25:16
0

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

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

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

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

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

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

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

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

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

ответил Tanner 10 J000000Thursday14 2014, 02:58:55
0

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

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

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

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

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

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

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

ответил Chris White 31 TueEurope/Moscow2013-12-31T00:09:14+04:00Europe/Moscow12bEurope/MoscowTue, 31 Dec 2013 00:09:14 +0400 2013, 00:09:14
0

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

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

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

Ознакомьтесь с CompileSass . р>

ответил Sam Rueby 10 MaramTue, 10 Mar 2015 06:23:49 +03002015-03-10T06:23:49+03:0006 2015, 06:23:49
0

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

install-package SassAndCoffee
ответил Sirwan Afifi 22 SunEurope/Moscow2013-12-22T11:31:04+04:00Europe/Moscow12bEurope/MoscowSun, 22 Dec 2013 11:31:04 +0400 2013, 11:31:04
0

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

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

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

ответил PW Kad 3 J0000006Europe/Moscow 2014, 00:46:12
0

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

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

ответил David Gebbett 19 FebruaryEurope/MoscowbWed, 19 Feb 2014 13:57:24 +0400000000pmWed, 19 Feb 2014 13:57:24 +040014 2014, 13:57:24
0

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

ответил Luke Puplett 2 PMpWed, 02 Apr 2014 14:54:24 +040054Wednesday 2014, 14:54:24
0

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

ответил Donskikh Andrei 26 32014vEurope/Moscow11bEurope/MoscowWed, 26 Nov 2014 11:11:11 +0300 2014, 11:11:11
0

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

Добавьте зависимости 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

ответил Serj Sagan 25 FebruaryEurope/MoscowbThu, 25 Feb 2016 05:52:57 +0300000000amThu, 25 Feb 2016 05:52:57 +030016 2016, 05:52:57
0

В 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 работает, но синхронизация не удалась.

ответил user2584621 19 FebruaryEurope/MoscowbThu, 19 Feb 2015 10:00:16 +0300000000amThu, 19 Feb 2015 10:00:16 +030015 2015, 10:00:16

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132