[6a3a178] | 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.
|
---|