CSS 在 ASP.NET 中使用 SASS

Question

提问by Guemundur H

I'm looking into ways to use SASS(Syntactically Awesome StyleSheets) from the Ruby HAML package in an ASP.NET environment. Ideally, I would like compilation of SASS files into CSS to be a seamless part of the build process.

我正在寻找在 ASP.NET 环境中使用来自 Ruby HAML 包的SASS（Syntactically Awesome StyleSheets）的方法。理想情况下，我希望将 SASS 文件编译成 CSS 成为构建过程的无缝部分。

What are the best ways to this integration? Alternatively, are there other CSS-generation tools that are better suited for a .NET environment?

这种集成的最佳方法是什么？或者，是否还有其他更适合 .NET 环境的 CSS 生成工具？

Answer 1

回答by Etienne

For a better working experience in Visual Studio, you could install the last version of Web Essentialwhich is starting to support Sass (SCSS syntax).
Alternatively you could install Sassy Studioor Web Workbench.

为了在 Visual Studio 中获得更好的工作体验，您可以安装最新版本的Web Essential，它开始支持 Sass（SCSS 语法）。
或者，您可以安装Sassy Studio或Web Workbench。

Then to compile your .sass/.scss files in your ASP.NET project, there is some different tools: via Web Essential, Web Workbench, SassC, Sass.Net, Compass, SassAndCoffee...

然后要在 ASP.NET 项目中编译 .sass/.scss 文件，有一些不同的工具：通过Web Essential、Web Workbench、SassC、Sass.Net、Compass、SassAndCoffee...

Web Essentiala fully featured plugin for Visual Studio, which really give a better experience for all Front-End stuffs. The latest version is starting to support Sass (SCSS syntax). Internally it use the Libsass to compile the SCSS to CSS.

Web Essential是一个功能齐全的 Visual Studio 插件，它确实为所有前端的东西提供了更好的体验。最新版本开始支持 Sass（SCSS 语法）。它在内部使用 Libsass 将 SCSS 编译为 CSS。

Web Workbenchis another plugin for Visual Studio that add syntax highlighting, intellisence and some other useful stuff for editing SCSS files. It can also compile your code into normal or minified CSS. Internally it used a wrapped version of the Ruby Sass compiler.

Web Workbench是 Visual Studio 的另一个插件，它添加了语法突出显示、智能和其他一些用于编辑 SCSS 文件的有用内容。它还可以将您的代码编译成普通或缩小的 CSS。它在内部使用了 Ruby Sass 编译器的包装版本。

Sassy Studio: another plugin for Visual Studio. Less featured but much lighter.

Sassy Studio：Visual Studio 的另一个插件。功能较少，但重量轻得多。

The Libsass libraryis C++ port of the Sass CSS precompiler (still in development). The original version was written in Ruby, but this version is meant for efficiency and portability. This library strives to be light, simple, and easy to build and integrate with a variety of platforms and languages.

该Libsass库是萨斯CSS预编译器（开发中仍然）的C ++接口。原始版本是用 Ruby 编写的，但此版本旨在提高效率和可移植性。该库力求轻量、简单且易于构建并与各种平台和语言集成。

There are several wrappers around the Libsass library:

Libsass 库有几个包装器：

SassC: a command line compiler (on Windows you need to compile the source of SassC with MsysGit to get the sassc.exe).
NSass: a .Net wrapper.
Node-Sass: to use Libsass on Node.js.
etc.

SassC：命令行编译器（在 Windows 上，您需要使用 MsysGit 编译 SassC 的源代码以获取 sassc.exe）。
NSass：.Net 包装器。
Node-Sass：在 Node.js 上使用 Libsass。
等等。

Compassis a framework for Sass that add a lot of useful helpers (like image spriting) and can also compile your SCSS/Sass. But you need to install Ruby on each development environment where you need to compile your styles.

Compass是一个 Sass 框架，它添加了很多有用的助手（如图像精灵），还可以编译你的 SCSS/Sass。但是您需要在需要编译样式的每个开发环境中安装 Ruby。

SassAndCoffeeis a package that adds SCSS/Sass compilation and minification support, via some DLLs and configs. Its advantage over the Web Workbench compiler is it's self-contained into your Visual Studio solution: you don't need to install a plugin on every development environment. Remark: SassAndCoffee is not often updated, and because it use IronRuby to wrap the official Ruby compiler, you can get some performance issues. You can install the latest version via a Nuget package.

