使用Visual Studio C#和ASP.NET在Windows上使用Compass

有没有人在标准的C#ASP.NET环境下完成Compass for CSS / SASS的开发?

是否有一个单一的发行版,我可以下载,准备去Windows?还是我需要安装每一个方程式的一部分,并build立自己的指南针?

有什么插件可以使Compass更友好地用VS2008进行开发,如构buildCompass / SASS的自动处理,语法突出和/或智能感知支持?

如果没有任何VS IDE插件,在Compass中处理编码的独立文本编辑器的最佳select是什么?

要完成最后的答案,您可以安装Web Workbench ,Visual Studio 2010插件,为SASS语言添加语法高亮intellisence和其他一些内容(仅限SCSS语法)。

如果您更喜欢使用Compass和/或其他工具来编译您的CSS,则应该禁用内置编译器。 我列出了一些其他的SASS编译器: 在ASP.NET中使用SASS 。

要禁用内置编译器,请执行以下操作:在解决方案资源管理器中选择.scss文件,转到“属性”窗口,然后从“自定义工具”框中删除文本。

从Web Workbench 3开始,您现在可以更轻松地管理您想要使用此插件编译的内容。 请参阅Mindscape> Web Workbench设置菜单项。

开始使用Compass,

首先是我必须安装Ruby和指南针来源并编译我的指南针版本我遵循Compass的Wiki 入门指南 。

获得指南针和所有它的依赖关系安装和建立我创建了我的第一个项目。

compass -f blueprint project-name 

它创建了蓝图css框架的指南针的默认项目,目前有一个罗盘的指南针的图像目录中创建的grid.png文件的错误,所以你需要从源文件夹中复制原始的grid.png

 C:\Ruby\lib\ruby\gems\1.8\gems\chriseppstein-compass-0.8.10 \frameworks\blueprint\templates\project 

或类似的位置文件,取决于你安装的一切。 在asp.net上使用指南针的最重要的变化之一就是改变指南针的SASS CACHE指令。 SASS CACHE在您的项目目录中创建了一堆临时文件夹,如果它们在源代码管理下结束,那么结果可能会很差。 所以打开config.rb并添加这一行

 sass_options = {:cache_location => "#{Compass.configuration.project_path}\\tmp\\sass-cache"} 

确保记下逃逸的反斜杠。

在此之后,我修改了指南针在config.rb中命名的文件夹的名称,并开始使用SASS和Compass。 我建议观看一小时的罗盘视频介绍,这是非常有用的,我从中学到了很多: 观看屏幕投射 。

这表明我的一件事情是如何设置指南针来观察文件系统的变化和自动编译sass到CSS。 通过使用

 compass -w 

这对我来说真的很好,只要确保你保持你的css文件被检出或关闭,只有当他们在源代码控制下,如果你的项目不支持并发检出。

对于编辑,我使用的是SciTE,它包含在Ruby中,默认情况下是config.rb文件,或者是VS2008中的编辑器窗口。 对于Sass,我在HAML网站上找到了一个大名单。 jEdit为SASS突出显示语法文件是我尝试了几个后最终使用的。 我仍然想找到一个VS插件的语法突出显示,所以我不需要使用另一个编辑器,但jEdit肯定会完成工作。

我的回答有点陈旧。 在遵循我的原始答案之前,我会推荐探索Nuget包SassAndCoffee。 完整的细节可以在这里找到 。

它是如何工作的?

SassAndCoffee将原始编译器嵌入到DLL中(本文中为Sass 3.2.0和CoffeeScript 1.1.0),分别使用IronRuby和Jurassic来针对您的源执行编译器。

为什么这比[其他项目]好?

 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. 

我想在这里添加另一个选择。 如果您只想确保指南针生成sass文件并在生成ASP.net项目时包含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> 

第一个目标是发布,也将压缩的CSS,另一个是调试。

如果要自定义路径,请将config.rb添加到项目根文件夹中:

 css_dir = "Content" sass_dir = "Content/Sass" 

这当然需要指南针和红宝石被安装并且在你的机器的路径上。