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