Working with Less and Stylus

By default, Atomic Docs is set up for Sass. Setting up Atomic Docs with Less or Stylus is pretty easy, but comes with one caveat.


By convention, LESS and Stylus partials are not prefixed with an underscore like Sass partials are. In Atomic Docs, at least for the moment, all partials are created with the underscore whether Sass, Less or Stylus. Everything still works as it should though, so if the underscores don't bother you, you're good to go.


The following are the steps for setting up Atomic Docs to work with Less. For stylus use the styl extension instead of less as shown in the example.

  1. Click the gear icon in the blue toolbar in the upper left.

  2. In the Edit style directory name field you can change it to whatever you'd like. We will go ahead and change it to less
  3. In the Edit style file extension field enter .less

  • Set up your pre-processor and start creating your categories and components at http://localhost/atomic-docs/atomic-core/.