From the course: Responsive CSS Workflow with Sass, Bourbon, and Susy

Unlock the full course today

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

How Sass works

How Sass works

From the course: Responsive CSS Workflow with Sass, Bourbon, and Susy

Start my 1-month free trial

How Sass works

- How exactly does Sass work its magic? Well, it does it through variables, nesting, even math, mixins, and then a lot of various functions. I'm going to use a site called codepin to show you some of these examples in action. Codepen is a neat little tool for testing out or showing off front-end code. Anything you can do with HTML, CSS, or JavaScript, you can use Codepen to execute the code and see how it works. All you do is create a new pen, and enter whatever HTML, CSS, or JavaScript that you want, and it'll take that code and output it here in this little window. One thing to note here is that regular browsers cannot read Sass files. They've got to be compiled or turned into regular CSS files. So you've got your Sass files, they go through a processor, and out comes your regular CSS. Now I mentioned that these are some of the things that make Sass so magical. Let's take a quick look at some of these examples in action over at Codepen. We'll start with Sass variables, and I've…

Contents