programing

ASP와 함께 SAS를 사용합니다.그물

testmans 2023. 4. 25. 22:03
반응형

ASP와 함께 SAS를 사용합니다.그물

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

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

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

그런 다음 ASP에서 .sass/.scss 파일을 컴파일합니다.NET 프로젝트에는 Web Essential, Web Workbench, SassC, Sass를 통한 몇 가지 다른 툴이 있습니다., 컴퍼스, 새스앤드커피요


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


Web Workbench는 구문 강조 표시, 인텔리전스 및 SCSS 파일 편집에 유용한 기타 항목을 추가하는 Visual Studio의 또 다른 플러그인입니다.또한 코드를 일반 CSS 또는 최소 CSS로 컴파일할 수 있습니다.내부적으로 Ruby Sass 컴파일러의 랩 버전을 사용했습니다.


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


Lipsass 라이브러리는 Sass CSS 프리 컴파일러의 C++ 포트입니다(아직 개발 중입니다).원래 버전은 루비로 작성되었지만, 이 버전은 효율성과 휴대성을 목적으로 합니다.이 라이브러리는 가볍고 단순하며 구축이 용이하며 다양한 플랫폼 및 언어와 통합하기 위해 노력합니다.

Lipsass 라이브러리 주변에는 다음과 같은 여러 포장지가 있습니다.

  • SassC: 명령줄 컴파일러(Windows에서 Sassc.exe를 가져오려면 MsysGit으로 SassC 소스를 컴파일해야 합니다.)
  • NSass: a입니다.그물 포장지입니다.
  • Node-Sass: Node.js에서 Libsass를 사용합니다.
  • 기타.

나침반은 이미지 스프라이팅과 같은 유용한 도우미를 많이 추가하는 Sass용 프레임워크이며 SCSS/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서버측 Javascript 플랫폼) 및 (서버측 Javascript 플랫폼) »gulp.js태스크 러너 노드 패키지)와 함께 사용할 수 있습니다.gulp-sass(루비 SAS의 빠른 C 포트인 libsass를 gulp 구현하기 위한 노드 패키지입니다.)

이런 튜토리얼을 시작할 수 있습니다.

번들을 선호하십니까?Bundle Transformer는 이제 libass를 사용하여 고속 컴파일을 지원합니다.

Node와 Gulp을 사용해야 하는 이유는 다음과 같습니다.

  • 노드는 현재 Frontend Tooling에서 널리 사용되고 있습니다.
    현재 많은 웹 개발자들이 프런트엔드 웹 개발 작업에 Node를 사용하고 있습니다.Grunt, Gulp, JSPM, Webpack, 또는 다른 어떤 것이든 지금 npm에 진행 중입니다.
    npm 패키지로 수행할 수 있는 작업은 다음과 같습니다.
    • Sass, Less, PostCSS 등으로 스타일을 컴파일할 수 있습니다.
    • Javascript, CSS, HTML 템플릿 등을 연결합니다.
    • JS의 다른 버전을 작성하고 ES6-7, Typescript, Cofefeescript를 ES5로 변환합니다.
    • 로컬 SVG 파일에서 아이콘 글꼴을 만듭니다.
    • js, css, SVG를 최소화합니다.
    • 이미지를 최적화합니다.
    • 고래를 구하세요
    • ...
  • 프로젝트에 대한 신규 개발자를 위한 간단한 설정입니다.
    프로젝트 설정이 요.package.json그리고요.gulpfile.js, 달리기 위해 필요한 것은 몇 가지 단계뿐입니다.
    • Node.js를 다운로드하여 설치합니다.
    • 려려를 실행합니다.npm install -g gulp 글로벌하게 꿀꺽 삼키다)
    • 려려를 실행합니다.npm install 프로젝트 패키지를 로컬에 저장)(프로젝트 패키지를 저장하십시오.)
    • 려려를 실행합니다.gulp taskname 어떻게 설정했느냐에 따라 다릅니다.gulpfile.js은 SAS, Javascript etc)taskname SAS, Javascript를 컴파일하는 작업을 실행합니다.
  • Visual Studio 2015 Visual Studio 2015에서 합니다.
    믿거나 말거나 VS2015는 이제 모든 명령줄을 처리할 수 있습니다!

워크플로우와 관련하여 몇 가지 일반적인 옵션이 있습니다.

  • 개발자가 컴파일된 를 저장소에 커밋하도록 하십시오.
    이겁니다.개발자는 항상 실행되어야 합니다.gulp또는 실제 가동 가능한 자산을 컴파일하는 것과 유사합니다.

  • 빌드stage| 프로덕션 서버는 릴리스 전에 Gulp 태스크를 실행합니다.
    이 방법은 설정이 더 복잡할 수 있지만, 작업을 검증하고 컴파일되지 않은 소스에서 새로 구축해야 합니다.

다음은 후세를 위해 보관된 2012년의 오래된 답변입니다.

Ruby, Python 및 C#과 함께 일하는 프로젝트 선도 프런트엔드 개발자의 도움을 받습니다.NET, 저는 다음과 같은 생각을 합니다.

Sass & LESS입니다.

저는 새로운 프로젝트, 특히 멋진 [나침반 프레임워크][2]에서 [Sass][1]을 사용하는 것을 선호합니다.나침반은 훌륭한 작품이며, 제 공정에 많은 가치를 더합니다.Sass에는 훌륭한 커뮤니티, OK 설명서 및 강력한 기능 세트가 있습니다.Sass는 루비 라이브러리입니다.

