1 | # Stylus [![Build Status](https://travis-ci.org/stylus/stylus.svg?branch=master)](https://travis-ci.org/stylus/stylus)
|
2 |
|
3 | Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
|
4 |
|
5 | ## Installation
|
6 |
|
7 | ```bash
|
8 | $ npm install stylus -g
|
9 | ```
|
10 |
|
11 | ### Example
|
12 |
|
13 | ```stylus
|
14 | border-radius()
|
15 | -webkit-border-radius: arguments
|
16 | -moz-border-radius: arguments
|
17 | border-radius: arguments
|
18 |
|
19 | body a
|
20 | font: 12px/1.4 "Lucida Grande", Arial, sans-serif
|
21 | background: black
|
22 | color: #ccc
|
23 |
|
24 | form input
|
25 | padding: 5px
|
26 | border: 1px solid
|
27 | border-radius: 5px
|
28 | ```
|
29 |
|
30 | compiles to:
|
31 |
|
32 | ```css
|
33 | body a {
|
34 | font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
|
35 | background: #000;
|
36 | color: #ccc;
|
37 | }
|
38 | form input {
|
39 | padding: 5px;
|
40 | border: 1px solid;
|
41 | -webkit-border-radius: 5px;
|
42 | -moz-border-radius: 5px;
|
43 | border-radius: 5px;
|
44 | }
|
45 | ```
|
46 |
|
47 | the following is equivalent to the indented version of Stylus source, using the CSS syntax instead:
|
48 |
|
49 | ```stylus
|
50 | border-radius() {
|
51 | -webkit-border-radius: arguments
|
52 | -moz-border-radius: arguments
|
53 | border-radius: arguments
|
54 | }
|
55 |
|
56 | body a {
|
57 | font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
|
58 | background: black;
|
59 | color: #ccc;
|
60 | }
|
61 |
|
62 | form input {
|
63 | padding: 5px;
|
64 | border: 1px solid;
|
65 | border-radius: 5px;
|
66 | }
|
67 | ```
|
68 |
|
69 | ### Features
|
70 |
|
71 | Stylus has _many_ features. Detailed documentation links follow:
|
72 |
|
73 | - [css syntax](docs/css-style.md) support
|
74 | - [mixins](docs/mixins.md)
|
75 | - [keyword arguments](docs/kwargs.md)
|
76 | - [variables](docs/variables.md)
|
77 | - [interpolation](docs/interpolation.md)
|
78 | - arithmetic, logical, and equality [operators](docs/operators.md)
|
79 | - [importing](docs/import.md) of other stylus sheets
|
80 | - [introspection api](docs/introspection.md)
|
81 | - type coercion
|
82 | - [@extend](docs/extend.md)
|
83 | - [conditionals](docs/conditionals.md)
|
84 | - [iteration](docs/iteration.md)
|
85 | - nested [selectors](docs/selectors.md)
|
86 | - parent reference
|
87 | - in-language [functions](docs/functions.md)
|
88 | - [variable arguments](docs/vargs.md)
|
89 | - built-in [functions](docs/bifs.md) (over 60)
|
90 | - optional [image inlining](docs/functions.url.md)
|
91 | - optional compression
|
92 | - JavaScript [API](docs/js.md)
|
93 | - extremely terse syntax
|
94 | - stylus [executable](docs/executable.md)
|
95 | - [error reporting](docs/error-reporting.md)
|
96 | - single-line and multi-line [comments](docs/comments.md)
|
97 | - css [literal](docs/literal.md)
|
98 | - character [escaping](docs/escape.md)
|
99 | - [@keyframes](docs/keyframes.md) support & expansion
|
100 | - [@font-face](docs/font-face.md) support
|
101 | - [@media](docs/media.md) support
|
102 | - Connect [Middleware](docs/middleware.md)
|
103 | - TextMate [bundle](docs/textmate.md)
|
104 | - Coda/SubEtha Edit [Syntax mode](https://github.com/atljeremy/Stylus.mode)
|
105 | - gedit [language-spec](docs/gedit.md)
|
106 | - VIM [Syntax](https://github.com/wavded/vim-stylus)
|
107 | - Espresso [Sugar](https://github.com/aljs/Stylus.sugar)
|
108 | - [Firebug extension](docs/firebug.md)
|
109 | - heroku [web service](http://styl.heroku.com) for compiling stylus
|
110 | - [style guide](https://github.com/lepture/ganam) parser and generator
|
111 | - transparent vendor-specific function expansion
|
112 |
|
113 | ### Community modules
|
114 |
|
115 | - https://github.com/stylus/stylus/wiki
|
116 |
|
117 | ### Framework Support
|
118 |
|
119 | - [Connect](docs/middleware.md)
|
120 | - [Play! 2.0](https://github.com/patiencelabs/play-stylus)
|
121 | - [Ruby On Rails](https://github.com/forgecrafted/ruby-stylus-source)
|
122 | - [Meteor](http://docs.meteor.com/#stylus)
|
123 | - [Grails](http://grails.org/plugin/stylus-asset-pipeline)
|
124 | - [Derby](https://github.com/derbyjs/derby-stylus)
|
125 |
|
126 | ### CMS Support
|
127 |
|
128 | - [DocPad](https://github.com/bevry/docpad)
|
129 | - [Punch](https://github.com/laktek/punch-stylus-compiler)
|
130 |
|
131 | ### Screencasts
|
132 |
|
133 | - [Stylus Intro](http://screenr.com/bNY)
|
134 | - [CSS Syntax & Postfix Conditionals](http://screenr.com/A8v)
|
135 |
|
136 | ### Authors
|
137 |
|
138 | - [TJ Holowaychuk (tj)](https://github.com/tj)
|
139 |
|
140 | ### More Information
|
141 |
|
142 | - Language [comparisons](docs/compare.md)
|
143 |
|
144 | ## License
|
145 |
|
146 | (The MIT License)
|
147 |
|
148 | Copyright (c) Automattic <developer.wordpress.com>
|
149 |
|
150 | Permission is hereby granted, free of charge, to any person obtaining
|
151 | a copy of this software and associated documentation files (the
|
152 | 'Software'), to deal in the Software without restriction, including
|
153 | without limitation the rights to use, copy, modify, merge, publish,
|
154 | distribute, sublicense, and/or sell copies of the Software, and to
|
155 | permit persons to whom the Software is furnished to do so, subject to
|
156 | the following conditions:
|
157 |
|
158 | The above copyright notice and this permission notice shall be
|
159 | included in all copies or substantial portions of the Software.
|
160 |
|
161 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
162 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
163 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
164 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
165 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
166 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
167 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|