Use ~ attribute selector to avoid partial matches

If you plan on using responsive widths in a similar way as in inuit 5, the `*=` attribute selector would match on partial results. For example: `<div class="layout__item 1/4 palm-1/2">` would pick up both `[class*="1/4"]` AND `[class=*"1/2"]` as it's found a match on `1/2` and `1/4`. 

You would start picking up issues in the cascade with a `layout__item` inheriting the wrong width at the wrong breakpoints. Using the above example, it would probably appear as `1/2` at all times.

By using the `~=` selector, it looks for a full match within an elements classes. I've been successfully using this method with my own (inuit inspired) fractional grid, [Matryo](http://quagliero.github.io/matryosass).