Stylus入門

自分用メモを兼ねてまとめておきます。
もっと流行ってくれることを祈りつつ・・・
(最近公式ページが新しくなりましたね！)

# [Stylus](http://stylus-lang.com/)とは

* Node.js製のCSSプリプロセッサ。
* node.jsのexpressやjadeと同じ人が開発してる。
* `コロン`, `セミコロン`, `カンマ`, `波括弧`を省略して記述できる。
* 拡張子は`.styl` もしくは　`.stylus`

※似たようなものにLESSやSass(SCSS)などがあります。

# 導入
何はなくともまずはNode.jsをインストール
コマンドプロンプトもしくはターミナルで
```$ npm i -g stylus```
以上

## コンパイル
コマンドラインからコンパイルします。

```console
// 同じディレクトリに同じファイル名でコンパイル
$ stylus file.styl

// 出力先を指定してコンパイル
$ stylus file.styl --out path/to/directory
$ stylus file.styl -o path/to/directory

// ファイルを監視して変更があればコンパイル
$ stylus -w file.styl
$ stylus --watch file.styl
```

### gulpでコンパイル

毎回コマンドラインに打つのも大変なのでgulpでタスク化します。
[こちら](https://www.npmjs.com/package/gulp-stylus)を使ってコンパイルします。

```console
$ npm i --save-dev gulp-stylus
```

```gulptask.js
var gulp        = requier('gulp'),
    gulp-stylus = require('gulp-stylus');

var path = {
    'stylusFile': ['path/to/stylus/**/!(_)*.styl']
};

gulp.task('stylus', function() {
    return gulp.src(path.stylusFile)
        .pipe(stylus({
            compress: true,
            use: [
                // 例
                // koutoSwiss(),
            ]
        }))
        .on('error', function (err) {
            console.error('Error', err.message);
        })
        .pipe(gulp.dest("public/css"));
});

gulp.task('watch-stylus', function(){
    gulp.watch(path.stylusFile, ['stylus']);
});

```


# 記述の基本
Stylusの良い所はなんといっても書き方に幅があること。
LESSやSCSSのようなCSS風の書き方でも良いし、Sassのような省略形の記述もできる。
初めのうちはCSS風に書いて、慣れてきたら省略して書いていけばよいかと思います。

```sample.styl
.test {
    .hoge {
        color: red;
        &:hover {
            color: blue;
        }
    }
}
```

もしくは

```sample.styl
.test
    .hoge
        color red
        &:hover
            color blue
```

このように書ける。

## コメント
コメントは以下のように書くことができる。
基本的には`compress`するとコメントは残らないが`/*!`を使用すると`compress`してもコメントを残すことができる。

```
// 一行のコメント

/*
 * 複数行のコメント
 */

/*!
 * compressしても残るコメント
 */
```

# VARIABLES(変数)
SassやLessと同様、変数に値を代入しておくことができます。
`=`を使うことによって代入できます。

```
font-size = 14px
font = font-size "Lucida Grande", Arial

body
    font font, sans-serif
```

もちろんSass式に書いても大丈夫

```
$font-size = 14px
body {
    font $font-size sans-serif
}
```

`@`をつけるとプロパティを変数のように扱うこともできます。

```
 #logo
    position absolute
    top 50%
    left 50%
    width w = 150px           // 一旦変数に入れる
    height 80px
    margin-left -(w / 2)
    margin-top -(@height / 2) // @heignt = 80px
```

# OPERATOR
演算を行うことができます。

```
 .
 []
 ! ~ + -
 is defined
 ** * / %
 + -
 ... ..
 <= >= < >
 in
 == is != is not isnt
 is a
 && and || or
 ?:
 = := ?= += -= *= /= %=
 not
 if unless
```

# `@IMPORT` AND `@REQUIRE`
ファイルを読み込む際は`@import`を使用します。
拡張子が`.styl`の場合は拡張子を省いて記述することが可能です。
また、特定ディレクトリ以下すべてを読み込む場合は`*`が使用できます。

```commmon.styl
@import "normalize.css"
@require "common"
@import "directory/*"
```
`@require` を使った場合は一度だけインポートされます

# MIXINS
他CSSプリプロセッサでもお馴染みのMixinももちろんStylusで使うことが出来ます。
同じようなスタイルを何度も書かなくても定義しておくことが出来ます。

```mixin.styl
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)
```

compile後

```mixin_compile.css
form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
```

# FUNCTION

Mixinと同じ要領で関数を作ることができます。

```function.styl
add(a, b)
  a + b
```

[予め用意された](http://stylus-lang.com/docs/bifs.html)関数もあります

## `@EXTEND`
一度書いたスタイルを再利用することができます。
例えば今まで以下のように書いていたスタイルがあるとして、

```example.css
.message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}
```

`@extend`を使うと以下のようになります。

```example.styl
.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  @extend .message;
  color: #E2E21E;
}
```

コンパイル後で比較すると素で書いているスタイルの方が文字数は少ないですが、Stylusで書いている方が読みやすいかと思います。

## `@block`
明示的に使わなくても良いのですが、変数に複数のプロパティを格納することができます。

```
foo =
  width: 20px
  height: 20px
```

`@block`を使う場合は以下

```
foo = @block {
  width: 20px
  height: 20px
}
```

定義した`foo`を使う

```
.icon
  {foo}
```

```css:compile
.icon {
  width: 20px;
  height: 20px;
}
```

# URL()
まだ使い方がわかっていませんが、画像パスを指定するとバイナリに変換してくれるっぽいです。

```
  stylus(str)
    .set('filename', __dirname + '/css/test.styl')
    .define('url', stylus.url())
    .render(function(err, css){

    });
```

デフォルトで30kbまでのリミットがかけられているみたいですが`limit`オプションを`false`にすると解除できるみたい


引き続き使いつつ追記していきたいと思いまーす。