Sử dụng SASS với ASP.NET [đã đóng]

Tôi đang tìm cách sử dụng SASS (Syntacmatic Awesome StyleSheets) từ gói Ruby HAML trong môi trường ASP.NET. Tốt nhất, tôi muốn biên dịch các tệp SASS thành CSS để trở thành một phần liền mạch của quá trình xây dựng.

Những cách tốt nhất để tích hợp này là gì? Ngoài ra, có những công cụ tạo CSS nào khác phù hợp hơn với môi trường .NET không?

Để có trải nghiệm làm việc tốt hơn trong Visual Studio, bạn có thể cài đặt phiên bản mới nhất của Web Essential đang bắt đầu hỗ trợ Sass (cú pháp SCSS).
Ngoài ra, bạn có thể cài đặt Sassy Studio hoặc Web Workbench .

Sau đó, để biên dịch các tệp .sass / .scss trong dự án ASP.NET của bạn, có một số công cụ khác nhau: thông qua Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential là một plugin đầy đủ tính năng cho Visual Studio, thực sự mang lại trải nghiệm tốt hơn cho tất cả nội dung Front-End. Phiên bản mới nhất đang bắt đầu hỗ trợ Sass (cú pháp SCSS). Bên trong nó sử dụng Libsass để biên dịch SCSS sang CSS.

Web Workbench là một plugin khác cho Visual Studio, bổ sung thêm tính năng đánh dấu cú pháp, nội dung và một số công cụ hữu ích khác để chỉnh sửa tệp SCSS. Nó cũng có thể biên dịch mã của bạn thành CSS bình thường hoặc rút gọn. Bên trong nó đã sử dụng một phiên bản bao bọc của trình biên dịch Ruby Sass.

Sassy Studio : một plugin khác cho Visual Studio. Ít tính năng hơn nhưng nhẹ hơn nhiều.

Các thư viện Libsass là C ++ cảng CSS precompiler Sass (vẫn còn đang phát triển). Phiên bản gốc được viết bằng Ruby, nhưng phiên bản này dành cho hiệu quả và tính di động. Thư viện này cố gắng trở nên nhẹ nhàng, đơn giản, dễ xây dựng và tích hợp với nhiều nền tảng và ngôn ngữ khác nhau.

Có một số trình bao bọc xung quanh thư viện Libsass:

• SassC : trình biên dịch dòng lệnh (trên Windows bạn cần biên dịch mã nguồn của SassC bằng MsysGit để lấy sassc.exe).
• NSass : một trình bao bọc .Net.
• Node-Sass : để sử dụng Libsass trên Node.js.
• Vân vân.

La bàn là một khung công tác cho Sass bổ sung rất nhiều trình trợ giúp hữu ích (như viết ảnh) và cũng có thể biên dịch SCSS / Sass của bạn. Nhưng bạn cần cài đặt Ruby trên mỗi môi trường phát triển nơi bạn cần biên dịch các kiểu của mình.

SassAndCoffee là một gói bổ sung hỗ trợ biên dịch và thu nhỏ SCSS / Sass, thông qua một số DLL và cấu hình. Ưu điểm của nó so với trình biên dịch Web Workbench là nó được tích hợp sẵn trong giải pháp Visual Studio của bạn: bạn không cần cài đặt plugin trên mọi môi trường phát triển. Nhận xét: SassAndCoffee không thường xuyên được cập nhật và vì nó sử dụng IronRuby để bao bọc trình biên dịch Ruby chính thức, bạn có thể gặp một số vấn đề về hiệu suất. Bạn có thể cài đặt phiên bản mới nhất thông qua gói Nuget .

Dự án la bàn có một trình biên dịch sẽ biên dịch sass của bạn thành css. Nó được xây dựng để chạy trên windows, nhưng nó không được thử nghiệm tốt trên nền tảng đó. Nếu bạn tìm thấy bất kỳ lỗi nào liên quan đến nền tảng, tôi sẽ sẵn lòng giúp bạn sửa chúng.

Bạn có thể tìm thấy la bàn tại đây: http://github.com/chriseppsein/compass

Vào năm 2015, lời khuyên hiện tại của tôi là sử dụng Node.js(nền tảng Javascript phía máy chủ) và gulp.js(gói nút chạy tác vụ), cùng với gulp-sass(gói nút để gulp triển khai libsass - một cổng C nhanh của Ruby SASS).

Bạn có thể bắt đầu với một hướng dẫn như thế này .

Thích gói? Bundle Transformer cuối cùng cũng sử dụng libsass, cho phép biên dịch tốc độ cao.

Đây là lý do tại sao tôi nghĩ bạn nên sử dụng Node và Gulp.

