Visual Studio 2013에서 Sass를 사용하는 방법

Visual Studio 2013에서 Sass를 사용하는 방법

---

Visual Studio 2013 에서 Sass CSS 전처리기를 어떻게 사용할 수 있습니까? Sass를 지원하는 확장 기능이 있습니까?

---

Visual Studio 2013 업데이트 2

Visual Studio 2013 업데이트 2에는 SCSS 및 LESS 파일 모두에 대한 기본 구문 지원이 있습니다. SCSS 또는 LESS 파일을 만들고 이러한 파일 유형에 대한 구문 강조 및 지능을 볼 수 있습니다. 그러나 컴파일 방법은 제공하지 않습니다.

다음 은 새로운 기능에 대해 설명하는 블로그 링크입니다 .

VS2013 RTM에 LESS를 추가했으며 이제 SASS 프로젝트 항목과 편집기가 있습니다. SASS 편집기 기능은 LESS 편집기와 유사하며 색상 화, 변수 및 Mixins IntelliSense, 주석 / 주석 제거, 빠른 정보, 서식 지정, 구문 유효성 검사, 개요, 이동 정의, 색상 선택기, 도구 옵션 설정 등을 포함합니다.

참고 : 이 업데이트는 최신 SassyCSS 구문 만 지원하는 것으로 보입니다. 나는 성공하지 않고 오래된 들여 쓰기 SASS 구문으로 작동하도록 시도했습니다.

편집

• Web Essentials . 이것은 모든 '그런'작업을 수행하는 훌륭한 도구입니다. 최신 버전의 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)의 작성자는 여기 에서이 결정의 이유를 설명합니다 .

다음은 컴파일을 처리 할 수있는 확장 목록입니다.

WebCompiler (무료)

웹 에센셜의 저자 인 Mads Kristensen은 Web Compiler 라는 독립형 컴파일 도구를 만들었습니다 . 설치 한 다음 컴파일하려는 SASS 파일을 마우스 오른쪽 버튼으로 클릭하고 웹 컴파일러> 파일 컴파일을 선택하기 만하면됩니다. 그 시점부터 감시되고 저장 될 때마다 파일이 컴파일됩니다.

웹 컴파일러 다운로드

CompileSASS (무료)

Web Compiler와 유사하게 이것은 인기있는 Web Essentials 확장에서 컴파일이 제거 되었기 때문에 VS2013 및 VS2015 에서 작동하도록 만들어진 독립 실행 형 확장입니다 . 가볍고 훌륭한 오류보고 기능으로 작업을 잘 수행합니다. 여기 에서 확장에 대한 작성자의 블로그를 읽어보십시오 .

Compile SASS 다운로드

Web Workbench (무료 / 유료)

Mindscape의 Web Workbench 는 SASS를 컴파일 할 때 오랫동안 제가 가장 좋아하는 확장 프로그램 이었지만 이후 무료 대안을 선호했습니다. 그래도 Pro 버전은 출력 된 파일을 사용자 정의하는 여러 가지 방법이있는 강력한 도구이지만 무료 도구가 있다는 점을 고려할 때 상당히 비쌉니다 ($ 39).

Web WorkBench 다운로드

---

Visual Studio 코드

실제로 위와 동일한 거래로 구문 강조 및 Intellisense를 통해 SASS 및 LESS를 기본적으로 지원하지만 컴파일이 부족합니다.

위에서 설명한 모든 컴파일러가 작동하지만 컴파일을 수동으로 설정하려는 경우 여기에 훌륭한 가이드가 있습니다.

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

---

이에 대한 답변을 찾는 다른 사람을 위해 일부 답변이 오래되었으므로 시간을 절약하기 위해 게시하고 있습니다.

Visual Studio 2013에서 소규모 웹 프로젝트를 작업하는 동안 처음으로 SASS를 사용하고 싶었습니다. 몇 가지 파고 들었고 SASS ( .scss) 파일에 대한 기본 지원과 함께 VS 2013 업데이트 2가 릴리스되었음을 발견했습니다 .

좀 더 자세히 살펴본 후 SASS를 사용해 본 경험이 없어서 해당 파일 을 컴파일하고 생성하는 데 사용되는 업데이트 2 용 Web Essentials 2013을 설치했습니다 .css.

그럼에도 불구하고 모든 것이 어떻게 하나로 묶여 있는지 명확하지 않았지만 이 블로그 게시물 은 첫 번째 타이머에 대한 모든 것을 설명하는 훌륭한 작업을 수행했습니다.

블로그의 스 니펫 (@akatakritos에 대한 크레딧)

1. Visual Studio 2013은 SASS 파일 ( .scss) 을 추가하는 기능을 제공합니다.
2. 업데이트 2 용 Web Essentials 2013 설치
3. .scss프로젝트에 새 파일 추가 , 예 :styles.scss
4. 업데이트 styles.scss하고 저장하면 styles.css파일 아래에 .scss파일 이 자동으로 생성 됩니다.
5. 그런 다음 일반 .css파일 처럼 묶거나 연결할 수 있습니다.

2015 년 7 월 업데이트 :

이후 Web Essentials 업데이트 , 즉 업데이트 4 용 버전 2.5에서 2014 년 11 월 12 일 SASS 컴파일러가 제거되었습니다.

대체 컴파일러 :

• SassyStudio
• 웹 워크 벤치
• 웹 컴파일러 는 VS2015 만 지원합니다.

---

나는 Chripy를 사용하지 않았지만 시도해 볼 수있는 몇 가지 다른 옵션이 있습니다.

1. Visual Studio에서 Sass로 작업하는 데 가장 좋아하는 확장 기능은 Mindscape의 Web Workbench 입니다. 잘 통합되고 Visual Studio 2013과 함께 작동하며 Compass도 지원합니다. Less 또는 CoffeeScript를 사용하는 경우에도 처리됩니다. 저도 개발자 중 한 명과 이야기를 나눴는데 그는 정말 반응이 많고 친절해서 제 책에서 큰 장점이되었습니다. 아, 그리고 더 멋진 것들이 작업 중에 있다고 들었습니다.
2. SassyStudio 는 또 다른 가능성이지만 시도했을 때 Web Workbench만큼 강력하지는 않았습니다.
3. 아직 출시되지는 않았지만 Web Essentials를 주시하십시오 . 현재 CSS 전 처리기 측면에서 LESS 만 지원하지만 Sass 지원은 많은 요청을 받았으며 프로그램 관리자는 "개발이 최대 속도를 내고 있습니다."라고 대답했습니다. 곧 희망합니다!

마지막 옵션과 내가 자주 사용하는 옵션은 외부 도구를 사용하여 내 SASS 파일을 감시하고 백그라운드에서 컴파일 한 다음 Visual Studio가 컴파일 될 때 CSS 파일을 다시로드하도록하는 것입니다.

명령 줄을 통해 Ruby와 SASS를 설치하고 프로젝트 디렉토리에서 변경 사항 을 확인하도록 지시 하는 것은 잘 작동합니다.하지만 저는 이러한 종류의 Prepros 를 좋아 합니다.

나는 그들 모두를 시도하지 않았지만 Scout , Koala , LiveReload , Compass.app 및 Fire.app 도 유사한 옵션입니다.

이것이 모든 프로젝트에 항상 적합한 솔루션은 아니지만 Visual Studio 확장에서 반드시 찾을 수없는 많은 유연성과 성숙도를 제공합니다.

도움이 되었기를 바랍니다.

---

Visual Studio 에서 SCSS를 컴파일하려면 CompileSass Visual Studio Extension을 설치합니다 .

불행히도 Web Essentials 는 더 이상 Sass 컴파일을 지원하지 않습니다 .

I thought this was pretty sad because it was absolutely the simplest way to compile Sass from Visual Studio. I created a new Visual Studio extension that behaves the same way. You just install the extension and it will automatically compile .scss files to compressed .min.css files when you save.

Check out CompileSass.

---

for ASP.NET there is a couple of ways to do integrate with SASS. Chripy is a common plug-in this is something you want to install in visual studio as an extension.
and thus design time compilation , you can find out more about chripy in http://chirpy.codeplex.com/ ,
as well as there is another package you can install via Nuget :

install-package SassAndCoffee

---

I wrote a blog post on this topic that I feel may help others. Basically SCSS is supported but not the SASS extension.

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

Also be careful as I have run in to a few problems compiling Compass such as in the compass/css3/images file there were breaking errors.

---

My comment is probably useless as people may already have an answer, but Scout is available for windows :), I have been using in my projects since March 2013.

You could use Mixture, really powerful and creates minified version of your CSS and JS files.

---

I think the Web Essentials extension - which I'd assume every web dev is running and is sort of a precursor to native VS IDE support - has SCSS compilation support, but I think it only works with VS2013 Update 2 which is in CTP still at this time.

---

Last version of Visual Studio + last version of Web Essentials http://vswebessentials.com/download allows to use Sass and Less out of the box.

---

If you have MVC 6, you could just use gulp. Original source here: http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/

Add the NPM dependencies in 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"
  }
}

Then in 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));
});

Finally, in the Task Runner Explorer, right-click on your new task sass then Bindings then select After Build

---

In Visual Studio 2013 SP 4 there is no problem adding a SCSS file and syncing on every save. I got confused when syncing failed, I found the problem was using a variable before it was defined. The SCSS file doesn't show any error but sync fails.

This works for sync:

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

This doesn't work for sync

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

In the second case there are no errors and intellisense works, but sync fails.

참고URL : https://stackoverflow.com/questions/20727102/how-to-use-sass-in-visual-studio-2013