How to define global variables in css

Question

I want to define global variables in one css file and use the variables in other css files.

Is this possible?

Global.css:

:root {
    --main-color: #192100;
    --main-background: #89b66b;
}

html, body {
    min-height: 100%;
    width: 100%;
    font-family: Arial;
    color: var(--main-color);
}

SomeFile.css:

.some-rule {
    display: table;
    border-radius: 12px;
    border: 4px solid var(--main-color);
    padding-left: 10px;
    padding-right: 10px;
    color: var(--main-color);
}

Html: (Global.css if referenced before SomeFile.css)

<link href="Global.css" rel="stylesheet" type="text/css" />
<link href="SomeFile.css" rel="stylesheet" type="text/css" />

no can do. you need a preprocessor like sass or less to achieve such a thing — giorgio
– giorgio, Commented Aug 18, 2017 at 13:30
recently i came across nicolasgallagher.com/custom-css-preprocessing — Praveen
– Praveen, Commented Aug 18, 2017 at 13:30
Why not just have a class of root that you just add to elements you want to have it on? — Pete
– Pete, Commented Aug 18, 2017 at 13:33

Reza Ramezanpour · Accepted Answer · 2017-08-18 13:37:29Z

1

You can't do that with CSS. Try A CSS Preprocessor like Less or Sass.

less.css sharing variables across files

SASS - use variables across multiple files

answered Aug 18, 2017 at 13:37

Reza Ramezanpour

64410 silver badges29 bronze badges

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

2 Comments

SteinTech Over a year ago

Ended up using @import for now. But I'll read more about Less and probably use that in the future

Alejandro Cotilla Over a year ago

@SteinTheRuler How did you use @import for this? Thanks.

Dmitry B. · Accepted Answer · 2017-08-18 13:30:57Z

0

CSS itself doesn't use variables. However, you can use another language like SASS or LESS

answered Aug 18, 2017 at 13:30

Dmitry B.

4361 gold badge4 silver badges12 bronze badges

1 Comment

giorgio Over a year ago

True, but check the browser compatibility table. You really don't want to use this just yet

Collectives™ on Stack Overflow

How to define global variables in css

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related