Use ~ attribute selector to avoid partial matches

If you plan on using responsive widths in a similar way as in inuit 5, the `*=` attribute 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 fractional grid, (Matryo)[http://quagliero.github.io/matryosass].