Features Videos Help About Updates
Menu Buy Now

Languages: Stylus

First Steps
Getting Started
Live-Reload Browsers
Browser Sync
Set Language Options
Set Output Paths & Action
Second Steps
Defaults For New Projects
Build Your Project
Set Target Browsers
Stuff To Be Aware Of
CodeKit + Git
Troubleshooting
License Recovery
Tools
npm
Autoprefixer
Babel—JS Transpiler
Terser—JS Minifier
Rollup—JS Bundler
Cache-Buster
HTML-Minifier
Libsass
Bless
Languages
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug (Jade)
Haml
Slim
Kit
Markdown
JSON
Image Optimizers
WebP
PNG
JPEG
SVG
GIF
Frameworks
CodeKit Frameworks
Bourbon
Bourbon Neat
Bitters
Zurb Foundation
Susy
Nib
Jeet
Compass
Syntax Checkers
ESLint
JSHint
JSLint
CoffeeLint
Advanced
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins
Nova
Atom
Sublime Text
Coda 2
More
New in 3.0
Read-Only Mode
Upgrading From 2.0
FAQ
The Stylus logo

What's Stylus?

Stylus adds variables, nesting, mixins, and more to regular CSS. It also allows you to (optionally) omit extra characters like braces and semicolons.

CodeKit compiles Stylus files into CSS files.


Stylus Options

First, make sure you've read Setting Language Options.

A screenshot of the stylus inspector in the codekit window

To set options for all Stylus files in a project simultaneously, open Project Settings and choose the Stylus category under Languages. To change options for just one file, select it and use the inspector pane shown above.

Output Style

Choose Compressed for the smallest CSS files. The other options yield pretty-printed CSS, but you don't need that because you'll use source maps.

Debug Style

This should be None. Otherwise, selectors in your CSS file will have comments telling you where they came from in your Stylus file. You don't need this because you'll use source maps.

Source Maps

This places a *.map file next to the compiled CSS. Browsers use this file to show you the original Stylus code in the web inspector instead of the compiled CSS.

Include CSS Imports

When enabled, the contents of a CSS file that you @import in your Stylus file will replace the import statement in the compiled output. If this option is off, the import statement is copied, verbatim, to the output CSS file (since import statements are valid CSS).

Resolve Relative URL Import Paths

Enabling this option will rewrite URLs so they are always relative to the base file.

Autoprefixer & Bless

For details, read Autoprefixer and Bless.

a screenshot of the output path section of the file inspector in the codekit window
Output Path & Action

These options apply to files of all types. They are explained in Setting Output Paths & Actions.


Linked Files

Stylus files can import other files. To view these relationships, click the Linked Files tab:

a screenshot of the linked files pane of the stylus file inspector in the codekit window

At the top, this pane shows all files that your selected Stylus file imports. Below that are all the files that import the one you have selected. If you see [FW] after the filename, that file is part of a CodeKit Framework

The _Partial Convention

If a filename starts with an underscore, CodeKit automatically sets the Output Action for that file to Ignore. These files are known as "partials"; they are meant to be imported into other files rather than compiled on their own.

Import Globbing

CodeKit supports Stylus "import globbing". If you write @import 'someFolder/*', all Stylus files in someFolder will be imported in alphabetical order. "Multi-level" globbing such as folder/**/*, however, is not supported because it's a terrible idea.

Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy