在 Windows 上通过 Visual Studio C# 和 ASP.NET 使用 Compass
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1214494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Compass on Windows with Visual Studio C# and ASP.NET
提问by Chris Marisic
Has anyone done any development of Compass for CSS/SASS in a standard C# ASP.NET environment?
有没有人在标准的 C# ASP.NET 环境中为 CSS/SASS 开发过 Compass ?
Is there a single distribution I can just download that's ready to go for Windows or do I need install every piece of the equation and build compass myself?
是否有我可以下载的单个发行版,它可以用于 Windows 还是我需要安装每个等式并自己构建指南针?
Are there any plugins that make developing with Compass friendlier with VS2008 such as automagical handling of Compass/SASS in builds, syntax highlighting, and/or intellisense support?
是否有任何插件可以使 Compass 与 VS2008 的开发更加友好,例如构建中 Compass/SASS 的自动处理、语法突出显示和/或智能感知支持?
If there aren't any VS IDE plugins what are the best options for a standalone text editor for handling coding in Compass?
如果没有任何 VS IDE 插件,那么在 Compass 中处理编码的独立文本编辑器的最佳选择是什么?
采纳答案by Etienne
To complete the last answers, you can install Web Workbench, a plugin for Visual Studio 2010 wich add syntax highlighting, intellisenceand some other stuff for the SASS language (SCSS syntax only).
要完成最后的答案,您可以安装Web Workbench,这是一个用于 Visual Studio 2010 的插件,它为 SASS 语言(仅 SCSS 语法)添加了语法突出显示、智能和其他一些内容。
If you prefer using Compass and/or some other tools to compile your CSS, you should disable the built-in compiler. I listed some other SASS compilers here: Using SASS with ASP.NET.
如果您更喜欢使用 Compass 和/或其他一些工具来编译您的 CSS,您应该禁用内置编译器。我在这里列出了其他一些 SASS 编译器:将 SASS 与 ASP.NET 一起使用。
To disable the built-in compiler: select the .scss file in Solution Explorer, go to the Properties window and delete the text from the Custom Tool box.
要禁用内置编译器:在解决方案资源管理器中选择 .scss 文件,转到“属性”窗口并从“自定义工具”框中删除文本。
Since Web Workbench 3 you can now manage more easily what you want to compile with this plugin. See the Mindscape > Web Workbench Settings menu item.
从 Web Workbench 3 开始,您现在可以更轻松地管理要使用此插件编译的内容。请参阅 Mindscape > Web Workbench 设置菜单项。
回答by Chris Marisic
Getting started with Compass,
指南针入门,
First yes I have to install Ruby and the compass source and compile up my version of compass I followed the instructions on Compass's Wiki Getting Started.
首先是的,我必须安装 Ruby 和指南针源并编译我的指南针版本,我按照指南针的 Wiki入门指南进行了操作。
After getting Compass and all it's dependencies installed and built I created my first project.
在安装和构建 Compass 及其所有依赖项后,我创建了我的第一个项目。
compass -f blueprint project-name
Which creates a default project with compass for the blueprint css framework, currently there's a bug in compass with the creation of the grid.png file in the images directory for compass so you need to copy the original grid.png from the source folder
它为蓝图 css 框架创建了一个带有指南针的默认项目,目前指南针存在一个错误,在指南针的图像目录中创建 grid.png 文件,因此您需要从源文件夹中复制原始 grid.png
C:\Ruby\lib\ruby\gems.8\gems\chriseppstein-compass-0.8.10
\frameworks\blueprint\templates\project
Or similarly located file depending on where you installed everything. One of the most important changes IMO for working with compass on asp.net is to change the SASS CACHE directive of compass. The SASS CACHE creates a bunch of temporary folders in your project directory which probably would have poor outcomes if they ended under source control. So open up config.rb and add this line
或类似位置的文件,具体取决于您安装所有内容的位置。IMO 在 asp.net 上使用指南针的最重要更改之一是更改指南针的 SASS CACHE 指令。SASS CACHE 在您的项目目录中创建了一堆临时文件夹,如果它们在源代码控制下结束,可能会产生不良结果。所以打开 config.rb 并添加这一行
sass_options = {:cache_location =>
"#{Compass.configuration.project_path}\tmp\sass-cache"}
Make sure to note the escaped backslashs.
请务必注意转义的反斜杠。
After this I modified the names of the folders that compass uses for how I wanted them named inside the config.rb and started getting to it with SASS and Compass. I recommend watching the hour long introduction to compass video it's very helpful and I learned alot from it: Watch the screen cast.
在此之后,我修改了 Compass 使用的文件夹的名称,我希望它们在 config.rb 中命名,并开始使用 SASS 和 Compass 访问它。我建议观看长达一小时的指南针介绍视频,它非常有帮助,我从中学到了很多:观看屏幕投射。
One of the things which this showed me was how to set compass to watch for file system changes and automagic compile the sass to css. By using
这向我展示的一件事是如何设置指南针以监视文件系统更改并自动将 sass 编译为 css。通过使用
compass -w
This is working real well for me, just make sure you keep your css files checked out or turn them off read only if they're under source control if your project doesn't support concurrent checkouts.
这对我来说非常有效,只要确保您的 css 文件保持检出状态,或者如果您的项目不支持并发检出,则仅当它们处于源代码控制之下时将它们关闭。
For editing I'm using SciTE that's included with Ruby by default for the config.rb files or just the editor window in VS2008. For Sass I came across a big list on the HAML website. jEdit with highlighting syntax file for SASS was what I ended up using after trying a few. I'd still like to find a VS plugin for syntax highlighting so I don't need to use another editor but jEdit is definitely getting the job done.
对于编辑,我使用 Ruby 中默认包含的 SciTE,用于 config.rb 文件或仅用于 VS2008 中的编辑器窗口。对于 Sass,我在HAML 网站上看到了一个很大的列表。带有突出显示 SASS 语法文件的 jEdit 是我尝试了几次后最终使用的。我仍然想找到一个用于语法高亮显示的 VS 插件,所以我不需要使用另一个编辑器,但 jEdit 绝对可以完成工作。
回答by Doff3n
I wanted to add another alternative here. If you just want to ensure that compass builds the sass files and includes the css files when you build your ASP.net project you can add the following to your project(csproj) file under the project section:
我想在这里添加另一种选择。如果您只想确保在构建 ASP.net 项目时 Compass 构建 sass 文件并包含 css 文件,您可以将以下内容添加到项目部分下的项目 (csproj) 文件中:
<Target Name="AfterBuild" Condition="'$(Configuration)' == 'Release' ">
<Exec Command="compass compile --output-style compressed --force" />
<ItemGroup>
<Content Include="Styles\*.css" />
</ItemGroup>
</Target>
<Target Name="AfterCompile" Condition=" '$(Configuration)' == 'Debug' ">
<Exec Command="compass compile" />
<ItemGroup>
<Content Include="Styles\*.css" />
</ItemGroup>
</Target>
The first Target is for Release and will also compress the css, the other one is for Debug.
第一个 Target 用于 Release 并且也会压缩 css,另一个用于 Debug。
If you want to customize paths add a config.rb to the project root folder:
如果要自定义路径,请将 config.rb 添加到项目根文件夹:
css_dir = "Content"
sass_dir = "Content/Sass"
This all of course requires compass and ruby to be installed and to be in the path of your machine.
当然,这一切都需要安装指南针和 ruby 并使其位于您的机器路径中。
回答by Chris Marisic
My answer is a bit antiquated. Before following my original answer, I would recommend exploring the Nuget package SassAndCoffee. The full details can be found here.
我的回答有点过时了。在遵循我的原始答案之前,我建议您探索 Nuget 包SassAndCoffee。可以在此处找到完整的详细信息。
How does it work?
SassAndCoffee embeds the original compilers in the DLL as (Sass 3.2.0 and CoffeeScript 1.1.0 as of this writing) and uses IronRuby and Jurassic respectively to execute the compilers against your source.
Why is this better than [SOMEOTHERPROJECT]?
No external processes are executed You don't have to install Ruby or node.js It's in NuGet so you don't have to fiddle with web.config Files are cached and are rebuilt as-needed.
它是如何工作的?
SassAndCoffee 将原始编译器嵌入到 DLL 中(在撰写本文时为 Sass 3.2.0 和 CoffeeScript 1.1.0),并分别使用 IronRuby 和 Jurassic 来针对您的源代码执行编译器。
为什么这比 [SOMEOTHERPROJECT] 更好?
No external processes are executed You don't have to install Ruby or node.js It's in NuGet so you don't have to fiddle with web.config Files are cached and are rebuilt as-needed.