Skip to content

Instantly share code, notes, and snippets.

@navgarcha
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save navgarcha/9427461 to your computer and use it in GitHub Desktop.
Save navgarcha/9427461 to your computer and use it in GitHub Desktop.
.broken{background-size:100%;background-image:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0%,#000),color-stop(100%,#fff));background-image:-webkit-linear-gradient(left,#000,#fff);background-image:-moz-linear-gradient(left,#000,#fff);background-image:-o-linear-gradient(left,#000,#fff);background-image:linear-gradient(left,#000,#fff)}
.working{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0%,#000),color-stop(100%,#fff));background:-webkit-linear-gradient(left,#000,#fff);background:-moz-linear-gradient(left,#000,#fff);background:-o-linear-gradient(left,#000,#fff);background:linear-gradient(left,#000,#fff)}
/* line 7, ../../../../src/sass/test/test.scss */
.broken {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(left, #000000, #ffffff);
background-image: -moz-linear-gradient(left, #000000, #ffffff);
background-image: -o-linear-gradient(left, #000000, #ffffff);
background-image: linear-gradient(left, #000000, #ffffff);
}
/* line 12, ../../../../src/sass/test/test.scss */
.working {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(left, #000000, #ffffff);
background: -moz-linear-gradient(left, #000000, #ffffff);
background: -o-linear-gradient(left, #000000, #ffffff);
background: linear-gradient(left, #000000, #ffffff);
}
@import "compass";
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
$experimental-support-for-svg: true;
// Removes SVG background-image statement
.broken {
@include background-image(linear-gradient(left, #000, #fff));
}
// Works as intended
.working {
@include background(linear-gradient(left, #000, #fff));
}
@GoalSmashers
Copy link

Can I see CSS instead of SCSS?

@navgarcha
Copy link
Author

Sorry, updated^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment