Pass SASS variable to image URL

Question

I am using the following CSS code to generate a baseline background on my website during development:

html { 
    background-image: url(http://basehold.it/i/24/777777);
}

I would like to pass a SASS variable of $base-line-height into the URL, so it works like this:

html { 
    background-image: url(http://basehold.it/i/$base-line-height/777777);
}

But I keep getting an error when compiling. Is there a way I can do this?

Thanks

Mike

@cimmanon marking a question as duplicate without a link to the original question is the most non-constructive thing one can do — Kevvv, Mar 07 '19 at 18:14

score 6 · Accepted Answer · answered Aug 27 '15 at 21:03

6

html { 
    background-image: url(http://basehold.it/i/#{$base-line-height}/777777);
}

answered Aug 27 '15 at 21:03

sbeliv01

score 1 · Answer 2 · answered Aug 27 '15 at 21:05

1

You can do it by using single or double quotes:

html { 
    background-image: url('http://basehold.it/i/'+$base-line-height+'/777777');
}

answered Aug 27 '15 at 21:05

fanfavorite

2 Answers2