0 0


On Github scottrkehr / 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


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