• Node hiện đang phổ biến cho Frontend Tooling
  Nhiều nhà phát triển web hiện đang sử dụng Node một nền tảng cho các nhiệm vụ phát triển web frontend. Cho dù đó là Grunt, Gulp, JSPM, Webpack hay thứ gì khác - nó đang diễn ra ngay bây giờ trong npm .
  Những điều bạn có thể làm với gói npm:
  • Biên dịch các kiểu với Sass, Less, PostCSS và nhiều hơn nữa
  • Kết hợp các mẫu Javascript, CSS, HTML và hơn thế nữa
  • Viết các phiên bản khác của JS và transpile ES6-7, Typescript, Coffeescript sang ES5
  • Tạo iconfonts từ các tệp SVG cục bộ
  • Giảm thiểu js, css, SVG
  • Tối ưu hóa hình ảnh
  • Bảo vệ cá voi
  • ...
• Thiết lập đơn giản hơn cho các nhà phát triển mới cho một dự án
  Khi bạn đã thiết lập dự án của mình package.jsonvà gulpfile.js, tất cả những gì thường cần để chạy là một vài bước:
  
  • Tải xuống và cài đặt Node.js
  • Chạy npm install -g gulp (cài đặt gulp trên toàn cầu)
  • Chạy npm install (cài đặt các gói dự án cục bộ)
  • Chạy gulp taskname (Tùy thuộc vào cách bạn thiết lập tên tác vụ của mình gulpfile.jssẽ chạy một tác vụ biên dịch SASS, Javascript, v.v. của bạn)
• Được hỗ trợ bởi Visual Studio 2015
  Tin hay không, VS2015 hiện có thể xử lý tất cả các nội dung dòng lệnh cho bạn!

Bạn có một số tùy chọn điển hình về quy trình làm việc:

• Yêu cầu các nhà phát triển của bạn cam kết mã đã biên dịch của họ vào kho lưu trữ
  Downside: Các nhà phát triển phải luôn chạy gulphoặc tương tự để biên dịch các tài sản sẵn sàng sản xuất

• Máy chủ xây dựng | giai đoạn | sản xuất của bạn chạy các tác vụ gulp trước khi phát hành
  Cách này có thể phức tạp hơn để thiết lập, nhưng có nghĩa là công việc được xác thực và xây dựng mới từ nguồn không biên dịch.

Dưới đây là câu trả lời cũ của tôi từ năm 2012, được lưu giữ cho hậu thế:

Từ một nhà phát triển giao diện người dùng hàng đầu của Dự án làm việc với Ruby, Python và C # .NET, tôi có những suy nghĩ sau:

Sass & LESS

Tôi thích sử dụng [Sass] [1] trong một dự án mới, đặc biệt là với [khuôn khổ La bàn] [2] tuyệt vời. La bàn là một công việc tuyệt vời và bổ sung nhiều giá trị cho quá trình của tôi. Sass có một cộng đồng tuyệt vời, tài liệu OK và một bộ tính năng mạnh mẽ. Sass là một thư viện Ruby.

Một thay thế cho Sass, là [LESS] [3]. Nó có cú pháp và tính năng tương tự, nhưng một cộng đồng nhỏ hơn và tài liệu tốt hơn một chút. ÍT một thư viện JS.

Theo xu hướng, mọi người có xu hướng hướng tới Sass theo thời gian vì nó được phát triển tốt, thậm chí hỗ trợ các tính năng CSS Cấp 4. Nhưng LESS vẫn hoàn toàn có thể sử dụng được và dễ dàng thêm đủ giá trị để đảm bảo sử dụng nó.

Khi sử dụng Sass / LESS trong một Dự án ASP.NET

Mặc dù tôi thích sử dụng Sass hơn, nhưng việc để Ruby / Sass làm việc với các dự án .NET có thể khá khó khăn, vì nó khó thiết lập, ngoại lai và có thể khiến các nhà phát triển thất vọng.

Bạn có một vài lựa chọn:

• Sass: Native Ruby + Sass
  • Pro: Biên dịch máy chủ nhanh nhất
  • Chuyên nghiệp: Có thể sử dụng các phiên bản mới nhất của Sass
  • Con: Rất nhiều rắc rối để thiết lập và chạy
  • Con: Mọi máy chủ hoặc máy trạm đều cần thiết lập ruby
  • Con: Khó hơn cho các nhà phát triển .NET để giải quyết các vấn đề về Ruby / tích hợp
• Sass: Cổng Ruby .NET như [IronRuby] [5] + Sass
  • Pro: Biên dịch máy chủ CHẬM (Frontend Devs sẽ phàn nàn!)
  • Pro: Có thể không sử dụng được phiên bản mới nhất của Sass
  • Pro: Dễ cài đặt hơn một chút so với Native Ruby
  • Con: Mọi máy chủ hoặc máy trạm đều cần thiết lập ruby
  • Con: Khó hơn cho các nhà phát triển .NET để giải quyết các vấn đề về Ruby / tích hợp
