[wp-trac] [WordPress Trac] #29797: Proposal: Convert .css files to .sass

[WordPress Trac]

#29797: Proposal: Convert .css files to .sass
-----------------------------------------------+---------------------------
 Reporter:  x2048                              |      Owner:
     Type:  enhancement                        |     Status:  new
 Priority:  normal                             |  Milestone:  Awaiting
Component:  General                            |  Review
 Severity:  normal                             |    Version:  trunk
  Focuses:  ui, rtl, administration, template  |   Keywords:
-----------------------------------------------+---------------------------
 Currently, themes are compiled from .scss. I would suggest to make a
 transition so that all .css files are replaced by .scss.
 This task can be split into two sub-tasks:
 * Convert all admin .css to .scss
 * Convert all theme .css to .scss


 Some of the reasons to convert *all* .css files to .sass:

 * Less duplication in the code. Leads to easier development
 * Easier to modify code. E.g. we can have global variables for common
 colors, widths, etc.
 * It would be faster to write new styles.
 * Possibility to reuse things via mixins.
 * Possibility for future optimizations. E.g. there can be a file called
 main.scss that just includes all other .scss files. That way WordPress can
 ship with only 1 .css file (e.g. admin.css), which will improve .css
 loading times, caching, etc.
 * Possibility for plugin/theme authors to reuse constants. E.g. if there's
 a "variables.scss" or a "media-queries-mixins.scss", a plugin author would
 be able to use the same values as wp-core.
 * It's a nice opportunity to perform a code-review and remove legacy
 styles.

 ----


 == Potential Problems ==

 === Converting a .css to an *idiomatic* .scss isn't an automatable process
 - how would we detect a typo in the conversion? ===

 **Solution**
 Suppose we have a farbtastic.scss that is a candidate to replace
 farbtastic.css
 We can check if the two files provide identical functionality with the
 following script:
 {{{#!bash
 #!/bin/sh

 node-sass farbtastic.scss farbtastic-scss.css
 csstidy fabtastic-scss.css  --silent=true --template=low > farbtastic-
 clean-scss.css
 csstidy farbtastic.css --silent=true --template=low > farbtastic-clean.css

 diff farbtastic-clean.css farbtastic-clean-scss.css

 }}}

 The script can of course be modified to work with any .css/.scss file
 pair.

 === How would we detect if the .scss produces different, but equivalent
 .css to the original? ===
 After an .scss file has been shown to replicate the functionality of its
 .css predecessor, it can then be refactored to produce different, but
 equivalent output.


 === Some .css files are 50KB. How would those be converted? ===
 Very big .css files can be split into smaller files before conversion to
 .scss.
 Or, very big .css files can be converted at a later time. It's possible to
 convert each file individually.

 ----

 I volunteer to create the relevant grunt tasks, to create the tool to
 check if an .scss is equivalent to the original .css, and to convert the
 existing .css files.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/29797>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform