从SCSS创建数据URI [英] Creating a Data URI's from SCSS

问题描述

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

I am trying to get a SVG to process into a DATA URI, It would make my code a lot easier to maintain, rather than reams of code.

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

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

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

This is what I have to far, I am using modernizr for fallback however I am manually using an online converter, I am running scss with compass installed. These are being complied by 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;

任何反馈都很棒！

推荐答案

请确保在config.rb中正确设置了images_dir，使其指向./images(这是默认设置)，您应该会很好.

Make sure your images_dir is set correctly in your config.rb to point to ./images (which is the default) and you should be good to go.

此外，查看此信息查看Compass和带有后备PNG的内联SVG的一些巧妙技巧(是的，您仍应使用后备). SVG尚未得到普遍支持.

Also, check out this post to see some neat tricks with Compass and inline'd SVG's with fallback PNG's (yes, you should be using fallbacks still). SVG's isn't anywhere near supported universally yet.

这篇关于从SCSS创建数据URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！