CODEWITHSUNDEEP
css
Michal Cholewiński
Michal Cholewiński

Reputation: 464

Property or variable in css file

is there any possibility to use any properties/env-variable in css file. In my css file I have following part:

 background: #F6F6F6 url("http://localhost:3000/images/cropped_logo_baga_black.png") no-repeat center;

and now I want to have base url in any external config file to be able to do sth like this

 background: #F6F6F6 url("${BASE_URL}/images/cropped_logo_baga_black.png") no-repeat center;

Thanks in advance for any help

Upvotes: 1

Views: 90

Answers (2)

episch
episch

Reputation: 484

yes you can use in css "var" to do that.

:root {
   --base-url: http://localhost:3000;
}
.yourclass{
   background: #F6F6F6 url("var(--base-url)/images/cropped_logo_baga_black.png") no-repeat center;
}

moz dev: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

can i use: https://caniuse.com/#search=var

Upvotes: 1

Rednael
Rednael

Reputation: 370

No, there is no real way of having variables in CSS.

You might be able to (mis)use the attr() function though.

a:after {
    content: " (" attr(href) ")";
}

More info here: https://www.w3schools.com/cssref/func_attr.asp

Otherwise, you might want to take a look at CSS Preprocessors like: Sass (http://sass-lang.com/) or Less.js (http://lesscss.org/).

More info on various preprocessors here: https://www.sitepoint.com/6-current-options-css-preprocessors/

Upvotes: 0

Related Questions