thoughtbot/neat — pull request #125 by kaishin (2013-11-15 10:41:26+00:00)
Title: Allow optional $container-columns in shift()

I’m layout out a design on a 16-unit grid, which works like this.

**Tablet**
* Sidebar: side-to-side, after the post (**16** units)
* Posts: side-to-side (**16** units)
* Post metadata: **3** units
* Post content: **13** units

**Desktop**
* Sidebar: **5** units (now alongside the post)
* Posts: **11** units
* Post metadata: **2** units (of **11**)
* Post content: **9** units (of **11**)

I have some cases where there's stuff that follows the main post content but should be aligned to it. So, in the desktop, I do:

```scss
.something {
@include span-columns(9 of 11);
@include shift(2);
}
```

However, on tablet, I'll do:

```scss
.something {
@include span-columns(13);
@include shift(3);
}
```

All is well if I do exactly this.

However, since I have multiple things in that main column, but some are shifted, and some are not, I'll not repeat myself and do:

```scss
.something,
.other-something {

@media screen and (max-width: 999px) {
@include span-columns(9 of 11);
}

@media screen and (min-width: 1000px) {
@include span-columns(13);
}

}

/* Only this one is shifted */
.something {

@media screen and (max-width: 999px) {
@include shift(2);
}

@media screen and (min-width: 1000px) {
@include shift(3);
}

}
```

The problem with this is that, since `shift` doesn't follow `span-columns` in the **same selector**, it can't respect the `$parent-columns` variable. So in this case, it won't be aligned correctly.

So, instead, I have to do this, which isn't very DRY:

```scss
.other-something {

@media screen and (max-width: 999px) {
@include span-columns(9 of 11);
}

@media screen and (min-width: 1000px) {
@include span-columns(13);
}

}

/* Only this one is shifted */
.something {

@media screen and (max-width: 999px) {
@include span-columns(9 of 11);
@include shift(2);
}

@media screen and (min-width: 1000px) {
@include span-columns(13);
@include shift(3);
}

}
```

So, to support an use case like this, it'd be helpful to let people do:

```scss
@include shift(2 of 11);
```

This has a few benefits:

1. It allows people to declare rules any way they want, without some forced order.
2. It brings the code more in line with the `span-columns` syntax. I get why there's an inconsistency between `span-columns` requiring `$parent-columns` but `shift` not doing so, but I don't think it's a positive thing.
3. It's less error-prone. I don't think it's super clear that people need to declare `shift` after `span-columns`. I've been using neat for a long time, and only now understood that. I believe #118 manifests this too.

Thanks for considering this.