stylus-structure
Stylus Structure
Scott Kehr
Folder Structure
Files with styl extension get compiled and compressed
Compressed files get moved into min folder
-
min folder lives at the root of parent module's stylesheet folder
-
Compressed file's path will match original files path relative to stylesheets folder
-
Compressed file's will have a css extension
Imports
Instead of manifests we will use @import to concatenate Stylus files
How to Convert
Create a file with a styl extension
Convert all files you need to concatenate into Stylus
- CSS files will not be imported correctly
Import each stylus file you need in the order you need it
Stylus and imports can live within same file
- Keep all imports at the top of the file for organizational purposes
Remove any manifest files you are no longer using
Converting CSS to Stylus
Replace the css extension with a styl extension
Run grunt stylus and make sure it doesn't choke on anything
- CSS is valid Stylus
Remove all css specific markup ({, }, :, ;)
Remove unneeded vender prefixes
Cleanup code by organizing blocks and creating mixins