Sass Blog

Page 8 of 8

Previous page

• Cleaning Up Interpolation

  Posted 9 December 2015 by Natalie Weizenbaum

  Interpolation—the ability to add variables and other snippets using #{...}—is one of the handiest all-purpose features of Sass. You can use it just about everywhere you might need to inject a variable, a function call, or some other expression. In most of those places it just plops the value into the surrounding text. It’s straightforward, easy to understand, and useful, which is exactly what we want from a feature.

  Unfortunately, that’s only true in most places. For complicated historical reasons, there’s one place where interpolation goes a little bit bananas: inside an expression but outside quotes. Most of the time, it makes sense; if you write display: -#{$prefix}-box, you’ll get what you expect. But if any operators like + are used next to the interpolation, you start to get weird output. For example, $name + #{$counter + 1} might return an unquoted string containing the text name + 3.

  This is really weird behavior. Why does + behave differently here than it does everywhere else? Why…

• Sass 3.4 is Released

  Posted 19 August 2014 by Natalie Weizenbaum

  We’ve been trying to increase the pace of Sass releases, and it looks like we’ve succeeded. A mere five months after the release of Sass 3.3, we’re announcing the release of Sass 3.4.0, codename Selective Steve. Faster releases mean fewer major features per release, so there are only two big new things to talk about (although there are plenty of little improvements you can read about in the changelog). As the version name suggests, both of these features have to do with selectors.

  Using & in SassScriptUsing & in SassScript permalink

  “SassScript” is what we call the mini-language Sass uses for variables, property values, and so forth. It’s mostly just CSS values, but it also supports custom functions, arithmetic, and so forth. In Sass 3.4, we added support for something new: the parent selector, &.

  Most Sass users will probably recognize & from its previous appearances in selectors around the world, where it’s used to explicitly refer to the parent selector. For example, in .parent {...

• Sass 3.3 is Released

  Posted 8 March 2014 by Natalie Weizenbaum

  After ironing out a bunch of bugs in numerous release candidates, we’re finally ready to release Sass 3.3.0, codename Maptastic Maple, for public consumption. This release has a lot of exciting new features that you can read about in full in the changelog, but there are three that I want to draw your attention to in particular.

  Maps in SassScriptMaps in SassScript permalink

  As language designers, most of our job is to listen to feedback from users and act upon it. This is tricker than it sounds: users are very good at knowing the precise thing that they want to accomplish, but they tend not to have a sense of how that fits into the big picture. So we take a large volume of user requests, try to distill the core needs that aren’t being met, and see if we can come up with features that hit as many of those as possible as simply as possible.

  SassScript maps are a great example of this. We had a…

• A Change in Plans for Sass 3.3

  Posted 20 December 2013 by Natalie Weizenbaum

  This was originally published as a gist.

  Sass 3.3 is coming soon, and along with it several major new features. It supports source maps, SassScript maps, and the use of & in SassScript. In preparation for its release, we’ve put out a couple of release candidates to be sure that everything was set and ready to go. Unfortunately, it wasn’t.

  Release candidates often turn up small bugs and inconsistencies in new features, but it’s rare that they find anything truly damning. In this case, though, several users noticed an issue with using & in SassScript that rendered a sizable chunk of our plan for that section of 3.3 unworkable. It’s not a fatal issue, and we think we have a good plan for dealing with it (I’ll get to that in a bit), but it is a problem.

  The BackgroundThe Background permalink

  To understand what’s wrong, first you need to understand the reason we decided to make & accessible to SassScript in the first place. One thing users…

• How @extend Works

  Posted 23 November 2013 by Natalie Weizenbaum

  This was originally published as a gist.

  Aaron Leung is working on libsass and was wondering how @extend is implemented in the Ruby implementation of Sass. Rather than just tell him, I thought I’d write up a public document about it so anyone who’s porting Sass or is just curious about how it works can see.

  Note that this explanation is simplified in numerous ways. It’s intended to explain the most complex parts of a basic correct @extend transformation, but it leaves out numerous details that will be important if full Sass compatibility is desired. This should be considered an explication of the groundwork for @extend, upon which full support can be built. For a complete understanding of @extend, there’s no substitute for consulting the Ruby Sass code and its tests.

  This document assumes familiarity with the selector terminology defined in the Selectors Level 4 spec. Throughout the document, selectors will be treated interchangeably with lists or sets of their components. For example, a complex selector…