How to use Selector Inheritance and Multiple Inheritance ? - Coding

In this article, you will see how to use Selector Inheritance and Multiple Inheritance using SASS. In SASS(Syntactically Awesome Style Sheets), a CSS preprocessor, we can create selector inheritance and multiple inheritances through the use of mixins and extends. The problem with using inheritance with SASS is that here you have to use other

Selector Inheritance (Using SASS)

Selector inheritance in CSS describes how styles cascade from parent elements to child elements. Unless overridden by particular styles applied explicitly to the child components, a style applied to a parent element may be inherited by its descendant elements. This enables styles to spread throughout the DOM tree. SASS allows you to inherit attributes from other selectors, it also helps you write less code and/or combine fewer elements. To implement the selector inheritance using SASS you have to carry on the styles of one selector into some other selector’s set of CSS rules by using the @extend rule like in the syntax below.

Syntax:

.parent {
    color: blue; /* Style applied to the parent element */
}
.child {
    @extend .parent;
    /* This is the child element which is a <p> */
    /* The color property will be inherited from the parent div */
}

Multiple Inheritance (Using SASS)

Multiple inheritances in CSS refer to the capacity to apply styles to an element from various sources (classes or selectors). Although multiple inheritances are not natively supported by CSS, you can nevertheless get a comparable result by mixing classes or using multiple selectors. In CSS, using several classes on an element or applying styles to elements using different selectors can produce multiple inheritance-like effects.

With Sass, you can quickly reuse and mix styles from several selectors and accomplish multiple inheritances. To implement the multiple inheritance using SASS you have to carry on the styles of several selectors into another selector’s set of CSS rules by using the @extend rule multiple times inside the selector style rules extending the different selectors like in the syntax below.

Syntax:

.class1 {
    /* Styles for class1 */
}
.class2 {
    /* Styles for class2 */
}
.class3 {
    @extend .class1;
    @extend .class1;
    /* Both the styles of Class 1 and Class 2 are 
    inherited and will be used in class 3 */
    /* Styles for class3 */
}

Example 1: The code example demonstrates how we can implement the selector inheritance in SASS using the above-given syntax. Here the first <p> element inherits from the parent div and it stays different from the other <p> element using the @extend at-rule.

index.html:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        How to use Selector inheritance 
        and multiple inheritance?
    </h3>
    <br>
    
    <div class="parent">
        <p>
            This is some text inside a paragraph.
            <br>This paragraph inherits color 
            from the Parent Div
        </p>
        <span>This is some text inside a span.</span>
    </div>
    <br>
    <p>
        This is the paragraph outside 
        the div container.
    </p>
</body>

</html>

styles.sass: This sass file contains the main stylesheet and is compiled into .css

CSS

/* SASS File*/

*
    margin: 1rem

h1
    color: green

.parent 
    color: green /* parent element */

p
    color: blue

.parent p 
    @extend .parent
    /* Inherited from the parent */
    font-weight: bold 
    /* Additional style applied to the 
      child <p> element */

The above sass code is compiled into CSS using SASS preprocessor in the command line like this:

sass styles.sass style.css

style.css: The compiled CSS code:

CSS

* {
    margin: 1rem;
}

h1 {
    color: green;
}

.parent,
.parent p {
    color: green;
}

p {
    color: blue;
}

.parent p {
    /* Inherited from the parent */
    font-weight: bold;
}

Output:

Example 2: The code example demonstrates the implementation of Multiple Inheritance using the above approach and syntax. Here the first container takes one .class3 class which inherits both the .class1 and .class2:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 style="color: green; margin-left: 0.5rem;">
        GeeksforGeeks
    </h1>
    
    <h3 style="margin-left: 0.5rem;">
        How to use Selector inheritance 
        and multiple inheritance?
    </h3>
    
    <div class="box">
        <div class="class3">
            This is the container inheriting 
            all the classes together
        </div>

        <img src=
            "https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
            alt="" class="class1 class2">
    </div>
</body>

</html>

styles.sass: This sass file contains the main stylesheet and is compiled into .css

CSS

.box
    display: flex

.class1 
    height: 200px
    margin: 1rem
    padding: 1rem
    /* Styles for class1 */

.class2 
    width: 200px
    padding: 0.5rem
    color: green
    /* Styles for class2 */


.class3 
    @extend .class1
    @extend .class2
    background-color: #e7e7e7
    /* Styles for class3 */

The above sass code is compiled into CSS using SASS preprocessor in the command line like this:

sass styles.sass style.css

style.css: The compiled CSS code:

CSS

.box {
    display: flex;
}

.class1,
.class3 {
    height: 200px;
    margin: 1rem;
    padding: 1rem;
    /* Styles for class1 */
}

.class2,
.class3 {
    width: 200px;
    padding: 0.5rem;
    color: green;
    /* Styles for class2 */
}

.class3 {
    background-color: #e7e7e7;
    /* Styles for class3 */
}

Output:

Reffered: https://www.geeksforgeeks.org

CSS

Related
Foundation CSS JavaScript Utilities
How to Add Stroke using CSS ?
How to add a style on a condition in Tailwind CSS ?
CSS Radial Gradients
Foundation CSS Off-canvas Sizes

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13