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

时间:2022-09-01 23:47:22

Has anyone done any development of Compass for CSS/SASS in a standard C# ASP.NET environment?

有没有人在标准c# ASP中为CSS/SASS开发过指南针。网络环境?

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?

在VS2008中,是否有任何插件可以使使用Compass开发变得更加友好,比如在构建中自动处理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中处理编码的独立文本编辑器的最佳选择是什么?

4 个解决方案

#1


6  

To complete the last answers, you can install Web Workbench, a plugin for Visual Studio 2010 wich add syntax highlighting, intellisence and some other stuff for the SASS language (SCSS syntax only).

为了完成最后的答案,您可以安装Web Workbench,这是Visual Studio 2010的一个插件,它为SASS语言添加了语法突出显示、intellisence和其他一些东西(仅针对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编译器:在ASP.NET中使用SASS。

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设置菜单项。

#2


6  

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和compass源代码,并按照compass Wiki上的说明编写我的compass版本。

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

它为blueprint css框架创建了一个带有compass的默认项目,目前在compass中有一个关于网格创建的错误。png文件在图像目录中的罗盘,所以你需要复制原始网格。来自源文件夹的png

C:\Ruby\lib\ruby\gems\1.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

或者类似地定位文件,这取决于您安装的位置。在asp.net中使用compass的最重要的更改之一是更改compass的SASS缓存指令。SASS缓存在项目目录中创建了一堆临时文件夹,如果这些文件夹在源代码控制下结束,结果可能会很糟糕。所以打开配置。加上这条线

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使用的文件夹的名称,以便在配置中指定它们的名称。然后开始用SASS和指南针。我建议看一小时的指南针视频介绍,这很有帮助,我从中学到了很多:看屏幕播放。

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

这向我展示了如何设置compass以监视文件系统的更改,以及如何自动将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。rb文件或VS2008中的编辑器窗口。对于Sass,我在HAML网站上看到了一个大列表。为SASS突出显示语法文件的jEdit是我尝试了几个之后使用的。我仍然想找到一个VS插件的语法突出显示,所以我不需要使用另一个编辑器,但jEdit确实完成了这项工作。

#3


2  

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.

SassAndCoffee将原始编译器嵌入到DLL中(本文编写时,Sass 3.2.0和coffecript 1.1.0),并分别使用IronRuby和Jurassic对源代码执行编译器。

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.

#4


2  

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:

我想在这里添加另一个选项。如果您只想确保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>

The first Target is for Release and will also compress the css, the other one is for Debug.

第一个目标是发布,也会压缩css,另一个是调试。

If you want to customize paths add a config.rb to the project root folder:

如果您想要定制路径,请添加配置。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.

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

#1


6  

To complete the last answers, you can install Web Workbench, a plugin for Visual Studio 2010 wich add syntax highlighting, intellisence and some other stuff for the SASS language (SCSS syntax only).

为了完成最后的答案,您可以安装Web Workbench,这是Visual Studio 2010的一个插件,它为SASS语言添加了语法突出显示、intellisence和其他一些东西(仅针对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编译器:在ASP.NET中使用SASS。

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设置菜单项。

#2


6  

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和compass源代码,并按照compass Wiki上的说明编写我的compass版本。

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

它为blueprint css框架创建了一个带有compass的默认项目,目前在compass中有一个关于网格创建的错误。png文件在图像目录中的罗盘,所以你需要复制原始网格。来自源文件夹的png

C:\Ruby\lib\ruby\gems\1.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

或者类似地定位文件,这取决于您安装的位置。在asp.net中使用compass的最重要的更改之一是更改compass的SASS缓存指令。SASS缓存在项目目录中创建了一堆临时文件夹,如果这些文件夹在源代码控制下结束,结果可能会很糟糕。所以打开配置。加上这条线

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使用的文件夹的名称,以便在配置中指定它们的名称。然后开始用SASS和指南针。我建议看一小时的指南针视频介绍,这很有帮助,我从中学到了很多:看屏幕播放。

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

这向我展示了如何设置compass以监视文件系统的更改,以及如何自动将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。rb文件或VS2008中的编辑器窗口。对于Sass,我在HAML网站上看到了一个大列表。为SASS突出显示语法文件的jEdit是我尝试了几个之后使用的。我仍然想找到一个VS插件的语法突出显示,所以我不需要使用另一个编辑器,但jEdit确实完成了这项工作。

#3


2  

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.

SassAndCoffee将原始编译器嵌入到DLL中(本文编写时,Sass 3.2.0和coffecript 1.1.0),并分别使用IronRuby和Jurassic对源代码执行编译器。

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.

#4


2  

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:

我想在这里添加另一个选项。如果您只想确保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>

The first Target is for Release and will also compress the css, the other one is for Debug.

第一个目标是发布,也会压缩css,另一个是调试。

If you want to customize paths add a config.rb to the project root folder:

如果您想要定制路径,请添加配置。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.

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