CSS is a wonderful language for presenting HTML visually. It’s relatively easy to learn the basics, but once you’ve worked with it awhile you start to bump up against some of its limitations. It’s common to find yourself wishing CSS could do more.
Sass extends CSS. It lets you do things you can’t always do with CSS alone. It’s also as easy to learn as CSS itself. In fact, if you know CSS, you already know Sass. You just don’t know you know it yet.
The majority of Sass syntax is the same as CSS. Within a very short time you can learn the few things that are different and be writing Sass code that compiles into CSS. You can then learn the rest of Sass one feature at a time as you need or want.
If you’ve ever wished CSS could do more, Sass is for you.
- Chapter 1: Introduction
- A quick walk through of the syntax and output settings along with how to get and install Sass.
- Chapter 2: Nesting
- How to nest your Sass code and why you may or may not want to. I also include information about using Sass with BEM or SMACSS and similar.
- Chapter 3: Variables
- Everything you want to know about working with variables in Sass.
- Chapter 4: @Rules and Directives
- A quick walk through of CSS @rules and then more in-depth talk about @media, @import, @extend, @mixin, including when to use @extend and when to use @mixin. I also talk about @include and offer some thoughts for directory structure.
- Chapter 5: Data Types, Operators, and Functions
- How to work with numbers, strings, colors, lists, and maps in Sass, what operators you can use with each, and what native functions exist to work with them as well.
- Chapter 6: Control Directives
- How to use @if (and the if() function), @for, @each, and @while control directives.
- Chapter 7: Custom Functions
- How to write custom functions with keyword and variable arguments. Also when to use a function and when to use a mixin.
You can download a copy of Sass for Beginners: How to Write More Organized and Maintainable Stylesheets at Amazon.