Compass - include one value for another property

Question

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?

Answer 1

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!