• Sass: Mở rộng [.NET Bundling] [8] với [BundleTransformer] [7] + Sass
  • Pro: (Sử dụng IronRuby) Biên dịch máy chủ CHẬM (Frontend Devs sẽ phàn nàn!)
  • Pro: (Sử dụng IronRuby) Có thể không sử dụng được các phiên bản mới nhất của Sass
  • Pro: (Sử dụng IronRuby) Dễ thiết lập hơn một chút so với Native Ruby
  • Con: Mọi máy chủ hoặc máy trạm đều cần thiết lập ruby
  • Con: Khó hơn cho các nhà phát triển .NET để giải quyết các vấn đề về Ruby / tích hợp
• Sass hoặc LESS: Plugin Visual Studio như [Mindscape Workbench] [4]
  • Pro: Dễ dàng bắt đầu
  • Pro: Biên dịch nhanh
  • Con: Mọi nhà phát triển làm việc với kiểu Sass đều cần một plugin IDE
  • Con: Không thể nhanh chóng thay đổi kiểu trên máy chủ - yêu cầu xử lý lại cục bộ
• LESS: Cổng .NET như [DotLessCSS] [6]
  • Pro: Biên dịch máy chủ nhanh
  • Chuyên nghiệp: Rất dễ cài đặt
  • Chuyên nghiệp: Thoải mái với các nhà phát triển C # .NET
  • Pro: Không yêu cầu IDE / máy trạm / máy chủ - đưa nó vào chính ứng dụng web
  • Con: Không có tính linh hoạt của SASS / La bàn và không phải lúc nào cũng đảm bảo khả năng tương thích cú pháp LESS.JS mới nhất
• Sass: Virtualise linux + Ruby với [Vagrant] [9]
  • Chuyên nghiệp: Không quá kinh khủng khi thiết lập như bạn nghĩ
  • Pro: Nhanh chóng !!
  • Pro: Các công cụ Frontend mới nhất (Sass, Compass, v.v.), được cập nhật với trình quản lý gói linux
  • Con: Thiết lập ban đầu có thể khó đối với người dùng không phải Linux
  • Con: Các yêu cầu về môi trường hiện liên quan đến việc lưu trữ một máy ảo
  • Con: VM có thể có vấn đề về khả năng mở rộng / bảo trì

Theo tôi, LESS sử dụng [DotLessCSS] [6] là lựa chọn tốt nhất cho dự án phát triển web điển hình của bạn, vì những lý do đã nêu ở trên.

Vài năm trước, tôi thấy [DotLessCSS] [6] có những lỗi và hạn chế khó chịu, nhưng khi sử dụng lại [DotLessCSS] [6] vào năm 2012 trong một vài dự án, tôi rất hài lòng với việc thiết lập. Tôi đã không giới thiệu nỗi đau cho các nhà phát triển của mình bằng cách sử dụng Sass / Ruby và nhận được hầu hết giá trị từ LESS. Hơn hết, không có IDE hoặc yêu cầu máy trạm.

[1]: http://sass-lang.com/ [2]: http://compass-style.org/ [3]: http://lesscss.org/ [4]: http: // www. mindcapehq.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/

Tôi vừa viết một Phần bổ trợ Visual Studio với hướng dẫn chi tiết bao gồm ảnh chụp màn hình về cách để Sass sử dụng Visual Studio. Hãy xem nó tại đây - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Nó không phải là SASS nhưng bạn có thể xem qua cổng Less Css cho .NET của chúng tôi . La bàn trông thực sự thú vị, và tôi nghĩ một cái gì đó như thế này cho Less sẽ là một bổ sung tuyệt vời.

Tôi vừa tìm thấy điều này ngày hôm qua, nó trông khá hứa hẹn, ngoài sass / scss, nó sẽ xử lý tự động hóa JS (chưa phải CSS) và kết hợp các tệp. Một điều mà tôi hy vọng là ai đó có thể tạo một plugin VS để chỉnh sửa các tệp sass / scss. Điều tôi thấy có vấn đề là khi bạn gặp lỗi trong mã sass / scss của mình, bạn chỉ thấy nó đang thử nghiệm hoặc kiểm tra các tệp CSS được tạo. Tôi đã không vượt qua tất cả các bước của nó, nhưng cho đến nay rất tốt.

https://github.com/xpaulbettsx/SassAndCoffee

Tôi ban đầu đã trả lời câu hỏi này ở đây .

#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