Sass의 대안으로 [LESS][3]가 있습니다.구문과 기능은 비슷하지만 커뮤니티가 더 작고 설명서가 약간 더 우수합니다.JS 라이브러리를 줄입니다.

CSS 레벨 4 기능을 지원하는 Sass가 잘 개발되었기 때문에 사람들은 시간이 지남에 따라 Sass로 이동하는 경향이 있습니다.그러나 LESS는 여전히 완벽하게 사용할 수 있으며, 사용하기에 충분한 가치를 쉽게 추가할 수 있습니다.

ASP에서 Sass/LES를 사용합니다.NET 프로젝트입니다.

저는 Sass를 사용하는 것을 선호하지만, Ruby/Sass를 함께 사용할 수 있습니다.NET 프로젝트는 설정 및 외부 작업이 어렵고 개발자를 좌절시킬 수 있기 때문에 어려움이 따를 수 있습니다.

몇 가지 옵션이 있습니다.

  • Sass: 네이티브 루비 + Sass입니다.
    • 찬성: 가장 빠른 서버 컴파일입니다.
    • 장점: 최신 버전의 Sass를 사용할 수 있습니다.
    • 단점: 시작과 실행이 매우 번거롭습니다.
    • 단점: 모든 서버 또는 워크스테이션에 루비 설정이 필요합니다.
    • 단점: 더 어렵습니다.NET은 루비/통합 문제를 해결하기 위해 개발되었습니다.
  • 새스: 루비입니다.[IronRuby][5] + Sass와 같은 NET 포트입니다.
    • 찬성: 서버 컴파일 속도가 느립니다(프론트엔드 개발자가 불만을 제기할 것입니다!
    • 찬성: 최신 버전의 Sass를 사용하지 못할 수 있습니다.
    • 장점: Native Ruby보다 설정하기가 약간 쉽습니다.
    • 단점: 모든 서버 또는 워크스테이션에 루비 설정이 필요합니다.
    • 단점: 더 어렵습니다.NET은 루비/통합 문제를 해결하기 위해 개발되었습니다.
  • Sass: [를 확장합니다.[BundleTransformer][7] + Sass를 포함한 NET 번들링][8]입니다.
    • 찬성: (IronRuby 사용) 느린 서버 컴파일(프런트엔드 개발자가 불만을 제기합니다!)
    • 찬성: (IronRuby 사용) 최신 버전의 Sass를 사용하지 못할 수 있습니다.
    • 장점: (IronRuby 사용) Native Ruby보다 설정하기가 약간 쉽습니다.
    • 단점: 모든 서버 또는 워크스테이션에 루비 설정이 필요합니다.
    • 단점: 더 어렵습니다.NET은 루비/통합 문제를 해결하기 위해 개발되었습니다.
  • Sass or LESS: [Mindscape Workbench][4]와 같은 Visual Studio 플러그인입니다.
    • 장점: 쉽게 시작할 수 있습니다.
    • 찬성: 컴파일이 빠릅니다.
    • 단점: Sass 스타일로 작업하는 모든 개발자는 IDE 플러그인이 필요합니다.
    • 단점: 서버의 스타일을 빠르게 변경할 수 없습니다. 로컬 재처리 필요
  • 줄임: .NET 포트는 [DotLess]와 같습니다.CSS][6]입니다.
    • 찬성: 서버를 빠르게 컴파일합니다.
    • 장점: 매우 쉽게 설정할 수 있습니다.
    • 장점: C#에 적합합니다.NET이 개발됩니다.
    • 찬성: IDE/워크스테이션/서버 요구사항 없음 - 웹 앱 자체에 포함시킵니다.
    • 단점: SAS/Compass의 다기능성을 갖추고 있지 않으며 항상 최신 LESS를 보장할 수는 없습니다.JS 구문 호환성입니다.
  • Sass: [Vagrant][9]로 Linux+Ruby를 가상화하십시오.
    • 찬성: 생각만큼 설정하기에 나쁘지 않습니다.
    • 찬성: 빠릅니다!!
    • Pro: 최신 Frontend 도구(Sass, Compass 등), Linux 패키지 매니저로 업데이트되었습니다.
    • 단점: Linux가 아닌 사용자의 경우 초기 설정이 어려울 수 있습니다.
    • 단점: 이제 환경 요구사항에는 VM 호스팅이 포함됩니다.
    • 단점: VM에 확장성/유지 관리 문제가 있을 수 있습니다.

제 생각에는 [DotLess]를 덜 사용하는 것 같습니다.위에서 설명한 이유로 CSS][6]는 일반적인 웹 개발 프로젝트에 가장 적합한 선택입니다.

몇 년 전, 저는 [DotLess]를 발견했습니다.CSS][6] 성가신 버그와 제한이 있지만 [DotLess]를 사용합니다.CSS][6]는 2012년에도 몇 가지 프로젝트에 대해 만족하고 있습니다.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 애드인을 작성했습니다. Visual Studio에서 Sass를 사용할 수 있는 방법에 대한 스크린샷도 포함되어 있습니다.여기를 확인하십시오 - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

SAS는 아니지만 Less CSS for를 볼 수 있습니다.NET 포트입니다.나침반은 정말 흥미로워 보이는데, 레스에 이런 게 더 좋을 것 같아요.

어제 이것을 발견했는데, 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

언급URL : https://stackoverflow.com/questions/796788/using-sass-with-asp-net 입니다.

반응형