ASP.NET에서 SASS 사용 [닫기]

ASP.NET 환경에서 Ruby HAML 패키지의 SASS (Syntactically Awesome StyleSheets) 를 사용하는 방법을 찾고 있습니다. 이상적으로는 SASS 파일을 CSS로 컴파일하여 빌드 프로세스의 원활한 부분이되기를 원합니다.

이 통합에 가장 좋은 방법은 무엇입니까? 또는 .NET 환경에 더 적합한 다른 CSS 생성 도구가 있습니까?

Visual Studio에서 더 나은 작업 환경 을 위해 Sass (SCSS 구문)를 지원하기 시작 하는 최신 버전의 Web Essential 을 설치할 수 있습니다.
또는 Sassy Studio 또는 Web Workbench를 설치할 수 있습니다.

그런 다음 ASP.NET 프로젝트에서 .sass / .scss 파일을 컴파일하려면 Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential 은 모든 프런트 엔드 항목에 대해 더 나은 환경을 제공하는 Visual Studio 용 모든 기능을 갖춘 플러그인입니다. 최신 버전은 Sass (SCSS 구문)를 지원하기 시작했습니다. 내부적으로는 Libsass를 사용하여 SCSS를 CSS로 컴파일합니다.

웹 워크 벤치 는 구문 강조, 지능 및 SCSS 파일 편집을위한 기타 유용한 기능을 추가하는 Visual Studio 용 또 다른 플러그인입니다. 또한 코드를 일반 또는 축소 된 CSS로 컴파일 할 수 있습니다. 내부적으로 Ruby Sass 컴파일러의 래핑 된 버전을 사용했습니다.

Sassy Studio : Visual Studio 용 또 다른 플러그인입니다. 기능은 적지 만 훨씬 가볍습니다.

그만큼 Libsass 라이브러리 (아직 개발)에 말대꾸 CSS의 프리 컴파일러의 C ++ 포트입니다. 원래 버전은 Ruby로 작성되었지만이 버전은 효율성과 이식성을위한 것입니다. 이 라이브러리는 가볍고 단순하며 다양한 플랫폼 및 언어와 쉽게 빌드 및 통합되도록 노력합니다.

Libsass 라이브러리에는 몇 가지 래퍼가 있습니다.

• SassC : 명령 줄 컴파일러 (Windows에서 sassc.exe를 얻으려면 MsysGit로 SassC 소스를 컴파일해야 함).
• NSass : .Net 래퍼.
• Node-Sass : Node.js에서 Libsass를 사용합니다.
• 기타

나침반 는 많은 유용한 도우미 (예 : 이미지 스프 라이팅)를 추가하고 SCSS / Sass를 컴파일 할 수있는 Sass 용 프레임 워크입니다. 하지만 스타일을 컴파일해야하는 각 개발 환경에 Ruby를 설치해야합니다.

SassAndCoffee 는 일부 DLL 및 구성을 통해 SCSS / Sass 컴파일 및 축소 지원을 추가하는 패키지입니다. Web Workbench 컴파일러에 비해 장점은 Visual Studio 솔루션에 자체 포함되어 있다는 것입니다. 모든 개발 환경에 플러그인을 설치할 필요가 없습니다. 비고 : SassAndCoffee는 자주 업데이트되지 않으며 IronRuby를 사용하여 공식 Ruby 컴파일러를 래핑하기 때문에 성능 문제가 발생할 수 있습니다. Nuget 패키지 를 통해 최신 버전을 설치할 수 있습니다.

나침반 프로젝트에는 sass를 css로 컴파일하는 컴파일러가 있습니다. Windows에서 실행되도록 제작되었지만 해당 플랫폼에서 잘 테스트되지 않았습니다. 플랫폼 관련 버그를 찾으면 기꺼이 수정하도록 도와 드리겠습니다.

나침반은 여기에서 찾을 수 있습니다 : http://github.com/chriseppsein/compass

2015 년에는 Node.js(서버 측 자바 스크립트 플랫폼) 및 gulp.js(작업 실행기 노드 패키지)와 함께 gulp-sass( libsass를 구현하는 노드 패키지 -Ruby SASS의 빠른 C 포트)를 사용하는 것이 좋습니다.

이와 같은 자습서로 시작할 수 있습니다 .

번들링을 선호하십니까? Bundle Transformer는 이제 마침내 libsass를 사용하여 고속 컴파일을 가능하게합니다.

Node와 Gulp를 사용해야한다고 생각하는 이유는 다음과 같습니다.

