- [Voiceover] Call me crazy, but before I dive into learning about a new topic, I like a little clarity about what exactly that topic is, so before we really get going in this course, I'd like to give you an overview of Sass is and how you can use it your development workflow. So, Sass. Sass starts for syntactically awesome stylesheets. That's a mouthful, which is why you'll hear me refer to it as Sass throughout this course. That's also what you'll hear it called out in the wild. Here's the official Sass web site, and it's worth noting here that Sass is typically spelled with a capital S and the rest of the letters are lowercase.
We're building ever-bigger and more complex web sites, and that's a beautiful thing, but we've come to the point where we need to take the next step in making what we build more manageable and maintainable, and that's where Sass comes in. Sass is that next step. Styles are much simpler to maintain because for the ways you can organize with Sass. For example, you can separate files into logical chunks, like maybe you've got one Sass file for your header styles, another Sass file for your footer styles, et cetera.
All of those Sass files go into a processor and they come out just a regular CSS stylesheet. So that's how Sass can make your styles easier to maintain and keep things separate. Sass also helps you avoid CSS bloat. In this course, I'll show you how you can use Sass to avoid repeating yourself by reusing code. You'll also hear Sass referred to as a preprocessor, so with Sass, you've got your preprocessed Sass files that get saved or processed as a normal CSS file that you can use on your web site.
So that's just a little bit of what Sass can do. In the next video, we'll take a look at how Sass can actually do these things.
- Reviewing what Sass is and how it works
- Analyzing workflow options
- Setting up a folder structure
- Adding version control
- Working with package managers
- Setting up a workflow with Grunt
- Scaffolding HTML
- Modularizing a Sass with partials
- Creating a color palette with variables
- Using Font Awesome
- Creating a mobile-first layout