Cederholm Dan - Sass for Web Designers

LOOKING BACK at the evolution of computer languages, it seems every dozen years or so a new layer of abstraction is added. Ones and zeros leveled up into assembly instructions, which leveled up into compiled languages. Those compiled languages evolved and we used them to create web browsers. Web browsers digest languages like HTML, CSS, and JavaScript. Now were ready to level up again.

HTML, CSS, and JavaScript have been enormously successful languages for moving the web forward in unprecedented ways. Were building ever-bigger and more complex websites. Thats a beautiful thing. But weve come to the point where we need to take the next step in making what we build more manageable and maintainable. We can get there through abstraction.

CSS is in the most dire need. These days, HTML is generally produced through backend code and templates which provide the abstraction we need. As a programming language, JavaScript already has the tools of abstraction baked in. CSS has no abstraction at all and is highly repetitive. While that simplicity was key to its adoption, it makes it unwieldy for us today. Its CSSs turn to level up!

Sass, as Dan will teach you in this book, has all the tools of abstraction we need. Repetitive values become variables. Repetitive groups of styles become extends. Complex rulesets and tedious vendor prefixing become mixins. With those translations comes CSS that is manageable and maintainable at any scale.

Moving to Sass isnt a comfortable transition for some. Dan knows that all too well. He has been working with and teaching CSS to the world since before I knew what a div was. But Dan is a craftsman of the web. Just as a craftsman of wood knows when his chisel is dull, Dan knew that working directly in CSS these days is just like that dull chisel: you can do it, but youre liable to hurt yourself.

By the time you finish this book and give Sass a real try on your first project, youll be a master of 95% of the important, truly value-adding parts of Sass. Let Dan be your guide. Learn that Sass doesnt make your job harder, it makes it easier.

Chris Coyier

I WAS A reluctant believer in Sass. I write stylesheets by hand! I dont need help! And I certainly dont want to add extra complexity to my workflow. Go away!

That was the thinking anyway. But the reality is that Sass (and other CSS preprocessors) can be a powerful allya tool that any style-crafter can easily insert into their daily work. It took me a while to come around, but Im sure glad that I did.

And thats the reason I wanted to write this little book. To share how Ive been able to use Sass to be more efficient, while maintaining the process Ive become comfortable with from writing CSS for the last ten years. I had many misconceptions about Sass that prevented me from giving it a go, initially. I was worried Id have to completely alter the way I write and manage stylesheets. As CSS can be fragile at times, its understandable for its authors to be somewhat protective about their creation. Can I get an amen?

Ahem.

So, Im here to show you how Sass doesnt have to disrupt your process and workflow, and how it can make your life easier. Ill demonstrate the various aspects of Sass, how to install it, how to use it, and how its helped me in my own projects. With any luck, I just might make you a believer as well.

Ever needed to change, say, a color in your stylesheet, and found that you had to find and replace the value multiple times? Dont you wish CSS allowed you to do this?

What if you could change that value in one place and the entire stylesheet reflected that change? You can with Sass!

Or how about repeated blocks of styles that are used in various locations throughout the stylesheet?

Wouldnt it be fantastic to roll those shared rules into a reusable block? Again, defined only once but included wherever you needed them.

Thats also Sass! And those two extremely simple examples barely scratch the surface as to how Sass makes authoring stylesheets faster, easier, and more flexible. Its a welcome helper in the world of web design, because anyone thats created a website knows

Lets face it: learning CSS isnt easy. Understanding what each property does, how the cascade works, which browser supports what, the selectors, the quirks, and so forth. Its not easy. Add on top of that the complexity of the interfaces were building these days, and the maintenance that goes along with that andwait, why are we doing this again? Its a puzzle, and some of us enjoy the eventual completion.

Part of the problem is that CSS wasnt originally designed to do the things we do with it today. Sure, progress is moving along at a nice clip thanks to rapid browser innovation and implementation of CSS3 and beyond. But we still need to rely on techniques that are, for all intents and purposes, hacks. The float property, for example, was designed to simply align an image within a block of text. Thats it. Yet weve had to bend that property to lay out entire interfaces.

Our stylesheets are also immensely repetitive. Colors, fonts, oft-used groupings of properties, etc. The typical CSS file is an extremely linear documentthe kind of thing that makes an object-oriented programmer want to tear their hair out. (Im not an object-oriented programmer, but I have very little hair left. Read into that as you may).

As interfaces and web applications become more robust and complex, were bending the original design of CSS to do things it never dreamed of doing. Were crafty like that. Fortunately, browser makers adopt new CSS features far more rapidly these days, with more efficient and powerful properties and selectors that solve the problems todays web poses. Features like new layout options in CSS3, border-radius, box-shadow, advanced selectors, transitions, transforms, animation, and so on. Its an exciting time. And yet, theres still a lot missing from CSS itself. There are holes to be plugged, and the life of a stylesheet author should be a lot easier.