Search code examples
sass

How to merge two class styles using sass?

how can we merge two styles blocks of different classes which are having same properties except "Padding" as shown in below code in to one block.

Here i am using SASS(Syntactically Awesome Style Sheets).Any help would be appreciable. Thank you.

.bookstyle {
    color:  $alt-dark-blue;
    padding-left:82.1px;
    cursor: pointer;
    clear: both;
    font-size: 10px;
}

.pagestyle {
    color:  $alt-dark-blue;
	clear : both;
    cursor: pointer;
    font-size: 10px;
}

Solution

  • One way of doing this is to have one extend the other. Here's an example of it

    .bookstyle {
    @extend .pagestyle;

    padding-left:82.1px;

}

.pagestyle {
    color:  red;
      clear : both;
    cursor: pointer;
    font-size: 10px;
}

    Alternatively you could use mixins to add the required rules.

    I'm assuming you're using the SCSS syntax for Sass by the way