[wp-trac] [WordPress Trac] #22862: Consider a CSS preprocessor

[WordPress Trac]

#22862: Consider a CSS preprocessor
-----------------------------+------------------------------
 Reporter:  chriswallace     |       Owner:
     Type:  feature request  |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Administration   |     Version:
 Severity:  normal           |  Resolution:
 Keywords:                   |
-----------------------------+------------------------------

Comment (by wonderboymusic):

 So I took a big bite out of this....

 [attachment:22862.diff 22862.diff] is `wp-admin.css` and `wp-
 admin.min.css` compiled by LESS. I broke up the admin styles from one
 10,000 line file into 32 modules. The structure is like so:

 {{{
 /wp-admin/css/wp-admin.css
 /wp-admin/css/wp-admin.min.css
 /wp-admin/css/less/wp-admin.less // manifest file
 /wp-admin/css/less/variables.less
 /wp-admin/css/less/mixins.less
 /wp-admin/css/less/modules/* <--- the 32 modules
 }}}

 I rewrote the entire `wp-admin.css` in LESS syntax. There are still
 probably a billion things that could be done, but you'll get the gist. I
 only made one variable, but I made a bunch of mixins.

 To compile the code from LESS to CSS, `cd` to the `/wp-admin/css/less`
 directory and then:

 {{{
 lessc wp-admin.less > ../wp-admin.css
 lessc wp-admin.less --yui-compress > ../wp-admin.min.css
 }}}

 I am sure I broke stuff, but I did a bunch of testing to make sure
 everything appears like it wasn't broken by my test.

 My immediate reactions after doing this:

 1. There is an ungodly amount of CSS
 1. Splitting it up into modules is the easiest to optimize by feature
 1. LESS shows us when our nesting levels are way too deep. Google
 PageSpeed generally recommends only 2 levels deep max
 1. I would prefer if we found a way to move forward with LESS or an
 equivalent, but ultimately that's up to UI team players
 1. If you want to mess around and make your own version in LESS, SASS, or
 SCSS, might I suggest that you fork my patch. It takes 300 forevers to do
 this from scatch.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/22862#comment:33>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software