• Node는 이제 Frontend Tooling에 널리
  사용됩니다. 많은 웹 개발자는 이제 Node를 Frontend 웹 개발 작업을위한 플랫폼으로 사용하고 있습니다. Grunt, Gulp, JSPM, Webpack 또는 다른 어떤 것이 든 상관없이 npm 에서 지금 일어나고 있습니다.
  npm 패키지로 수행 할 수있는 작업 :
  • Sass, Less, PostCSS 등으로 스타일 컴파일
  • 자바 스크립트, CSS, HTML 템플릿 등 연결
  • 다른 버전의 JS를 작성하고 ES6-7, Typescript, Coffeescript를 ES5로 트랜스 파일
  • 로컬 SVG 파일에서 아이콘 글꼴 만들기
  • js, css, SVG 축소
  • 이미지 최적화
  • 고래를 구하세요
  • ...
• 새 개발자를위한 간단한 프로젝트
  설정 프로젝트 package.json및을 설정 한 후에는 gulpfile.js일반적으로 몇 단계 만 거치면 실행됩니다.
  
  • Node.js 다운로드 및 설치
  • 실행 npm install -g gulp (전체적으로 gulp 설치)
  • 실행 npm install (로컬로 프로젝트 패키지 설치)
  • 실행 gulp taskname ( gulpfile.js작업 이름을 설정 한 방법에 따라 SASS, Javascript 등을 컴파일하는 작업이 실행 됨)
• Visual Studio 2015에서 지원
  믿거 나 말거나 VS2015는 이제 모든 명령 줄 항목을 처리 할 수 ​​있습니다!

워크 플로 측면에서 몇 가지 일반적인 옵션이 있습니다.

• 개발자가 컴파일 된 코드를 저장소에 커밋하도록합니다.
  단점 : 개발자는 gulp프로덕션 준비 자산을 컴파일하기 위해 항상 실행 하거나 이와 유사 해야합니다.

• 빌드 | 스테이지 | 프로덕션 서버는 릴리스 전에 꿀꺽 꿀꺽 작업을 실행합니다.
  이 방법은 설정하기가 더 복잡 할 수 있지만 컴파일되지 않은 소스에서 작업이 검증되고 새로 빌드된다는 것을 의미합니다.

아래는 2012 년의 오래된 답변입니다.

Ruby, Python 및 C # .NET을 사용하는 프로젝트를 선도하는 프런트 엔드 개발자로부터 다음과 같은 생각이 있습니다.

Sass & LESS

저는 새 프로젝트, 특히 멋진 [Compass framework] [2]에서 [Sass] [1]을 사용하는 것을 선호합니다. Compass는 훌륭한 작업이며 내 프로세스에 많은 가치를 더합니다. Sass에는 훌륭한 커뮤니티, OK 문서 및 강력한 기능 세트가 있습니다. Sass는 Ruby 라이브러리입니다.

Sass의 대안은 [LESS] [3]입니다. 유사한 구문과 기능이 있지만 커뮤니티가 더 작고 문서가 약간 더 좋습니다. JS 라이브러리가 적습니다.

트렌드 측면에서 사람들은 CSS 레벨 4 기능을 지원하는 경우에도 잘 개발되어 시간이 지남에 따라 Sass로 이동하는 경향이 있습니다. 그러나 LESS는 여전히 완벽하게 사용할 수 있으며 사용을 보증하기에 충분한 가치를 쉽게 추가합니다.

ASP.NET 프로젝트에서 Sass / LESS 사용

내가 Sass를 사용하는 것을 선호하지만 Ruby / Sass를 .NET 프로젝트와 함께 사용하는 것은 힘들 수 있습니다. 설치가 어렵고, 외국 적이며, 개발자를 좌절시킬 수 있기 때문입니다.

몇 가지 옵션이 있습니다.

• Sass : 네이티브 루비 + Sass
  • 장점 : 가장 빠른 서버 컴파일
  • 장점 : 최신 버전의 Sass 사용 가능
  • 단점 : 시작 및 실행에 많은 번거 로움
  • 단점 : 모든 서버 또는 워크 스테이션에는 루비 설정이 필요합니다.
  • 단점 : .NET 개발자가 Ruby / 통합 문제를 해결하기가 더 어렵습니다.
• Sass : [IronRuby] [5] + Sass와 같은 Ruby .NET 포트
  • 장점 : 느린 서버 컴파일 (Frontend Devs가 불평합니다!)
  • 장점 : 최신 버전의 Sass를 사용하지 못할 수 있습니다.
  • 장점 : Native Ruby보다 설정이 약간 더 쉽습니다 .
  • 단점 : 모든 서버 또는 워크 스테이션에는 루비 설정이 필요합니다.
  • 단점 : .NET 개발자가 Ruby / 통합 문제를 해결하기가 더 어렵습니다.
• Sass : [BundleTransformer] [7] + Sass로 [.NET Bundling] [8] 확장
  • 장점 : (IronRuby 사용) 느린 서버 컴파일 (프런트 엔드 개발자가 불평합니다!)
  • 장점 : (IronRuby 사용) 최신 버전의 Sass를 사용하지 못할 수 있습니다.
  • 장점 : (IronRuby 사용) Native Ruby보다 설정이 약간 쉽습니다.
  • 단점 : 모든 서버 또는 워크 스테이션에는 루비 설정이 필요합니다.
  • 단점 : .NET 개발자가 Ruby / 통합 문제를 해결하기가 더 어렵습니다.