SassAndCoffee是一个通过一些 DLL 和配置添加 SCSS/Sass 编译和缩小支持的包。与 Web Workbench 编译器相比，它的优势在于它独立于您的 Visual Studio 解决方案：您无需在每个开发环境中安装插件。备注：SassAndCoffee 不经常更新，因为它使用 IronRuby 来封装官方的 Ruby 编译器，所以会出现一些性能问题。您可以通过Nuget 包安装最新版本。

Answer 2

回答by chriseppstein

The compass project has a compiler that will compile your sass to css. It's built to run on windows, but it is not well tested on that platform. If you find any platform related bugs, I'll gladly help you fix them.

compass 项目有一个编译器，可以将你的 sass 编译成 css。它是为在 Windows 上运行而构建的，但在该平台上没有经过很好的测试。如果您发现任何与平台相关的错误，我将很乐意帮助您修复它们。

Compass can be found here: http://github.com/chriseppsein/compass

指南针可以在这里找到：http: //github.com/chriseppsein/compass

Answer 3

回答by Phil Ricketts

In 2015, my current advice is to use Node.js(Server-side Javascript platform) and gulp.js(a task runner node package), along with gulp-sass(a node package for gulp implementing libsass- a fast C port of Ruby SASS).

在 2015 年，我目前的建议是使用Node.js（服务器端 Javascript 平台）和gulp.js（任务运行器节点包），以及gulp-sass（用于gulp实现libsass的节点包- Ruby SASS 的快速 C 端口）。

You can get started with a tutorial like this.

您可以从这样的教程开始。

Prefer Bundling? Bundle Transformernow finally uses libsass, enabling high-speed compilation.

更喜欢捆绑？Bundle Transformer现在终于使用了 libsass，实现了高速编译。

Here's why I think you should use Node and Gulp.

这就是我认为你应该使用 Node 和 Gulp 的原因。

