search

nDmitry / grunt-autoprefixer

Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. Based on Autoprefixer.
MIT License
795 stars 60 forks source link

Post-Processing CSS that contains liquid variables #32

Closed justinmetros closed 10 years ago

justinmetros commented 10 years ago

Not sure if an actual issue, per say - but running into a situation with liquid variables in CSS. For example, in SCSS, variables are interpolated to get through the compiler: 

.class{ 
  background-image: url( #{"{{ 'my_image.jpg' | asset_url }}"} );
}

But then autoprefixer doesn't like it when it sees those variables, and throws an error on CSS like:

.class{ 
  background-image: url( {{ 'my_image.jpg' | asset_url }} );
}

Wondering if there are any known workarounds to get by this. Thanks in advance! Love this plugin!

Rowno commented 10 years ago

Couldn't you just put quotes around the URL?

.class { 
    background-image: url("{{ 'my_image.jpg' | asset_url }}");
}
justinmetros commented 10 years ago

That'll do it! Really need to be liberal with the quotes, the following gets it through the sass compiler and autoprefixer with no issues.

.class{
   background-image: url( "#{'{{ "my_image.jpg" | asset_url }}'}" );
}

Thank for your time!