从 SCSS 创建数据 URI答案

【问题标题】：Creating a Data URI's from SCSS从 SCSS 创建数据 URI
【发布时间】：2014-04-14 21:43:35
【问题描述】：

我正在尝试将 SVG 处理为 DATA URI，这将使我的代码更易于维护，而不是大量代码。

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

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

这是我到目前为止所要做的，我正在使用modernizr 作为后备但是我手动使用在线转换器，我正在运行安装了指南针的scss。 codekit 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;

任何反馈都会很棒！

【问题讨论】：

标签： svg sass compass-sass data-uri

【解决方案1】：

Almost there:

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

确保您的images_dir 在您的config.rb 中正确设置为指向./images（这是默认设置），您应该一切顺利。

另外，check out this post 可以看到 Compass 和内联 SVG 与后备 PNG 的一些巧妙技巧（是的，你应该仍然使用后备）。 SVG 尚未得到普遍支持。

【讨论】：

很好，我想我没有考虑到目录，是的，mixin 看起来很不错！