themehybrid / mythic

Mythic is a next-generation starter theme designed to help theme authors write elegant, intelligent, and modern code.
https://themehybrid.com/themes/mythic
GNU General Public License v2.0
237 stars 43 forks source link

Sass module system #84

Open peiche opened 5 years ago

peiche commented 5 years ago

I updated to the latest version of Sass, which introduces their new module system. All @import directives have been converted to @use; built-in modules have been updated. I also added the stylelint-scss plugin so linting doesn't freak out over the new at-rules.

It's worth noting that there are still some CSS linting errors, but they have nothing to do with the change to use Sass modules. I regard them as out of scope to this PR.

peiche commented 5 years ago

I knew I'd forget something! I also wanted to mention a side effect of converting to the module system. The updated screen.scss imports each include and assigns a name, like so:

@use 'generic/_index' as generic;
@use 'elements/_index' as elements;
@use 'components/_index' as components;
@use 'blocks/_index' as blocks;
@use 'vendor/_index' as vendor;
@use 'utilities/_index' as utilities;

This is because Sass regards each import as being named "_index" by default. You could get around this by renaming each __index.scss to _index.scss, thereby allowing a simpler list of imports:

@use 'generic';
@use 'elements';
@use 'components';
@use 'blocks';
@use 'vendor';
@use 'utilities';

I've done this in my own projects, but I leave such a decision to you, as you might prefer the index of each directory to remain sorted at the top.