Have a variable in images path in Sass?

Question

I want to have one variable that contains the root path to all my images in my CSS file. I can't quite figure out if this is possible in pure Sass (the actual web project is not RoR, so can't use asset_pipeline or any of that fancy jazz).

Here's my example that doesn't work. On compile it balks at first instance of variable in the background url property saying ("Invalid CSS after "..site/background": expected ")").

Defining the function to return the path:

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

Using the function:

body {
  margin: 0 auto;
  background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Any help would be appreciated.

score 230 · Accepted Answer · edited Nov 08 '14 at 02:07

230

Have you tried the Interpolation syntax?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

edited Nov 08 '14 at 02:07

steveax

17,527
6
44
59

answered Dec 22 '11 at 18:59

Wesley Murch

101,186
37
194
228

1

It does not work for me because CssVariablesProcessor does not process variables even if its set as preprocessor before CssDataUriPreProcessor – Alexey Jul 31 '14 at 08:53
3

Also works in quoted paths e.g. in the compass font-face mixin. `'#{$fontName}.ext', ..` – luukvhoudt Feb 12 '18 at 08:04
1

Yes, it is better to use in quoted path. Other wise it shows error in netbeans IDE. url("#{$get-path-to-assets}/site/background.jpg") – Pons Purushothaman Aug 02 '18 at 06:21

steveax · Answer 2 · 2014-11-08T02:06:21.460

104

No need for a function:

$assetPath : "/assets/images";

...

body {
  margin: 0 auto;
  background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

See the interpolation docs for details.

edited Nov 08 '14 at 02:06

answered Dec 22 '11 at 18:58

steveax

17,527
6
44
59

8

Definitely prefer the brevity with pointing directly to the variable – nikodaemus Apr 28 '15 at 15:23
if you are using it at an @import you need to add 'url(' and ')' to make the interpolation to work. More info at https://sass-lang.com/documentation/at-rules/import#plain-css-imports – Carlos Saltos Sep 21 '20 at 08:00

score 6 · Answer 3 · answered Mar 22 '13 at 17:15

6

Was searching around for an answer to the same question, but think I found a better solution: http://blog.grayghostvisuals.com/compass/image-url/

Basically, you can set your image path in config.rb and you use the image-url() helper

answered Mar 22 '13 at 17:15

NerdCowboy

293
2
9

score 3 · Answer 4 · answered Aug 02 '18 at 06:26

Adding something to the above correct answers. I am using netbeans IDE and it shows error while using url(#{$assetPath}/site/background.jpg) this method. It was just netbeans error and no error in sass compiling. But this error break code formatting in netbeans and code become ugly. But when I use it inside quotes like below, it show wonder!

url("#{$assetPath}/site/background.jpg")

score 1 · Answer 5 · answered Jul 17 '20 at 10:14

1

We can use relative path instead of absolute path:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }

answered Jul 17 '20 at 10:14

Aarji George

599
4
8

Have a variable in images path in Sass?

5 Answers5

Linked

Related