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

Posted by jlampstack
jlampstack
23,932 Points

Using interpolation as a @mixin() parameter in SASS

Is it possible to use interpolation for a mixin parameter? For example lets say we want to create a parameter for a background image. Here is an example of what I'm trying to do.

  1. Path to images

    $path-img    :     "../img/";

  2. Create Mixin.... Note use of interpolation

    @mixin myMixin($img) {
height: 300px;
width: 300px;
background: url('#{$path-img}#{$img}') no-repeat center;
background-size: cover;
}

  3. Include mixin

    .some-div {
  @include myMixin($img: picture.jpg);
}

1 Answer

Flor Antara
Flor Antara
12,372 Points
Flor Antara
Flor Antara
12,372 Points

Hi jaycode,

Sure it is possible.

Just make sure you define your image with quotes, so the path is correctly formatted.

Like:

@include myMixin( $img: "picture.jpg" );
jlampstack
jlampstack
23,932 Points

Great! It works. The quotes around "picture.jpg" made the difference.

I was confused because without the .jpg you don't need the "quote" marks around picture.