CSS Variables and String concatenation

Question

I'm trying to use CSS variables to generate a dynamic path.

Example:

:root {
  --fonts-path: "/path/to/font";
}

@font-face {
  font-family: "FontName";
  src: url(var(--fonts-path) + "/FontName-Light.woff") format('woff');
  font-weight: 100;
}

html {
  font-family: 'Metric', Arial, sans-serif;
}

This is failing with a not-found module 'var(--hpe-fonts-path', this is the webpack log:

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css
Module not found: Error: Cannot resolve module 'var(--fonts-path' in /Users/project-sample/src/theme
 @ ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css 6:83-114 6:234-265 6:403-434 6:576-607

Any pointers?

:root { --font-path: "/path/"; --font-file: "filename.woff"; } src: url(var(--font-path)var(--font-file)) format('woff') 🤔 — Mavelo
– Mavelo, Commented Jun 7 at 17:48

Community · Accepted Answer · 2017-05-23 12:14:43Z

12

I see some problems with your approach:

@font-face rules don't inherit CSS variables set on :root.
You can't use + to concatenate CSS strings. See string concatenation in css
Not all implementations support var() inside url() yet.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 12, 2016 at 18:46

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jules Colle · Accepted Answer · 2023-04-20 17:05:39Z

12

You can combine a variable with a unit like this:

:root {
  --twenty: 20;
}
.box {
  width: calc( var(--twenty) * 1px );
  height: calc( var(--twenty) * 1px );
}

<div class="box" style="background:red;"></div>

answered Apr 20, 2023 at 17:05

Jules Colle

12k9 gold badges67 silver badges74 bronze badges

1 Comment

3DartBlade Jan 23 at 21:08

You are a hero, it works like a charm! Thank you!

gtamborero · Accepted Answer · 2021-12-09 23:40:04Z

5

Try incluiding the url inside the variable, This works in a background context, but not sure if it does inside font-face

:root { 
--url:url("https://picsum.photos/id/1/200/300"); 
}

.box { 
background:var(--url); 
}

answered Dec 9, 2021 at 23:40

gtamborero

3,25232 silver badges30 bronze badges

Comments

Kantharis · Accepted Answer · 2017-12-13 14:04:33Z

2

A similar issue is described in this post:

CSS native variables not working in media queries

where the user tries to use a variable inside a @font-face rule.

As described in the accepted answer (https://stackoverflow.com/a/40723269/4879632) you cannot use variables inside of rules, because the variables are inherited by :root (html) child elements. @ Rules (font faces, media queries, etc) are not elements, so they do not inherit from the root. Thus, you cannot reference a variable from there.

answered Dec 13, 2017 at 14:04

Kantharis

1,9162 gold badges15 silver badges22 bronze badges

Comments

Abhishek Bhardwaj · Accepted Answer · 2023-07-12 06:10:36Z

1

You Should Do it like this to concat some variable using after value in css variable

:root{
  --scroll:0;
  --scrollunit:1deg;
}

.someclass{

    rotate:calc(var(--scroll) * var(--scrollunit));

}

https://codepen.io/abhishek-bhardwaj/pen/VwVyrmb

edited Jul 12, 2023 at 6:10

answered Jul 12, 2023 at 6:08

Abhishek Bhardwaj

113 bronze badges

Comments

Adrian Mole · Accepted Answer · 2022-01-07 13:07:34Z

0

You can't concatenate variable in CSS (refer here):

Since you can't concatenate in CSS (aside from the content property), CSS variables can not be concatenated. This means, for example, you can't combine a CSS variable that is a number with a unit.
// No version of this will work 
div {
  --height: 100;
  height: var(--height) + 'px';
}

edited Jan 7, 2022 at 13:07

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Jan 4, 2022 at 7:16

Jadvani Chetan

172 bronze badges

Collectives™ on Stack Overflow

CSS Variables and String concatenation

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related