大佬教程收集整理的这篇文章主要介绍了指南针精灵生成太多的CSS类，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
正如你在这里看到的http://compass-style.org/help/tutorials/spriting/
@import "my-icons/*.png"; @include all-my-icons-sprites;
会产生：
.my-icons-sprite,.my-icons-delete,.my-icons-edit,.my-icons-new,.my-icons-save { BACkground: url('/images/my-icons-s34fe0604ab.png') no-repeat; } .my-icons-delete { BACkground-position: 0 0; } .my-icons-edit { BACkground-position: 0 -32px; } .my-icons-new { BACkground-position: 0 -64px; } .my-icons-save { BACkground-position: 0 -96px; }
如果您看到我使用这种方式：< div class =“my-icons-sprite my-icons-delete”>< / div>
我希望Compass生成此代码：
.my-icons-sprite { BACkground: url('/images/my-icons-s34fe0604ab.png') no-repeat; } .my-icons-delete { BACkground-position: 0 0; } .my-icons-edit { BACkground-position: 0 -32px; } .my-icons-new { BACkground-position: 0 -64px; } .my-icons-save { BACkground-position: 0 -96px; }
除了每个新图像,它还会添加背景和背景位置.引起太多选择者.
有配置吗？
谢谢
$icons: sprite-map("icons/*.png");
i{
BACkground: $icons;
display: inline-block; // or block
}
@each $i in sprite_names($icons){
.icn-#{$i}{
BACkground-position: sprite-position($icons,$i);
@include sprite-dimensions($icons,$i);
}
}
此示例使用< i>< / i> -tag,其中包含前缀icn-的类与图标文件夹中单独的.png文件的文件名相结合.像这样：
<i class="icn-delete"></i>
生成的CSS如下所示：
i { BACkground: url('/path/to/generated/spritemap/my-icons-xxxxxxxxxxx.png'); display: inline-block; } .icn-delete { BACkground-position: 0 0; height: 32px; // assuming the width is 32px width: 32px; // assuming the height is 32px } .icn-edit{ BACkground-position: 0 -32px; height: 32px; // assuming the width is 32px width: 32px; // assuming the height is 32px } .icn-new { BACkground-position: 0 -64px; height: 32px; // assuming the width is 32px width: 32px; // assuming the height is 32px } ... .. .
尽管如此,我还没有弄清楚如何将其与Compass’ Magic Selectors结合使用.
当您需要不同的状态时,Magic SELEctors工作得非常好(：hover,：active,：target).您所要做的就是将文件命名为：filename_state.png(delete_hover.png,delete_active.png等). Compass’Magic SELEctors然后自动生成css：hover,：active和：target(delete：hover,delete_hover和delete-hover).通过这种方式,您可以自由选择如何表示状态变化.
在我的第一个示例中,如果您的文件名具有hover / active状态的后缀,则代码段只会像这样写入CSS：
.icn-edit_hover { BACkground-position: -32px -32px; height: 32px; width: 32px; }
我真的很喜欢打印这个：
.icn-edit:hover,.icn-edit_hover,.icn-edit-hover{ BACkground-position: 0 -32px; height: 32px; width: 32px; }
像传统的Compass’ Magic Selectors一样.任何的想法？
以上是大佬教程为你收集整理的指南针精灵生成太多的CSS类全部内容，希望文章能够帮你解决指南针精灵生成太多的CSS类所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。