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.
|
---|