Use Sass instead of PHP to compile CSS

[MauricioFauth]

Description

I propose to use the Sass language instead of PHP for CSS.
Since Sass is an extension of CSS, I think it brings more benefits when doing CSS maintenance.
The downside is that scss files need to be compiled to CSS.

node_modules/.bin/sass themes/pmahomme/scss:themes/pmahomme/css
node_modules/.bin/sass themes/original/scss:themes/original/css
node_modules/.bin/sass themes/metro/scss:themes/metro/css

[codecov]

Codecov Report

Merging #14633 into master will increase coverage by 0.93%.
The diff coverage is n/a.

@@             Coverage Diff              @@
##             master   #14633      +/-   ##
============================================
+ Coverage        50%   50.94%   +0.93%     
+ Complexity    14005    13991      -14     
============================================
  Files           498      473      -25     
  Lines         66651    65304    -1347     
============================================
- Hits          33329    33268      -61     
+ Misses        33322    32036    -1286

[ibennetch]

I remember having looked at Sass before (perhaps even for some other project) but don't really know much about it. I don't have any strong feeling about this right now either way. How will it help us maintain the CSS? Can it easily work with the new theme generator?

[MauricioFauth]

How will it help us maintain the CSS?

For now I just ported the files to scss, so it has no obvious advantages. However, in addition to being a well-known language, which makes it easier for new contributors, Sass has a nesting feature that facilitates the organization and reading of CSS, another interesting feature is the mixins, which are a kind of function, besides supporting the variables, operators and inheritance. Another advantage is the theme does not contain any PHP file, which increases security for third party themes.

Can it easily work with the new theme generator?

Yes. Instead of generating .css.php files, the generator can generate .scss files. The generator can also benefit from the Sass import feature.

[williamdes]

@MauricioFauth Can you add the following paths to .gitignore
themes/pmahomme/css/*.css
themes/original/css/*.css
themes/metro/css/*.css
package-lock.json