Multiple Code in a CSS Variable

Question

I think it's a easy question, but i found nothing in google which helps me.

I've the following code:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Now i use it in more than 1 CSS class. And when i want to change the box-sizing, i don't want to change it in all statements. So i want to use some CSS variable. But i don't find a example to define more than one statement in a CSS variable. Any solution?

What i've already tried:

@boxsizing: 
(
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
)

CSS and variables? There are no variables, constants or any other place-holding mechanisms in CSS. However, you can use the same rules on many selectors by grouping them with the comma-separator ,. — Zeta
– Zeta, Commented Nov 12, 2012 at 12:04
CSS don't support variables. See stackoverflow.com/questions/7247202/… — Matteus Hemström
– Matteus Hemström, Commented Nov 12, 2012 at 12:05
It depends the statement, you should be more specific. In CSS it's called media queries: w3.org/TR/css3-mediaqueries — MatthewK
– MatthewK, Commented Nov 12, 2012 at 12:05
Saw some code with variables. But now i know it was developed with LESS or something. Sorry for this stupid question :) — Michael Schmidt
– Michael Schmidt, Commented Nov 12, 2012 at 12:12

Sirko · Accepted Answer · 2012-11-12 12:05:27Z

3

Vanilla CSS does not use variables in the way you intend them to use.

For such behavior you need other tools to generate (valid) CSS out of dynamic code files. Examples include the following:

LESS
SASS

answered Nov 12, 2012 at 12:05

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

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

1 Comment

Michael Schmidt Over a year ago

Ah! Also heard about LESS. But never read an article about it! Thank you! +1 &, when i can, accepted.

Hubro · Accepted Answer · 2012-11-12 12:05:47Z

2

CSS has no such thing as variables. You can make your code more DRY by defining the same styles for several selectors, for instance:

.boxsizing, #my_element, div, a.foobar {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

answered Nov 12, 2012 at 12:05

Hubro

60.1k74 gold badges241 silver badges404 bronze badges

1 Comment

Michael Schmidt Over a year ago

Also tried. But anything doesn't work. So i want to start to develop with variables.

Bojangles · Accepted Answer · 2012-11-12 12:07:12Z

0

You need something like SCSS to do that.

edited Nov 12, 2012 at 12:07

Bojangles

102k50 gold badges175 silver badges209 bronze badges

answered Nov 12, 2012 at 12:05

Waqar Alamgir

9,9884 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

Multiple Code in a CSS Variable

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related