2

I want to include a value from another class - and use this for something different:

I have this class:

.sourceClass {
  color: red;
}

And I have this class:

.destinationClass {
  border-color: ###should be the color from .sourceClass => red
}

is this possible? And how can I do that?

moopet
  • 6,014
  • 1
  • 29
  • 36

1 Answers1

0

You tagged your post with "Sass". Are you using the Sass/SCSS preprocessor? If so, you'd declare and use a variable like this:

$myColor: red;

.sourceClass { color: $myColor; }
.destinationClass { border-color: $myColor; }

If you're not using Sass, you can read about native CSS variables - which are currently working in Firefox and Chrome, but not IE/Edge.

Lastly, there is a possible solution supported in all current browsers, which would be applicable depending on your DOM hierarchy: currentColor.

If your .destinationClass is a child of .sourceClass, and therefore is inheriting color: red, you could simply use border-color: currentColor to take that color and use it as the border color.

Hope this helps!

Community
  • 1
  • 1
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • Thank you - the problem is, that I can not change the .sourceClass - so there ist no way use a variable. –  Jul 06 '17 at 14:17
  • @JörgWrase Hello, half a year later! Then the only solution would be the last part of my message - if `.destinationClass` is a child of `.sourceClass`, you can use `currentColor`. – Jon Uleis Jul 06 '17 at 14:18