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

Posted 2023-03-06

【中文标题】在 Windows 上通过 Visual Studio C# 和 ASP.NET 使用 Compass

【英文标题】：Using Compass on Windows with Visual Studio C# and ASP.NET

【发布时间】：2010-11-15 21:58:47

【问题描述】：

有没有人在标准 C# ASP.NET 环境中为 CSS/SASS 开发过 Compass？

是否有一个发行版我可以直接下载并准备好在 Windows 上运行，还是我需要安装所有方程式并自己构建指南针？

是否有任何插件可以让 Compass 与 VS2008 的开发更加友好，例如在构建中自动处理 Compass/SASS、语法高亮和/或智能感知支持？

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

【问题讨论】：

这也是一个答案，但由于某种原因被删除：dontcodetired.com/blog/post/…

【参考方案1】：

指南针入门，

首先是的，我必须安装 Ruby 和指南针源代码并编译我的指南针版本，我按照指南针的 Wiki Getting Started 上的说明进行操作。

在安装和构建 Compass 及其所有依赖项后，我创建了我的第一个项目。

compass -f blueprint project-name

它为蓝图 css 框架创建了一个带有 compass 的默认项目，目前在 compass 中存在一个错误，即在 compass 的图像目录中创建 grid.png 文件，因此您需要从源中复制原始 grid.png文件夹

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

或类似位置的文件，具体取决于您安装所有内容的位置。 IMO 在 asp.net 上使用 compass 的最重要更改之一是更改 compass 的 SASS CACHE 指令。 SASS CACHE 在您的项目目录中创建了一堆临时文件夹，如果它们在源代码控制下结束，可能会产生不良结果。所以打开 config.rb 并添加这一行

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

请务必注意转义的反斜杠。

在此之后，我修改了 compass 使用的文件夹的名称，以便我希望它们在 config.rb 中命名，并开始使用 SASS 和 Compass。我建议观看长达一小时的指南针介绍视频，它非常有帮助，我从中学到了很多：Watch the screen cast。

这向我展示的一件事是如何设置 compass 以监视文件系统更改并将 sass 自动编译为 css。通过使用

compass -w

这对我来说真的很好用，只要确保你的 css 文件被签出，或者如果你的项目不支持并发签出，则在源代码控制下将它们关闭为只读。

对于编辑，我使用默认情况下包含在 Ruby 中的 SciTE 用于 config.rb 文件或仅用于 VS2008 中的编辑器窗口。对于 Sass，我在 HAML website 上发现了一个大列表。带有突出显示 SASS 语法文件的 jEdit 是我在尝试了几次后最终使用的。我仍然想找到一个用于语法高亮的 VS 插件，所以我不需要使用其他编辑器，但 jEdit 肯定能完成这项工作。

【参考方案2】：

我的回答有点过时了。在遵循我的原始答案之前，我建议您探索 Nuget 包 SassAndCoffee. The full details can be found here。

它是如何工作的？

SassAndCoffee 嵌入原版 DLL 中的编译器为 (Sass 3.2.0 和 CoffeeScript 1.1.0 自此 写作）并使用 IronRuby 和 侏罗纪分别执行 针对您的源代码的编译器。

为什么 这比 [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 还没有为 Compass 做好准备，Compass 实际上修补了 Sass 编译器来做额外的事情。这是 SassAndCoffee 将支持的下一个重要功能！

@PaulBetts Compass 集成仍在进行中吗？

【参考方案3】：

要完成最后的答案，您可以安装 Web Workbench，这是一个适用于 Visual Studio 2010 的插件，它为 SASS 语言添加了语法高亮、智能和其他一些东西（仅限 SCSS 语法）。

如果您更喜欢使用 Compass 和/或其他一些工具来编译 CSS，您应该禁用内置编译器。我在这里列出了一些其他的 SASS 编译器：Using SASS with ASP.NET。

要禁用内置编译器：在解决方案资源管理器中选择 .scss 文件，转到“属性”窗口并从“自定义工具”框中删除文本。

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

【讨论】：

我刚刚尝试使用 Compass .scss 文件，但在代码中遇到了 NoMethodError for a '>'。您是否让 Web Workbench 与 Compass 配合得很好？

我每天都将它与 Compass 编译器一起使用，它运行良好。你安装的是最新版本吗？您是否删除了文件属性中的自定义工具？您确定 VS 中没有其他插件会造成冲突吗？

【参考方案4】：

我想在这里添加另一种选择。如果您只想确保 compass 构建 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>

第一个 Target 用于 Release，也会压缩 css，另一个用于 Debug。

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

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

这当然需要安装 compass 和 ruby​​ 并在您的机器的路径中。

【讨论】：

唯一的缺点是这会减慢你的构建速度，即使它不需要编译，如果你没有大量的 SASS/SCSS 文件，可能影响不大