Last fall, our dev team wanted to get started with style guides. We had added a new member to the team, and as he was getting up to speed, we realized how lacking our project documentation was. If you've ever been a new developer on a team with weak documentation, you know how confusing it can be to try to familiarize yourself with a dozen projects without documentation.
Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:
.element {
background: linear-gradient(
to bottom,
red,
transparent
);
}There is a pretty big gotcha here, though.
Tyler Gaw documents his process of moving off Sass and onto PostCSS, but keeping most of the code the same. That meant making sure he was using PostCSS plugins that would replicate most of Sass' functionality, like nesting and mixins and whatnot.
Tyler is sold. I find it an interesting experiment, and it's cool to know it's basically possible, but I'm definitely not sold yet.
Now instead of just having Sass as a dependency, which is an active healthy project, you have a whole bunch of plugins with different authors as dependencies. And for what? Assuming you use libsass, you don't get any speed. If you like some particular PostCSS plugin, using Sass doesn't prevent you from using that also. One thing I definitely wouldn't recommend is preprocessing those custom properties, as those are not interchangeable things.
Say you need to use a certain selector in multiple places in your code. It's not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors is slightly trickier.
If you've ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust.
Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code.
We'll take a look at what loops can do, and how to use them in the major CSS preprocessors: Sass, Less, and Stylus. Each language provides a unique syntax, but they all get the job done. There's more than one way to loop a cat.
The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I'll let Filip tell the story of his new tool that changes that.
The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.
When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a designer to fully own and understand. With few best practices, organization of the CSS was always ad hoc—“type styles in this section, colors in that section”—and every company did it differently. But as web applications, and the teams building them, grew larger and more complex it became harder to manage ballooning codebases while maintaining consistency across teams and projects.
The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you're struggling and could have written the same code in regular CSS.
Let's see if we can really understand it.
The following article is by James Nowland, a front end developer for Headjam, a creative agency in Newcastle, Australia. James has created a fairly simple little effect here, but one that you might think would require a little JavaScript. Instead, it uses some clever selector usage.
The following is a guest post by Eduardo Bouças (@eduardoboucas). Sass allows you to write nested media queries, which is wonderful in itself, but it's possible to abstract things a bit further. Eduardo tried a bunch of different takes on writing media queries in Sass, from the very simple to the complex. This is one of the reasons I like Sass. The language has all the stuff needed for clever folks to write complex solutions to real problems (e.g. this), and the rest of us can just use it. Eduardo ultimately comes up with a good solution that covers all his likes and needs.