Making Use of Sass' Zip() Function

HTML & CSS
1

Originally published at: http://www.sitepoint.com/making-use-sass-zip-function/

Sass alleviates the need to write repetitive code when it comes to our stylesheets, but you knew that already or else you wouldn’t be reading this far. I want to show you a nice, savvy way to write shorthand properties without the need to remember the order of values for CSS like animation and font.

Before You Begin : Since I’m using Sass maps it might be a good idea to get comfortable with them. It just so happens there are at least two great articles.

Never Memorize What You Can Look Up In A Book

The title you just read is a famous quote from Albert Einstein -and a good one at that. My best guess is that I’m not the only developer in the world asking themselves “Now…does direction come after fill-mode? or is it the other way around?”

The setup that follows might not be for everyone, but I want you to take note of the approach. You could change this to work any way you want. Remember … the sky’s the limit.

Continue reading this article on SitePoint
1 Like
2

I found a way to simplify the example with fonts:

$font_config: (
  font-style: normal,
  font-variant: normal,
  font-weight: normal,
  font-measurements: 100%/1.5,
  font-family: #{'Proxima Nova', 'Helvetica', 'Arial', sans-serif}
);

Simply by interpolating the list of font families, you cast it as a string thus circumventing the zip issue you would face when dealing with a list. No need for an extra map, a double-quote hack or the unquote function. Easy peasy.

Edit: Sass Guidelines recommend always quoting string, even if they don’t include spaces. :wink:

3

Funny Hugo,

This Sass code is extracted from your guidelines document:

$breakpoints: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

As you can see, each value field in the outer map is a map itself whose key is an unquoted string data type in contradiction to your recommendation/advise here.

Maybe if you follow your own advise, we can then listen to you attentively.

What do you think?

4

I suppose I should clarify Sass Guidelines to explain the difference between a string intended to be use as a CSS value, and a string when sticking to the data type only.

For instance, we do not quote sans-serif even if it a string, because it will fail when output in CSS if wrapped in quotes. For the same reason, we do not quote min-width because when printed as part as a @media directive, it will fail as well if quoted.

I hope it makes sense. I’ll add something about this to the guidelines, thanks for noticing.

Edit: done. This will be live in 1.0.1.

5

  • sans-serif is not a string. It’s a CSS identifier (keyword) instead. There’s a huge difference between strings and identifiers in CSS.

  • min-width is a media feature housed inside an expression denoted by a pair of parentheses, and this expression happens to resemble the syntax and grammar of a Sass map. Again this is not a string to begin with and therefore to warrant the quotes treatment.

6

When it comes to Sass, both are strings. End of story.

7

and thus the optional quotation in Sass for these constructs to avoid this trap.

Your guidelines are draconian and unnecessarily stringent.

I suggest that you take it easy and be reminded that W3C standards at the end of the day are just recommendations for user agents vendors and not laws or rules. Just imagine what can be said about your so-called guidelines then.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.