ASP.NET에서 SASS 사용

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로 컴파일합니다.

---

Web Workbench 는 구문 강조, 지능 및 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를 사용합니다.
• 기타

---

Compass 는 많은 유용한 도우미 (예 : 이미지 스프 라이팅)를 추가하고 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 등을 컴파일하는 작업이 실행 됨)
• Supported by Visual Studio 2015
  Believe it or not, VS2015 can now handle all the commandline stuff for you!

You have a couple of typical options in terms of workflow:

• Have your developers commit their compiled code to the repository
  Downside: Developers must always run gulp or similar to compile production-ready assets

• Your build|stage|production servers run gulp tasks before releases
  This way can be more complicated to set up, but means that work is validated and built fresh from uncompiled source.

Below is my old answer from 2012, kept for posterity:

From a Project-leading frontend developer working with Ruby, Python, and C# .NET, I have these thoughts:

Sass & LESS

I prefer to use [Sass][1] on a new project, especially with the wonderful [Compass framework][2]. Compass is a great piece of work, and adds much value to my process. Sass has a great community, OK documentation, and a powerful feature set. Sass is a Ruby library.

An alternative to Sass, is [LESS][3]. It has similar syntax and features, but a smaller community and slightly better documentation. LESS a JS library.

Trend-wise, people tend to move towards Sass over time as it is well-developed, even supporting CSS Level 4 features. But LESS is still perfectly usable, and easily adds enough value to warrant using it.

On using Sass/LESS in an ASP.NET Project

While I prefer using Sass, getting Ruby/Sass to work with .NET projects can be painful, because it's hard to setup, foreign, and can frustrate developers.

You have a few options:

• Sass: Native Ruby + Sass
  • Pro: Fastest server compilation
  • Pro: Able to use latest versions of Sass
  • Con: Massive hassle to get up and running
  • Con: Every server or workstation needs ruby setting up
  • Con: Harder for .NET devs to solve Ruby/integration problems
• Sass: Ruby .NET port like [IronRuby][5] + Sass
  • Pro: SLOW server compilation (Frontend Devs will complain!)
  • Pro: May not be able to use latest versions of Sass
  • Pro: Slightly easier to setup than Native Ruby
  • Con: Every server or workstation needs ruby setting up
  • Con: Harder for .NET devs to solve Ruby/integration problems
• Sass: Extend [.NET Bundling][8] with [BundleTransformer][7] + Sass
  • Pro: (Uses IronRuby) SLOW server compilation (Frontend Devs will complain!)
  • Pro: (Uses IronRuby) May not be able to use latest versions of Sass
  • Pro: (Uses IronRuby) Slightly easier to setup than Native Ruby
  • Con: Every server or workstation needs ruby setting up
  • Con: Harder for .NET devs to solve Ruby/integration problems
• Sass or LESS: Visual Studio plugin like [Mindscape Workbench][4]
  • Pro: Easy to get started
  • Pro: Fast compiling
  • Con: Every developer working with Sass styles needs an IDE plugin
  • Con: Can't quickly change styles on the server - requires local re-processing
• LESS: .NET port like [DotLessCSS][6]
  • Pro: Fast server compilation
  • Pro: Very easy to setup
  • Pro: Comfortable to C# .NET devs
  • Pro: No IDE/workstation/server requirements - include it in the web app itself
  • Con: Hasn't got the versatility of SASS/Compass, and can't always guarantee latest LESS.JS syntax compatibility
• Sass: Virtualise linux+Ruby with [Vagrant][9]
  • Pro: Not as horrible to setup as you might think
  • Pro: Fast!!
  • Pro: Latest Frontend tools (Sass, Compass etc), updated with linux package manager
  • Con: Initial Setup may be difficult for non-linux users
  • Con: Environment requirements now involve hosting a VM
  • Con: VM may have scalability/maintenance issues

In my opinion, LESS using [DotLessCSS][6] is the best choice for your typical web development project, for reasons stated above.

A couple of years ago, I found [DotLessCSS][6] to have annoying bugs and limitations, but using [DotLessCSS][6] again in 2012 on a few projects, I'm very happy with the setup. I haven't introduced pain to my developers by using Sass/Ruby and get most of the value out of LESS. Best of all, no IDE or workstation requirements.

[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/

---

I just wrote a Visual Studio Add-in with detailed instructions including screenshots on how to get Sass going for Visual Studio. Check it out here - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

---

Its not SASS but you could take a look at our Less Css for .NET port. Compass looks really interesting though, and I think something like this for Less would be a great addition.

---

I just found this yesterday, it looks quite promising, aside from sass/scss it will handle autominification of JS (not CSS - yet) and combining of files. One thing that I'm hoping is for someone out there to create a VS plugin for editing of sass/scss files. What I did find problematic was that when you have an error in your sass/scss code you only find it doing testing or inspecting of the generated CSS files. I haven't put it through all its paces, but so far so good.

https://github.com/xpaulbettsx/SassAndCoffee

---

I originally answered this question here.

#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

참고URL : https://stackoverflow.com/questions/796788/using-sass-with-asp-net