从SCSS创建数据URI

尼尔

我试图将SVG处理成数据URI,这将使我的代码更容易维护,而不是大量代码。

$white:rgb(255,255,255);

background:$white inline_image("/images/select-arrows.svg") no-repeat 92% center;

这是我必须要做的,我正在使用modernizr进行后备,但是我正在手动使用在线转换器,正在运行安装了指南针的scss。这些已被代码包2编译。

指南针配置:

require 'compass/import-once/activate'

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :compressed
color_output = false

以下是我当前的标记:

background:$white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTAgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiM0NzRDNEMiIHBvaW50cz0iMTAsOS43NDYgNS4wNTgsMTYgMCw5Ljc0NiAiLz4NCjxwb2x5Z29uIGZpbGw9IiM0NzRDNEMiIHBvaW50cz0iMCw2LjI5MSA1LDAgMTAsNi4yOTEgIi8+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat 92% center;

任何反馈将是巨大的!

马修·沙利(Matthew Scharley)

快到了

background:$white inline-image("select-arrows.svg") no-repeat 92% center;

确保将您images_dir的设置正确config.rb指向./images(默认设置),并且您应该一切顺利。

另外,请查看这篇文章,以了解Compass和带有后备PNG的内联SVG的一些巧妙技巧(是的,您仍应使用后备)。SVG尚未得到普遍支持。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章