Node is popular now for Frontend Tooling
Many web developers are now using Node a platform for frontend web development tasks. Whether it's Grunt, Gulp, JSPM, Webpack, or something else - it's happening right now in npm.
Things you can do with npm packages:
- Compile styles with Sass, Less, PostCSS and many more
- Concatenate Javascript, CSS, HTML templates and more
- Write other versions of JS and transpile ES6-7, Typescript, Coffeescript to ES5
- Create iconfonts from local SVG files
- Minify js, css, SVG
- Optimise images
- Save the whales
- ...
Simpler setup for new developers to a project
Once you've set up your project package.jsonand gulpfile.js, all it usually takes to get running is a few steps:
- Download and install Node.js
- Run npm install -g gulp(installs gulp globally)
- Run npm install(installs project packages locally)
- Run gulp taskname(Depending on how you've set up your gulpfile.jstaskname will run a task that compiles your SASS, Javascript etc)
Supported by Visual Studio 2015
Believe it or not, VS2015 can now handle all the commandline stuff for you!

Node 现在很流行前端工具
许多 Web 开发人员现在使用 Node 作为前端 Web 开发任务的平台。无论是 Grunt、Gulp、JSPM、Webpack 还是其他东西 - 它现在正在npm 中发生。
你可以用 npm 包做的事情：
- 使用 Sass、Less、PostCSS 等编译样式
- 连接 Javascript、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 现在可以为您处理所有命令行内容！

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 gulpor 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.

让您的开发人员将他们编译的代码提交到存储库
缺点：开发人员必须始终运行gulp或类似的方式来编译生产就绪资产
您的 build|stage|production 服务器在发布之前运行 gulp 任务
这种方式设置起来可能更复杂，但意味着工作是从未编译的源代码中验证和构建的。

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

以下是我 2012 年的旧答案，为后人保留：

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/

从一个使用 Ruby、Python 和 C# .NET 的项目领先的前端开发人员那里，我有以下想法：
Sass & LESS
我更喜欢在一个新项目中使用 [Sass][1]，尤其是使用美妙的 [Compass 框架][2]。Compass 是一项伟大的工作，它为我的过程增加了很多价值。Sass 拥有强大的社区、良好的文档和强大的功能集。Sass 是一个 Ruby 库。
Sass 的替代方案是 [LESS][3]。它具有相似的语法和功能，但社区更小，文档略好。少一个 JS 库。
从趋势上看，随着时间的推移，人们倾向于转向 Sass，因为它发展良好，甚至支持 CSS Level 4 功能。但是 LESS 仍然完全可用，并且很容易增加足够的价值来保证使用它。
在 ASP.NET 项目中使用 Sass/LESS
虽然我更喜欢使用 Sass，但让 Ruby/Sass 与 .NET 项目一起工作可能会很痛苦，因为它很难设置、陌生，并且会让开发人员感到沮丧。
您有几个选择：
Sass：原生 Ruby + Sass
优点：最快的服务器编译
优点：能够使用最新版本的 Sass
缺点：启动和运行非常麻烦
缺点：每个服务器或工作站都需要 ruby 设置
缺点：.NET 开发人员更难解决 Ruby/集成问题
Sass：Ruby .NET 端口，如 [IronRuby][5] + Sass
优点：服务器编译慢（前端开发人员会抱怨！）
优点：可能无法使用最新版本的 Sass
优点：比 Native Ruby 更容易设置
缺点：每个服务器或工作站都需要 ruby 设置
缺点：.NET 开发人员更难解决 Ruby/集成问题
Sass：使用 [BundleTransformer][7] + Sass 扩展 [.NET Bundling][8]
优点：（使用 IronRuby）服务器编译慢（前端开发人员会抱怨！）
优点：（使用 IronRuby）可能无法使用最新版本的 Sass
优点：（使用 IronRuby）比 Native Ruby 更容易设置
缺点：每个服务器或工作站都需要 ruby 设置
缺点：.NET 开发人员更难解决 Ruby/集成问题
Sass 或 LESS：Visual Studio 插件，如 [Mindscape Workbench][4]
优点：易于上手
优点：快速编译
缺点：每个使用 Sass 样式的开发人员都需要一个 IDE 插件
缺点：无法在服务器上快速更改样式 - 需要本地重新处理
LESS：.NET 端口，如 [DotLessCSS][6]
优点：快速服务器编译
优点：非常容易设置
优点：对 C# .NET 开发者来说很舒服
优点：没有 IDE/工作站/服务器要求 - 将其包含在 Web 应用程序本身中
缺点：没有获得 SASS/Compass 的通用性，并且不能总是保证最新的 LESS.JS 语法兼容性
Sass：使用 [Vagrant][9] 虚拟化 linux+Ruby
优点：设置起来并不像你想象的那么可怕
亲：快！！
Pro：最新的前端工具（Sass、Compass 等），使用 linux 包管理器更新
缺点：初始设置对于非 Linux 用户来说可能很困难
缺点：环境要求现在涉及托管 VM
缺点：VM 可能存在可扩展性/维护问题
在我看来，出于上述原因，LESS 使用 [DotLessCSS][6] 是典型 Web 开发项目的最佳选择。
几年前，我发现 [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/

Answer 4

回答by Girish

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/

我刚刚编写了一个带有详细说明的 Visual Studio 插件，其中包括有关如何将 Sass 用于 Visual Studio 的屏幕截图。在这里查看 - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Answer 5

回答by Owen

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

它不是 SASS，但您可以查看我们的Less Css for .NET端口。不过，指南针看起来真的很有趣，我认为对于 Less 来说，像这样的东西会是一个很好的补充。

Answer 6

回答by Dan Doyon

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.

我昨天才发现这个，它看起来很有前途，除了 sass/scss 它将处理 JS 的自动缩小（不是 CSS - 但）和文件的组合。我希望有人能创建一个 VS 插件来编辑 sass/scss 文件。我确实发现有问题的是，当您的 sass/scss 代码中有错误时，您只会发现它在测试或检查生成的 CSS 文件。我还没有完成它的所有步骤，但到目前为止还不错。

https://github.com/xpaulbettsx/SassAndCoffee

Answer 7

回答by yfeldblum

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

CSS 在 ASP.NET 中使用 SASS

提问by Guemundur H

回答by Etienne

回答by chriseppstein

回答by Phil Ricketts

Sass & LESS

On using Sass/LESS in an ASP.NET Project

Sass & LESS

在 ASP.NET 项目中使用 Sass/LESS

回答by Girish

回答by Owen

回答by Dan Doyon

回答by yfeldblum

相关推荐

最近更新

标签

CSS 在 ASP.NET 中使用 SASS

提问by Guemundur H

回答by Etienne

回答by chriseppstein

回答by Phil Ricketts

Sass & LESS

On using Sass/LESS in an ASP.NET Project

Sass & LESS

在 ASP.NET 项目中使用 Sass/LESS

回答by Girish

回答by Owen

回答by Dan Doyon

回答by yfeldblum

相关推荐

你如何调试可打印的 CSS？

Chrome Web Developer 工具，实时 CSS 编辑不起作用，重置为默认值

CSS “vertical-align: middle” 在 Firefox 中与中间不对齐

CSS 底部渐变边框

相关推荐

最近更新

标签