Sass to postcss

[evanmwillhite]

Move from Sass to postcss and provide documentation on how to add new postcss plugins as needed.

[evanmwillhite]

Comments from internal group discussion at Four Kitchens.

There is some worry about moving too far outside of standard best practices in switching to this. So, questions:

1. Do we worry about this?
2. If we do, should we create separate versions (e.g., a sass version of emulsify/emulsify-gulp and a postcss version) and then some system of selecting those in the installation process.
3. If yes to the above, can we use an existing tool like Composer rather than adding more tooling/overhead (yeoman) to allow for this

[dubcanada]

You can use something like https://github.com/jonathantneal/postcss-sass which let's you use both.

You can run postcss with all of it's transformations and then run sass to transform sass/scss part of it.

[ModulesUnraveled]

We're in favor of this internally (at Four Kitchens). Here are some comments from our internal discussion:

Why switch to Post CSS?

• Yes, we could stay with SASS, but part of what we do is stay on the cutting edge. We're experts, and we need to be constantly learning.
• The industry is moving that way, and we need to maintain pace with the industry and best practices
• Writting CSS that's closer to the spec of CSS
• As a result, we'll be in better alignment with the FE Developers in the JS community (React, Vue, Angular, etc.). They're writting vanilla css, not sass.

How does this affect supporting the site?

• We include documentation and encourage the FE developers in the team to keep pace
  • There is unfortunately a long tail between the time we start a project, and the time it enters the "support" phase. This means that we need to loop in support on what our choices are, and making sure we have good documentation.

But I like X feature in SASS

• Autoprefixer
• Nesting
• Functions
• Catchall - There's a postcss processer that reads sass... so you don't need to change the code you're writting

[evanmwillhite]

Possible default plugins:

• Nested selectors
• Comments (Sass strips them out, but this could maybe be done in a minification process)
• Variables
• Mixins (fairly complex)
• Extends?
• Globbing?
• Each (here) - could be a sass map too.
• If statements (here)
• Env (Modern CSS)

Other ones we like:

• Maps

[amazingrando]

Marked as On Hold until we circle back around to this.