• Sass 또는 LESS : [Mindscape Workbench] [4]와 같은 Visual Studio 플러그인
  • 장점 : 손쉬운 시작
  • 장점 : 빠른 컴파일
  • 단점 : Sass 스타일로 작업하는 모든 개발자는 IDE 플러그인이 필요합니다.
  • 단점 : 서버에서 스타일을 빠르게 변경할 수 없음-로컬 재 처리 필요
• LESS : [DotLessCSS] [6]와 같은 .NET 포트
  • 장점 : 빠른 서버 컴파일
  • 장점 : 설정이 매우 쉬움
  • 장점 : C # .NET 개발자에게 편안함
  • 장점 : IDE / 워크 스테이션 / 서버 요구 사항 없음-웹 앱 자체에 포함
  • 단점 : SASS / Compass의 다양성이 없으며 항상 최신 LESS.JS 구문 호환성을 보장 할 수 없습니다.
• Sass : [Vagrant] [9]로 linux + Ruby 가상화
  • 장점 : 생각보다 설정이 끔찍하지 않습니다 .
  • 장점 : 빠름 !!
  • 장점 : Linux 패키지 관리자로 업데이트 된 최신 프런트 엔드 도구 (Sass, Compass 등)
  • 단점 : Linux가 아닌 사용자에게는 초기 설정이 어려울 수 있습니다.
  • 단점 : 이제 환경 요구 사항에 VM 호스팅이 포함됩니다.
  • 단점 : VM에 확장 성 / 유지 보수 문제가있을 수 있습니다.

제 생각에는 [DotLessCSS] [6]를 사용하는 LESS가 위에서 언급 한 이유로 일반적인 웹 개발 프로젝트에 가장 적합한 선택이라고 생각합니다.

몇 년 전에 [DotLessCSS] [6]에 성가신 버그와 제한이 있다는 것을 발견했지만 2012 년에 몇 가지 프로젝트에서 [DotLessCSS] [6]를 다시 사용하여 설정에 매우 만족합니다. 저는 Sass / Ruby를 사용하여 개발자에게 고통을주지 않았으며 LESS에서 대부분의 가치를 얻었습니다. 무엇보다도 IDE 또는 워크 스테이션 요구 사항이 없습니다.

[1] : http://sass-lang.com/ [2] : http://compass-style.org/ [3] : http://lesscss.org/ [4] : http : // www. mindscapehq.com/products/web-workbench [5] : http://www.ironruby.net/ [6] : http://www.dotlesscss.org/ [7] : http://bundletransformer.codeplex.com / [8] : http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx [9] : http://www.vagrantup.com/

방금 Visual Studio에서 Sass를 사용하는 방법에 대한 스크린 샷을 포함한 자세한 지침과 함께 Visual Studio 추가 기능을 작성했습니다. 여기에서 확인하세요 -http : //giri.sh/2011/01/21/sass-for-visual-studio-2010/

SASS는 아니지만 .NET 포트 용 Less Css를 살펴볼 수 있습니다 . Compass는 정말 흥미로워 보이지만 Less에 대해 이와 같은 것이 큰 도움이 될 것이라고 생각합니다.

어제 이걸 찾았는데, sass / scss를 제외하고는 JS (아직 CSS가 아님)와 파일 결합을 자동으로 처리 할 것입니다. 내가 바라는 한 가지는 누군가가 sass / scss 파일 편집을위한 VS 플러그인을 만드는 것입니다. 내가 발견 한 문제는 sass / scss 코드에 오류가있을 때 생성 된 CSS 파일을 테스트하거나 검사하기 만한다는 것입니다. 나는 모든 속도를 통과하지는 못했지만 지금까지 너무 좋았습니다.

https://github.com/xpaulbettsx/SassAndCoffee

나는 원래 여기 에서이 질문에 답했다 .

#PostBuild.rb
#from http://sentia.com.au/2008/08/sassing-a-net-application.html
#Post-build event command line: rake -f "$(ProjectDir)PostBuild.rb"

require 'haml'
require 'sass'

task :default => [ :stylesheets ]

desc 'Regenerates all sass templates.'
task :stylesheets do
    wd = File.dirname(__FILE__)
    sass_root = File.join(wd, 'Stylesheets')
    css_root = File.join(wd, 'Content')
    Dir[sass_root + '/*.sass'].each do |sass|
        css = File.join(css_root, File.basename(sass, '.sass') + '.css')
        puts "Sassing #{sass} to #{css}."
        File.open(css, 'w') do |f|
            f.write(Sass::Engine.new(IO.read(sass)).render)
        end
    end
end