CODEWITHSUNDEEP
css
Yasser Shaikh
Yasser Shaikh

Reputation: 47784

Declare a global CSS property ? Is this possible?

I have a very wierd question, I dont know wether if its possible in css or not

Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.

I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?

Is this even possible ?

.abc {
color:red;
}

.abc2 {
color:red;
}

.abc3 {
color:red;
}

.abc4 {
color:red;
}

.abc5 {
color:red;
}

Upvotes: 1

Views: 3325

Answers (7)

user26878437
user26878437

Reputation: 1

Nowadays you can do this with css custom properties (css variables), like so:

html {
  --my-color: red;
}

.abc {
  color: var(--my-color);
}

.abc2 {
  color: var(--my-color);
}

They must always start with a -- and you can put them on any element so that var()s inside that element resolve to that value.
Putting them on the root html object makes sense for things you want to have globally.

Upvotes: 0

john-raymon
john-raymon

Reputation: 326

You can also use PostCSS with the plugin postcss-preset-env and support custom properties/variables, then use the :root selector to add global css variables.

:root {
  --color-gray: #333333;
  --color-white: #ffffff;
  --color-black: #000000;
}

Upvotes: 0

gopi1410
gopi1410

Reputation: 6625

if you want to declare all of them at a time, you can use:

.abc, .abc2, .abc3, .abc4, .abc5 {
  color:red;
}

Or you can declare an additional class & add to all the .abc, .abc2.... & make its color:red;.

Upvotes: 1

HoldTheLine
HoldTheLine

Reputation: 122

With LESS

You are able to define that red color once:

.myRedColor {

color:red;

}

Now you can call that red on any CSS styles. Even NESTED styles! It's a wicked tool! 

.abc1 {

 .myRedColor;

}
.abc2 {

 .myRedColor;

}
.abc3 {

 .myRedColor;

}
.abc4 {

 .myRedColor;

}

NESTED EXAMPLE:

  .abc {

    .itsEasyAsOneTwoThree{
       .myRedColor;

    }

   }

Now all of our "itsEasyAsOneTwoThree" classes that are properly nested inside of an "abc" class will be assigned the red style. No more remembering those long #867530 color codes :) How cool is that?!

Upvotes: 0

Luke Dennis
Luke Dennis

Reputation: 14550

This functionality is referred to as "CSS variables", which is part of the future spec, but not yet implemented on any browsers.

For now, the best way to do this in pure CSS is to declare an additional class for the desired "global", and then add that class to all relevant items.

.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }

<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>

Upvotes: 0

Interrobang
Interrobang

Reputation: 17434

The bad news: you can't do it in CSS.

The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a "mixin".

In LESS:

@errorColor: red;

.error-color {
  color: @errorColor;
}

#error-1 {
  .error-color;
}

.all-errors {
  .error-color;
}

More info: http://lesscss.org/#-mixins

Upvotes: 3

Jack
Jack

Reputation: 9538

This can not be done with CSS, but that is still a very popular thing to do by using a CSS preprocessor such as LESS, SASS, SCSS, or Stylus.

A preprocessor will let you define a variable (say $red = #F00). It will replace the variable in your CSS document with the variable value for you, allowing you to write very DRY and module CSS.

Upvotes: 0

Related Questions