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

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/

답변

#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