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 mixins

Sass mixins

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

Start my 1-month free trial

Sass mixins

“

- [Instructor] So now that we have the concept of variables nailed down, next let's look at another interesting concept of Sass, called mixins. So let's go to index.html and modify my HTML a little bit. I'm going to create a div, and let's say the class of this div is small blue square. And I'll add a second div here, and its class will be a big red square. Now both of these are going to be squares. They are very similar. If I had to represent this in CSS, I would have to write two different styles, sort of reinventing the wheel. The styles would be very similar, but I'd have to write them twice. Well they're both squares, and they both have color. Couldn't they just change their dimension as a variable or an input to a function? And it should just give me the appropriate class? Well, CSS can't do that, but Sass can. And with Sass, we use a concept called mixins, which are like functions. So I'm going to say @mixin square size and color. So you see here that this is like a function…

Contents