How to Extend CSS Class with Another Style

How to extend css class with another style?

You will have to use a CSS preprocessor to do this.

SASS

placeholder

%rounded-corner {}
%corner {}
%button-effective {}

.button {
  @extend %rounded-corner;
  @extend %corner;
  @button-effective;

  /* Some other styles. */
}

.box {
  @extend %rounded-corner;
}

Compiles to:

.button, .box {
  /* rounded-corner styles */
}

.button {
  /* corner styles here */
}

.button {
  /* button-effective styles here */
}

.button {
  /* Some other styles. */
}

/*
`.box` is NOT defined here because it only uses placeholders. So it
is placed where the placeholder is defined.
*/

Note: with placeholders, the CSS selector is added to wherever the placeholder is defined. Not where the selector is defined.

extend

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  @extend .rounded-corner;
  @extend .corner;
  @extend .button-effective
  // Continue with other classes.
}

Compiles to:

.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}

mixin

@mixin rounded-corner {}
@mixin corner {}
@mixin button-effective {}

.button {
  @include .rounded-corner;
  @include .corner;
  @include .button-effective
  // Continue with other classes.
}

Compiles to:

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

LESS

LESS has a similar sytanx to SASS and also has extend and mixin, though LESS is a little more forgiving if you want to add one class' style to another. While I believe still considered a mixin in LESS, you can add one class style to another like the following without having to use a keyword.

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  .rounded-corner;
  .corner;
  .button-effective;
  // Continue with other classes.
}

Compiles to:

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

How to override css styles when @extend from other class in scss?

Then which selector in most below this will apply this is general rule for any CSS file.

Height will be <div class="a b"> 200px;

.a {
    height: 100px;
    width: 100px;
    }   
.b {
    @extend .a;
    height: 200px;
}

Height will be <div class="a b"> 100px;

.b {
    @extend .a;
    height: 200px;
}
.a {
    height: 100px;
    width: 100px;
}

Always height will be <div class="a b"> 200px order dose not matter;

.a {
    height: 100px;
    width: 100px;
    &.b {
       height: 200px;
    }
}

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 a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

How to extend a class from a CSS file in Sass?

When you add an @import at-rule to your Sass code, you need to be careful what you wish to achieve. @import is actually valid CSS, so Sass needs to evaluate and figure out your intentions here. Sass extends the CSS @import rule and does not recreate it. According to the documentation:

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

• If the file's extension is .css.
• If the filename begins with http://.
• If the filename is a url().
• If the @import has any media queries.

As a result, if you put the .css extension after the filename in an @import at-rule, Sass will just output this line of valid CSS code. You can test this by removing your @extend directive, which will make your code compile. You will see that the entire output file is this:

@import 'library.css';

Sass is not going to follow that CSS file and make it's contents available to the @extend directive.

What you could do is remove the file extension from your @import at-rule.

@import 'library';

.b {
 @extend .a
}

However, this will actually output the entire contents of the file library.css into your CSS file that this Sass file compiles to, which I am assuming is not your goal.

To fix that, you could create a partial Sass file that contains placeholder selectors.

%a {
  color: red;
}

The good thing about placeholder selectors is that they have no output of their own. According to the documentation:

On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.

Their importance and usefulness is detailed on this page.

Import the partial Sass file in your Sass stylesheet and use the @extend directive like this:

.b {
  @extend %a;
}

And to make sure your library.css file is consistent, convert it into Sass, import the same partial file on top of it containing your placeholder selectors and simply use the @extend directive inside .a selector as well.

@import 'placeholders';

.a {
    @extend %a;
}

CSS - Extending class properties

You can add multiple classes to one element, so have one .button class which covers everything, then a .button-submit class, which adds things in.

For example:

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}​

See a live jsFiddle here

In your case, the following should work:

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}​

See a live jsFiddle here

---

Related Topics