Consider a CSS preprocessor
|Reported by:||chriswallace||Owned by:|
|Milestone:||3.8||Priority:||highest omg bbq|
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.
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.
Change History (83)
- Component changed from Appearance to Administration
- Keywords dev-feedback ui-feedback removed
- Summary changed from Convert WordPress admin CSS to use SASS to Consider a CSS preprocessor
comment:40 wonderboymusic — 7 months ago
comment:69 helen — 4 months ago
- Milestone changed from Awaiting Review to 3.8
- Type changed from feature request to task (blessed)