CODEWITHSUNDEEP
sass
user2572561
user2572561

Reputation: 117

how to inheritance multiples class through sass

I have a scenario in sass
.A{
    background-color: red;
    Padding :20px;

    h4{ padding-bottom :20px;}
}
// another class

.B{ 
    background-color : blue; 
    padding : 20px

    h4{ padding-bottom:20px}

}

Question: how can i combine padding and h4 together in SASS without to repeating padding and h4 properties

Upvotes: 0

Views: 58

Answers (2)

chris
chris

Reputation: 799

You really don't save much by using sass/scss for this small of a redundancy

A solution with scss:

  .a, .b {
    padding: 20px;
    background-color: red;
    & h4 {
      padding-bottom: 20px;
    }
  }
  .b{
    background-color:blue;
  }

That solution in plain css:

  .a, .b {
    padding: 20px;
    background-color: red;
  }
  .a h4, .b h4 {
    padding-bottom: 20px;
  }
  .b {
    background-color: blue;
  }

Here is what that will look like: http://codepen.io/cawoelk/pen/Ciqyw

Upvotes: 0

Allan Hortle
Allan Hortle

Reputation: 2565

The most straight forward way is to use @extend.

%common_properties {
    padding: 20px;

    h4 {
        padding-bottom: 20px;
    }
}

.a {
    @extend %common_properties; 
    background-color: red;
}

.b { 
    @extend %common_properties; 
    background-color: blue; 
}

Upvotes: 2

Related Questions