From the course: Building a Responsive Single-Page Design with PostCSS

Unlock the full course today

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

How mixins are different with PreCSS than with Sass

How mixins are different with PreCSS than with Sass

From the course: Building a Responsive Single-Page Design with PostCSS

Start my 1-month free trial

How mixins are different with PreCSS than with Sass

- Another one of the features that I love about Sass is being to create reusable pieces of code that are a lot like JavaScript functions. Now in Sass and PreCSS, these are known as mixins. I usually create a mixin to help me build full screen background images, so let's go ahead and build this and explore the differences between how you would build this in Sass versus how it's done with PreCSS. So I'm going to need to create another file in this css folder that's in the process folder, and I'm going to right click here and insert New File, I'm using Atom right now, and this file's going to be called _mixins with the underscore at the beginning, .css, and of course, whenever I do that, I'm going to need to import it, so I'll say @import and then "mixins"; and then I'm going to save that and start building the mixin right here. So one of the first differences you'll note between Sass and PreCSS is that you have to use the @define keyword, whereas in Sass, you would just use the keyword…

Contents