使用 T4 模板生成 CSS 精灵图

.t4SpriteVar { background-image: url("SpriteVar.png")}
.t4accept {background-position:0px -418px;width: 48px;height: 48px;}
.t4accept.disabled {background-position:-48px -418px;width: 48px;height: 48px;} 

我还需要提到，创建精灵和 CSS 的基本代码/算法不是我的作品。您可以在 Code Project 上找到原始版本：Image Sprites and CSS Classes Creator。我采用了 V2.0 的源代码，并修改了它以匹配 T4 的逻辑，因为原始版本是一个控制台应用程序。如果您认为，可以给瑞士的 AlexCode 的杰作至少投“优秀”一票。他的代码中最棒的是它简单、快速、简短。这就是我选择它的原因，因为在 T4 文件中编写和调试长而复杂的代码有点困难。 

T4 文件的另一个属性是它们不能从外部参数化。我们有 VS 提供的文件属性窗口，但我们无法走得太远。因此，我们必须在一个文件中设置参数，这就是为什么我将代码库与参数化 T4 文件分开。让我们来看一个参数化 .tt 文件，看看每个设置的作用。根据 AlexCode 的模式，设置必须作为属性放在 SCEngineOptions 类中： 

.SourceDirectory = T4Folder+"\\Images16"; 

此属性定义源图像所在的文件夹。'T4Folder' 是 .tt 文件所在的文件夹，这使我们能够为源图像文件夹设置相对路径。

.CssClassPrefix = "t4";  

建议为定义图像在精灵中位置的 CSS 类名添加一个前缀，以防止名称与手动创建的普通 CSS 类（例如 .t4label 而不是 .label）发生冲突。

.BinPackingLevel = 1; 

图像定位算法的代码编号。目标是使精灵文件大小最小。AlexCode 的代码中有三种算法，我原封不动地采纳了它们。

1 - 基本矩形（最快）

2 - Cygon packager（平均大小）

3 - ArevaloRectanglePacker（可能是最小尺寸）。 

有人可能会认为，“最佳”就是最好的，但事实并非如此。这就是为什么您有这个设置，以便您可以选择。适合特定情况的最佳算法取决于图片的大小、尺寸的变化和图片的数量。糟糕的是，找到每个图片包最小精灵的唯一方法就是自己运行算法。除非我们的图片大小相同。在这种情况下，1. 基本算法肯定最好。 

.FilesName = Path.GetFileNameWithoutExtension(T4FileName);

生成的 .png 精灵、CSS、HTML、.cs 文件、C# 静态类和 CSS 基本类的名称。如您所见，在这种情况下，它来自 .tt 文件名。然而，您可以用任何静态名称覆盖它。

.ImageVariants.Add(new ImageVariant() {
            GreyScale = true,            //is gray scaled image?
            Width = 0,                   //Resized image width, 0 means image won't resize
            Height = 0,
            CssClassName= "disabled",    //additional CSS class for this variant
            DisplayName = "Disabled"     //Column title in demo/test html 
});  

为了更进一步，我创建了一个扩展，允许我们通过图像转换从源图像创建图像变体。这解决了常见问题，即工具箱图标有多个视觉状态：可点击（彩色）、禁用（灰色）和按下（高亮）。有时，我们希望使用不同大小的图像，如 48x48、32x32 或 16x16。由于上面所示的定义，每个图标都会有一个灰度版本。您还可以为每个变体分配自定义 CSS 类。它的巨大优势在于，可以通过 CSS 类的存在或不存在轻松定义视觉状态（启用或禁用）。 

已启用（左图标）： <span class="image24 t4icon t4SpriteVar t4clock"></span> 

已禁用（右图标）： <span class="image24 t4icon t4SpriteVar t4clock disabled"></span> 

如果您想进行多次转换，可以将多个 CSS 类放入 CssClassName 中。这就是我制作底部右侧四个“时钟”的普通 128x128 / 禁用 128x128 / 普通 24x24 / 禁用 24x24 图标的方式： 

.ImageVariants.Add(new ImageVariant() {
            GreyScale = true,
            Width = 24,
            Height = 24,
            CssClassName= "image24 disabled",
            DisplayName = "24x24 dis."
            });  

这将使它们变灰，将它们调整为 24x24，并创建两个类以区分原始 128x128 和普通 24x24 图像。   

您可以在 ImageVariants 集合中放入多个变体定义。有关更多示例，请参阅“SpriteVar.tt”中的设置，其中定义了创建多个尺寸和灰度版本。

其余的参数化 T4 文件包含生成 CSS、.cs 和概述 HTML 文件的部分。   

我们将 T4SpriteMaker.ttinlude 文件放在我们想要的位置。然后，我们必须确保在参数化 T4 文件中设置链接，以通过相对路径访问 .ttinclude 文件。

<#@ include file="..\path\T4SpriteMaker.ttinclude"#>

如果它与 .tt 文件在同一个文件夹中，那么我们什么都不用做。include 语句将使用默认值。

之后，我们创建图像文件夹并将所需内容放入其中。我们为 .tt 文件命名，因为这将是生成文件的默认名称（例如，Sprite32.tt，因为我们在本演示中使用 .FilesName 的值）。

在参数化和保存 .tt 文件后，其他文件将被生成。 

namespace MvcApp.Content.Images 
{
	public static class Sprite32
	{
		public const string t4accept = "t4accept";
		public const string t4add = "t4add";
		public const string t4block = "t4block";
		public const string t4chart_pie = "t4chart_pie";
		public const string t4users = "t4users";
		//…
	}
}    

在 .css 中，您将找到位置代码（稍作压缩）。 

.t4Sprite32{background-image: url("Sprite32.png")}
.t4accept{background-position:0px -162px;width:32px;height:32px;}
.t4accept.disabled{background-position:-32px -162px;width:32px;height:32px;}
.t4add{background-position:-64px -162px;width:32px;height:32px;}
.t4add.disabled{background-position:-96px -162px;width:32px;height:32px;} 

.html 文件将包含概述页面和标记中使用的示例。表格的标题将包含 .DisplayName 参数的值。例如，在右侧的图片中，.DisplayName = "Disabled" 设置导致了灰度图标列的标题为“Disabled”。   

（您还会在演示应用程序中找到几个额外的 .tt 文件，可用于测试目的。这些是为了应对诸如错误的图像文件、空的图像文件夹或缺少图像文件夹等情况（SpriteInvalidImages、SpriteEmptyDir、SpriteWrongPath）而创建的。）  

演示应用程序还包含在 ASP.NET MVC 4 框架中的一个可能用法，以及自定义的 Html 和 Ajax 链接辅助方法。 一些方法调用变体： 

@Html.SPActionLink(SpriteVar.t4block, "Block button", "Index")
@Html.SPActionLink(SpriteVar.t4block, "Block button", "Index", ButtonMode.Disabled)
@Html.SPActionLink(SpriteVar.t4block, "Block button", "Index", "Home")
@Html.SPActionLink(SpriteVar.t4block, "Block button", "Index", "Home", ButtonMode.Disabled)
@Html.SPActionLink(SpriteVar.t4block, "Block button", "Index", "Home", null, null)
@Html.SPActionLink(SpriteVar.t4block, "Block button", "Index", "Home", null, null, 
                   ButtonMode.Disabled)

@Html.SPActionLink(SpriteVar.t4help, "Help button", "Index", "Home", null, null, 
                   ButtonMode.Default | ButtonMode.IconOnly)
@Html.SPActionLink(SpriteVar.t4help, "Help button", "Index", "Home", null, null, 
                   ButtonMode.Disabled | ButtonMode.IconOnly)  

 值得关注的点