From the course: SharePoint Framework for Developers: 1 Understanding the Toolchain

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Sass nesting

Sass nesting

From the course: SharePoint Framework for Developers: 1 Understanding the Toolchain

Start my 1-month free trial

Sass nesting

“

- [Instructor] Next, let's look at another interesting Sass concept called nesting. Imagine that I had html that looked like this. So I'm going to create a ul and li. One. Two. And three. Now, I want to style this ul li. Let's say that this ul li will have a certain padding and text decoration, font size, color, something like that. In CSS, if I had to define these styles, at both the ul and li level, I would sort of have to repeat the words ul, li, ul, li, all over the place. And if there was an href, let's say one of these li's was an href, I would have to say ul, li, a, right? So I have to repeat these styles. So what I'm trying to say is that, for me to do hierarchy in CSS, because see, the li here, is a child of ul, why couldn't I just say li inside a ul with braces or something like that? CSS doesn't have any such concept, but Sass does. So let's go ahead and change our Sass code to look a little bit like this. So Sass allows me to create these braces, and in here, I can say…

Contents