Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andrew Thompson
Andrew Thompson
28,063 Points
Posted by Andrew Thompson
Andrew Thompson
28,063 Points

Sass with WordPress Development

Hello everyone,

I am currently developing a custom WordPress theme and decided to take a leap of faith and use Sass. It has all been going well so far, however, I have hit a bit of a problem with a mixin in my code.

If any you have taken Guil Hernandez course on Modular CSS with Sass you may be familiar with the mixin. 

// Image replacement

@mixin img-replace($img, $w, $h, $disp: block) {
  background-image: url('#{$path--rel}/#{$img}');
  background-repeat: no-repeat;
  width: $w;
  height: $h;
  display: $disp;
}

the problem I am having is with the sass $path--rel variable. I can't get it to point to the img folder in the theme files. I have put a few examples of what I have tried below, however, they haven't worked. 

$path--rel      : "<?php bloginfo('template_directory');?>/img";

$path--rel      : "wp-content/themes/my-theme/img";

Any help would be appreciated! FYI not sure if this would be an issue, I am working locally with MAMP Pro and CodeKit.

Thanks

Andy

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

The only thing I can think of that maybe the path rel value should go in as an argument when you call your mixin? rather than as a separate variable?

Also try 

background-image: url('#{$path--rel}');

as your style rule in the mixing. I'm not sure what the {#img} does but since you're already attaching the img in the path in your background image rule it might be picking that up as part of the path in your CSS output file. :-)

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I'll be honest here, I don't like this solution in wordpress, or any dynamic cms type of site. As you found out, you can't use php inside of css or sass. Which makes me wonder how you're also getting the $img variable filled? Is it relying on the image be uploaded to be named a very specific thing?

I'm not entirely sure of the context of this mixin, but I would be inclined to move the background-image to an inline style in your php template. Than you can use php to retrieve the url...yay! I know that inline styles are not favorable, but I have absolutely no problem using them for dynamic css rules, which you'll see a lot of plugins do. That's my opinion on how to do this.