Thursday, April 22, 2010

More Sass.

Variables, Part II:

Let me share with you some things that might be obvious, but I'll point them out just in case you are unnecessarily constraining yourself:

Optional assignment is supported in Sass. So go ahead and |= your heart out.
Also, Default arguments are supported for your Sass mixins. Just provide a default value the same way you would for ruby methods.

This one might be less obvious: You can use ruby-style string interpolation on variables, even in the middle of selectors or properties. I was pleasantly surprised to discover that it is totally acceptable to do something like

p.#{!color_of_my_words}_text
color: !color_of_my_words

Which essentially amounts to "make blue_text blue." The ability to interpolate variables makes it easy to write template methods that construct CSS given just the few variables you care about changing.

Comments:

There are two kinds of comments in Sass. If you want your comment to show up in the CSS compiled document in addition to your Sass file, use /*, as in:

/* Hey, I'm totally all up in your CSS.

Or, if you want the comment to show up in your Sass file, but not in the CSS document, use //, as in:

// Ssh, y'all can't see me except for right in this here Sass.

I find I use the quieter version of the comment almost exclusively, but what you use will probably depend on whether other developers will be looking at your Sass, or at the CSS it produces.

No comments:

Post a Comment