CSS Use Color from Another Class

CSS use color from another class?

You may also want to look at the new CSS variables in Bootstrap 4. They will let you override colors, but you'll need to redefine the CSS class.

CSS variables offer similar flexibility to Sass’s variables, but
without the need for compilation before being served to the browser.

For example:

.text-teal {
  color: var(--teal);
}

Bootstrap 4 CSS Variables Demo

How to use color from one class as background-color in a second class for the same element?

Unless I'm misunderstanding you, there's not really a good way to do what you want. border inherits the color, just like currentColor does, so you can trim some class requirements down that way. But you need to put the attributes in there somewhere, and I don't see why a .primary span { color: white; } wrapper situation wouldn't be ideal to achieve your end goal.

Take the snippet below, the markup is relatively straightforward. At the end I've included a button that sort of does what you want by abusing the :before pseudo-class and removing the text content from the button. For SEO and Usability purposes you may want to use .hack-button { font-size: 0; } and .hack-button:before { font-size: 12px; } and keep the text in both places.

Personally I'd stick with a simple wrapper that overwrites currentColor instead of using pseudo elements. You could probably achieve what you want with some JavaScript as well, but truthfully it's probably easier to just wrap the button content in a span and call it a day.

.button,

.hack-button {

  text-decoration: none;

  padding: 6px 12px;

  border: 1px solid;

  display: inline-block;

  margin-bottom: 4px;

}

.primary { background: currentColor; }

.primary span { color: #fff; }

.blue  { color: #0095ee; }

.red   { color: #ee3300; }

.green { color: #009933; }

.gray { color: #ccc; }

.hack-button:before {

  content: attr(data-content);

  color: #fff;

}

<a class="button blue primary" href="#"><span>Blue Primary</span></a>

<a class="button blue" href="#"><span>Blue Secondary</span></a>

<br />

<a class="button red primary" href="#"><span>Red Primary</span></a>

<a class="button red" href="#"><span>Red Secondary</span></a>

<br />

<a class="button green primary" href="#"><span>Green Primary</span></a>

<a class="button green" href="#"><span>Green Secondary</span></a>

<br />

<a class="button gray primary" href="#"><span class="dark">Gray Primary</span></a>

<a class="button gray" href="#"><span>Gray Secondary</span></a>

<br />

<a class="hack-button blue primary" href="#" data-content="Hacked Primary"></a>

lighten the background colour from another class

You can consider a pseudo element to create another layer and inherit the background-color then you can apply filter without any issue:

.master{

      background-color:green;

}

.master2{

      background-color:red;

}

.light,

.dark{

  position:relative;

  z-index:0;

}

.light:before,

.dark:before{

  content:"";

  position:absolute;

  z-index:-1;

  top:0;

  left:0;

  right:0;

  bottom:0;

  background-color:inherit;

  filter:brightness(200%);

}

.dark:before {

  filter:brightness(50%);

}

<div class="master light">Master</div>

<div class="master2 light">Master</div>

<div class="master dark">Master</div>

<div class="master2 dark">Master</div>

Point one style class to another?

You can use selector grouping:

.foo, .list1 li { 
  background-color: red; 
} 

SCSS extend class when there is also another class in the element

Use SASS' parent selector &:

$color__red: red;
a.management {
  border-bottom: 5px solid $color__red;
  &.active {
    color: $color__red;
  }
}

which is compiled to

a.management {
  border-bottom: 5px solid red;
}

a.management.active {
  color: red;
}

Example: https://www.sassmeister.com/gist/89de3850f21109652cd175ce8085da95

https://sass-lang.com/documentation/style-rules/parent-selector

use css variable to generate class names in scss

is it possible to generate class names by css variables?

Short answer:

No.

Longer answer:

CSS custom properties, also commonly called CSS variables, are known at runtime, while SASS variables are known at compile time. Since browsers can't understand SASS, it first needs to be compiled down to CSS and by that time, the SASS compiler won't know what the value of the CSS variable will be, so it throws a compile error.

Possible solution

Dynamically generate CSS based on your input and add it to the DOM.

How do you make a css class inherit all values from another class without changing the original class

There is no way to inherit all values from another class in pure CSS.

CSS inheritance is from parent element to child element, this doesn't apply for rulesets such as CSS classes.

We can achieve this, with CSS preprocessors such as Sass & LESS, by extending the classes:

example in Sass (with SCSS syntax):

.block {
  display: block
}
.green {
  background: green
}

.green-block {
  @extend .block; // in LESS, the syntax would be the same but without @extend
  @extend .green; // in LESS, the syntax would be the same but without @extend
}

I would just use those CSS classes but override with the new CSS classes all the styles that you need to override.

If you need to inherit all the styles from the CSS class, just use the same CSS class twice and, if necessary, create a new class to override the styles that you don't need.

Can we inherit a custom variable defined in a class in another class?

From the specification:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.

And also:

Inherited: yes

So it's not about the inheritance from another class but the usual inheritance from a parent (or ancestor) element exactly like any inherited property.

In your case penguin-top is a child of penguin so it will inherit its custom properties.

---

Worth to note that :root is the html element which is the ancestor of all the elements that's why all them will logically inherit custom property defined inside :root

---

Related Topics