Add sass linting

[rpowis]

...to keep things tidy.

https://github.com/sasstools/sass-lint

[feedmypixel]

https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom

https://github.com/stylelint/stylelint

[rpowis]

or https://github.com/brigade/scss-lint

[rpowis]

oops

[feedmypixel]

Have just done a setup with sass and https://github.com/sasstools/sass-lint using the rule

property-units:
    - 2
    - global:
        - px

And then using post-css with the plugin https://github.com/cuth/postcss-pxtorem to convert px to rem.
In this way we could lint values being used in *.scss and convert after rather than using mixins.

[rpowis]

@feedmypixel Having considered this some more, I think we'd be better off moving margins and paddings into variables with em values (can't use rems due to support) and enforcing the use of those through linting.

It feels like a very heavy handed approach though, but I worry that by allowing the use of arbitrary magic numbers all over the place we'll struggle to maintain consistency in components and layouts.

[rpowis]

Also, we should probably consider using stylelint over sass-lint for it's modularity (e.g. stylelint-selector-bem-pattern). Much the same as eslint for js

[feedmypixel]

👍 on stylelint

we could

• add the stylelint rule: unit-whitelist without “px”
• use variables set in px (for ease of communications with designers and translation of designs)
• disable/ignore vars file that contains $baseline and $gutter px vars (this being the only place to add them)
• use postcss-px-to-em https://github.com/macropodhq/postcss-px-to-em for support

note we could also just not replace px values with rem when using pxtorem it would be interesting to see how much weight this adds to the stylesheets

Potentially we would also write a plugin so people can’t /* variables
This would then stop people using magic numbers for padding and margin. $baseline\1.2 or $baseline*3.76

More of a guidance than a heavy handed approach