Mukhtar's Blog
Nesting with Sass.

Nesting with Sass.

Abdulfatai Mukhtar's photo
Abdulfatai Mukhtar
·

3 min read

Sass is Syntactically Awesome Style Sheets, It is a preprocessor scripting language that is compiled into Css, one of the powerful uses of Sass is nesting styles, with this you don't have to repeat selectors name while styling. that means if you have a parent selector all child selectors can be nested under it.

To create a Sass file, you just have to give it a file name extension of .scss And you're good to go, you should also need a compiler, since Sass codes are compiled into Css. If you're using Visual Studio Code you can download Live Sass compiler in extensions or checkup a similar Sass Compiler if you're using a different text editor.

We'll be doing a practical aspect of nesting With Sass and it will look this way.

sass.jpg

A Sass code that look like this.

div{
    h1{
        font-family: 'Courier New', Courier, monospace;
    }
}

Becomes this in Css.

div h1 {
  font-family: 'Courier New', Courier, monospace;
}

So basically nesting in Sass is all about inserting selectors into a parent selector.

Now Our HTML code for the image above is.

<body>
    <div class="box-container">
        <div class="box">
            <div class="top">top</div>
            <div class="bottom-box">
                <div class="bottom-left">bottom-left</div>
                <div class="bottom-right">bottom-right</div>
            </div>
        </div>
    </div>
</body>

And the Sass code is.

body{
        .box{
            display: flex;
            flex-direction: column;
            margin-left: 10%;
            margin-right: 10%;
            .top{
                padding: 5%;
                background-color: cadetblue;
                text-align: center;
            }
            .bottom-box{
                display: flex;
                justify-content: space-between;
                div{
                    padding: 5%;
                    background-color: yellowgreen;
                    margin-left: 1px;
                }
            }
        }
}

All this written would have been longer if you used normal Css.

Your feedback is warmly welcomed

Thanks for reading.

SassHTML5CSScoding