[wp-trac] [WordPress Trac] #22862: Convert WordPress admin CSS to use SASS

[WordPress Trac]

#22862: Convert WordPress admin CSS to use SASS
--------------------------------------+-----------------------------
 Reporter:  chriswallace              |       Type:  feature request
   Status:  new                       |   Priority:  normal
Milestone:  Awaiting Review           |  Component:  Appearance
  Version:                            |   Severity:  normal
 Keywords:  dev-feedback ui-feedback  |
--------------------------------------+-----------------------------
 The WordPress admin UI CSS is woefully doomed to a life of inadequacy
 unless we can amenably agree to use technology already available to build
 a better future for us and our children.

 I propose the introduction of SASS for the WordPress admin styling. SASS
 is a CSS pre-processor that allows us to write DRY, structured,
 lightweight CSS. In terms of licensing, SASS is GPL-compatible, licensed
 under the MIT license.

 '''Why use SASS over LESS?'''

 The answer is simple. SASS is easier to learn and easier to use because it
 follows the conventions of CSS at its core. In addition, for developers
 itching to contribute, there are some extremely useful and easy-to-follow
 reference docs for SASS, making it easy to set up your local development
 environment and build websites.

 '''What are the advantages?'''

 The biggest advantage is that we can write less CSS and offer advanced
 features for theming the WordPress Admin UI. Developers can more easily
 reskin the WordPress admin.

 Another major benefit is that SASS offers the use of variables within our
 stylesheets. For our purposes, these variables can be used to calculate
 layout widths, generate color schemes, font sizes, etc.

 Another simple advantage is the fact that we can combine all our CSS
 styles into a single stylesheet, saving precious HTTP requests. In
 addition, we can easily minify generated CSS files in bundled versions of
 WordPress, saving file size and killing unnecessary white space, thus
 decreasing load times of the admin even further.

 '''What are the disadvantages?'''

 Developers will need to install Ruby and SASS in order to modify styles
 for the WordPress Admin. For plugin authors, we should write admin UI CSS
 in such a way that it is easily overridden with a custom CSS file.

 In addition, developers would need to learn SASS if they are going to work
 directly on the styles for the WordPress admin. For the most part, once
 you've got the idea of variables, mix-ins, and the structure - you're
 ready to rock.

 Last, but not least, when SASS files are modified, they would need to be
 compiled and committed to Core every time they change. So instead of
 pushing a single CSS file, you would be pushing potentially many SCSS
 files and a generated CSS file.

 '''In Summary'''

 SASS is a great way to reduce code overhead by adhering to DRY principles
 and will improve performance and modularity in the WordPress admin, which
 is a top priority.

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