Stylusのあんちょこ꒰｡･ω･`;꒱

# ざっくりまとめると...

- [Stylus](http://stylus-lang.com/)はCSSメタ言語の１つで、CSSより効率的に記述できる。
- Stylusでは「\*.styl」を「例）**stylus** original.styl」等のコマンドでCSSにコンパイル（変換）できる。（[express](http://blog.ruedap.com/2011/06/22/node-js-express-app-css-template-stylus), Derby等のフレームワークではプロジェクト生成でstylusさえ選んでおけば、コンパイルモジュールはインストールされる模様。）
- DRY指向で、SASS+α。SASSの変数・リスト・四則演算・関数・mixin（使い回し）等が利用できるし、記述も簡素化できる。

⇒具体的な内容は下項「Features」を参照。

----

# 学習計画

- 技術的ルーツを考えると、**CSS３①→SASS③→Stylus**という流れがよいのでは？
  - [CSS→Stylusを学ぶまでの軌跡① CSS3 ※ほぼ省略](http://qiita.com/shoko_kb/items/1439ef8554f0580cfa59)
  - [CSS→Stylusを学ぶまでの軌跡② SASS](http://qiita.com/shoko_kb/items/a2547b6dbb0f000c1a68) 
  - [CSS→Stylusを学ぶまでの軌跡③ LESS](http://qiita.com/shoko_kb/items/1fc602483b804be8cc5d)
  - **CSS→Stylusを学ぶまでの軌跡④ Stylus（本章）**
  - CSS→Stylusを学ぶまでの軌跡⑤ Appendix

※分量が多い為に分割されている。

- 前提知識として下記は習得しておきたい。
  - HTML/**CSS/CSS3/SASS**
  - Unix Command
  - Node.js/**npm（パッケージインストール用）**　

# 公式サイト／学習サイト
- [Expressive, dynamic, robust CSS — expressive, robust, feature-rich CSS preprocessor](http://stylus-lang.com/)
- [Stylus — expressive, robust, feature-rich CSS preprocessor（GitHub）](https://learnboost.github.io/stylus/docs/font-face.html)
- [GitHub](https://github.com/stylus/stylus)　→　ソースコードあるよ。
- [Try Stylus（オンライントライ）](https://learnboost.github.io/stylus/try.html)

## 読んで面白かった記事とか
- [Sass と LESS 以外の選択肢 Stylus](http://kyosuke.tumblr.com/post/14003234226/stylus)→よくまとまっているよ！
- [SASSよりもStylusが優れている5つのポイント](http://qiita.com/BYODKM/items/c1a51e3cb9884a7d4826)
- [Node.jsアプリでCSSテンプレートにStylusを使う](http://blog.ruedap.com/2011/06/22/node-js-express-app-css-template-stylus)→expressjsで使うひとは読むといいかもよ？

- ドットインストールには学習動画がまだない。。。もちろん、日本語の記事もあんまりない。。。(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥｀) 

# 最初の一歩

![Stylus](http://kwout.com/cutout/x/z6/t5/az8_bor.jpg)

**Expressive, dynamic, robust CSS** = 表現豊かに動的に記述できる構造的に頑丈なCSS？
→　さっぱり、よくわからない。。。
→　要するに、従来のCSSやSASSよりコードを構造的に綺麗にすっきり書けるし、効率もいいよってこと？

**→　とりあえず、[Docs](http://stylus-lang.com/)のとおり、手を動かそうょ！**

# 要点

自分が知ってるところははしょった**あんちょこ**です。

## インストール

```bash:console
$ npm install stylus -g
```

-gをつけるかどうか各々決めてください。

## コンパイル（変換）

※ フレームワークで使う場合はパッケージによって自動変換されるので、コマンド不使用。

```bash:console.log
$ stylus （Stylusディレクトリパス）--out （CSSディレクトリパス）
```
  
## コメント

```styl:sample.styl
// 単　行　コメント（CSSに反映されない。）

/*
 * 複数行　コメント（CSSに反映される。圧縮時には反映されない。）
 */

/*!
 * 複数行　コメント（圧縮時もCSSに反映される。）
 */
```

## エスケープ

- エスケープは「\\」を付加する。

```styl:002_selectors/stylus/003_sample_parent_reference.styl
.foo[title='\&']
  color yellow
```

　↓

```css:002_selectors/stylus/003_sample_parent_reference.css
.foo[title='&'] {
  color: #ff0;
}
```

## ネスト
- ネストはインデントで表現できる。

## セレクタ **& /**
- **「,」**で複数並列可。
- **「&」で親要素、「/」でルート要素にアクセスする。**

```styl:&の例（Stylus）
textarea, input // <- 親要素
  color #A7A7A7
  &:hover
    color #000
```

　↓

```css:&の例（CSS）
textarea,
input {
  color: #a7a7a7;
}
textarea:hover,　/* <- :hoverは親要素textareaに付く。*/
input:hover {
  color: #000;
}
```

mixinの**＆**は呼出元の親要素を指す　※arguments = 全引数

```styl:mixinの&の例（Stylus）
box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
  html.ie8 &, html.ie7 &, html.ie6 & /* =>&は親要素の#loginを指す */
    border 2px solid arguments[length(arguments) - 1] /* 末尾の引数 */

body
  #login
    box-shadow 1px 1px 3px #eee //->argumentsに代入される
```

　↓

```css:mixinの&の例（CSS）
body #login {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
  border: 2px solid #eee /* 末尾の引数 */;
}
```

- selector関数：現在のセレクタにアクセスできる。
- unquote関数：プロパティ値が直書きで通らないに使用する？

## 変数 **$（オプション）**
- **（変数名）=（値）** or $（変数）=（値）で変数を定義する。


## プロパティ値
- @（プロパティ名）でプロパティ値を参照できる。
- **unless**では、プロパティが存在しない場合の初期値を設定できる。

## キャスト
- **プロパティ値は曖昧性がないように()で囲う。**

```styl:キャストの例
border-width (5 + 2)px
```

## 挿入（文字列挿入）**{}**

```styl:挿入
aaa-{'bbb-' + 'ccc'} => aaa-bbb-ccc
```

##[OPERATORS：演算子](http://qiita.com/shoko_kb/items/0de0c604a7370f7b8ca1)
  - リスト 例）list = 1 2 3 list[1]=> 2
  - Range **...**　例）1..5 = 1 2 3 4 **5**, 1...5 = 1 2 3 4 
  - キャスト **()**　例) num = 15 (num)px / unit(num, 'px') => 15px

----

## 環境の準備（インストール）

```bash:console
# Ruby インストール状態の確認（インストール済）
$ node -v
v0.10.26
$ npm install stylus -g
 :
stylus@0.52.4 /Users/shokokb/.nvm/v0.10.26/lib/node_modules/stylus
├── css-parse@1.7.0
├── debug@2.2.0 (ms@0.7.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── sax@0.5.8
├── source-map@0.1.43 (amdefine@1.0.0)
└── glob@3.2.11 (inherits@2.0.1, minimatch@0.3.0)
$ stylus -V
0.52.4
```

## [コンパイル（変換）の流れ（.styl→.css）](https://learnboost.github.io/stylus/docs/executable.html)

- TODO : コンパイルの種類

## 【STDIO】コンパイル

```bash:console
# sample.styl→sample.css（圧縮済）
$ stylus --compress < sample.styl > sample.css

# cssというディレクトリ内のStylusを、CSSに変換し、
# 同ディレクトリ内に保存する。
$ stylus css

# cssというディレクトリ内のStylusを、CSSに変換し、
# 「public/stylesheets」ディレクトリ内に保存する。
$ stylus css --out public/stylesheets

# ファイル指定
$ stylus one.styl two.styl

# 逆コンパイル（sample.css→sample.styl）
$ stylus --css < sample.css > sample.styl
$ stylus --css test.css
$ stylus --css test.css /tmp/out.styl
```

## デバッグ実行

```bash:console
$ stylus
body
    color red
    font 14px Arial, sans-serif
# Ctrl + Dを押下する事により、結果が表示される。
# CSS
body {
  color: #f00;
  font: 14px Arial, sans-serif;
}
```

## REPL

```bash:console

$ stylus -i
> color = white
=> #fff
> color - rgb(200,50,0)
=> #37cdff
> color
=> #fff
> color -= rgb(200,50,0)
=> #37cdff
> color
=> #37cdff
> rgba(color, 0.5)
=> rgba(55,205,255,0.5)
```

----

# Hello Stylus! 001_hello

## ファイル構成（例）

+ StylusをCSSに変換し、「css」フォルダに保存する。
+ cssに保管されたCSSをindex.htmlでインポートする。

```text:フォルダ構成
 +-index.html　※今回、不使用。
 +-stylus（記述ファイル保存先）
   +-sample.styl
 +-css（変換後ファイル保存先）
   +-sample.css
```

## sample.styl

```styl:sample.styl
body
  font 12px Helvetica Arial sans-serif

a.button
  -webkit-border-radius 5px
  -moz-border-radius 5px
  border-radius 5px
```

## コンパイル（.styl→.css）

```bash:console
# stylus （Stylusのディレクトリパス）（CSSのディレクトリパス）
$ stylus 001_hello/stylus/ --out 001_hello/css/ 

```
### sample.css

```css:sample.css
body {
  font: 12px Helvetica Arial sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
```

----

# Appendix

## コマンド　ヘルプ

```bash:console
$ stylus -h

  Usage: stylus [options] [command] [< in [> out]]
                [file|dir ...]

  Commands:

    help [<type>:]<prop> Opens help info at MDN for <prop> in
                         your default browser. Optionally
                         searches other resources of <type>:
                         safari opera w3c ms caniuse quirksmode

  Options:

    -i, --interactive       Start interactive REPL
    -u, --use <path>        Utilize the Stylus plugin at <path>
    -U, --inline            Utilize image inlining via data URI support
    -w, --watch             Watch file(s) for changes and re-compile
    -o, --out <dir>         Output to <dir> when passing files
    -C, --css <src> [dest]  Convert CSS input to Stylus
    -I, --include <path>    Add <path> to lookup paths
    -c, --compress          Compress CSS output
    -d, --compare           Display input along with output
    -f, --firebug           Emits debug infos in the generated CSS that
                            can be used by the FireStylus Firebug plugin
    -l, --line-numbers      Emits comments in the generated CSS
                            indicating the corresponding Stylus line
    -m, --sourcemap         Generates a sourcemap in sourcemaps v3 format
    --sourcemap-inline      Inlines sourcemap with full source text in base64 format
    --sourcemap-root <url>  "sourceRoot" property of the generated sourcemap
    --sourcemap-base <path> Base <path> from which sourcemap and all sources are relative
    -P, --prefix [prefix]   prefix all css classes
    -p, --print             Print out the compiled CSS
    --import <file>         Import stylus <file>
    --include-css           Include regular CSS on @import
    -D, --deps              Display dependencies of the compiled file
    --disable-cache         Disable caching
    --hoist-atrules         Move @import and @charset to the top
    -r, --resolve-url       Resolve relative urls inside imports
    --resolve-url-nocheck   Like --resolve-url but without file existence check
    -V, --version           Display the version of Stylus
    -h, --help              Display help information
```

----

# 要点（001_hello）

|記号||CSSへの反映|
|:-----------|:-----------|:-----------|
|//|単行のコメント|CSSに反映されない。|
|/* */|複数行のコメント|CSSに反映される。圧縮時には反映されない。|
|/*! */|複数行のコメント|圧縮時もCSSに反映される。|

# サンプル

```styl:sample.styl

// 単　行　コメント（CSSに反映されない。）

/*
 * 複数行　コメント（CSSに反映される。圧縮時には反映されない。）
 */

/*!
 * 複数行　コメント（圧縮時もCSSに反映される。）
 */

```

----

# 要点（002_selectors）


1. インデントによるネスト表現（{}は不要）
2. 002_selectors/stylus/

|要点|補足|サンプル|解説|
|:-----------|:-----------|:-----------|:-----------:|
|インデントによるネスト表現|{}は不要。|001_sample_indentation.styl|-|
|カンマ区切りでのセット表記||002_sample_rule_sets.styl|-|
|&:親要素参照|argumentsはmixinの全引数。|003_sample_parent_reference.styl|◯|
|/:ルート要素参照|〃|〃|〃|
|selector()|標準組込関数。現在のセレクタを取得する。|002_selectors/stylus/005_sample_disambiguation.styl|-|

# サンプル（002_selectors）

## **\&** : 親要素の参照

```styl:002_selectors/stylus/003_sample_parent_reference.styl
textarea, input // <- 親要素
  color #A7A7A7
  &:hover
    color #000
```

　↓

```css:002_selectors/stylus/003_sample_parent_reference.css
textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

```

mixin内の**＆**は呼出元の親要素を指す　※arguments = 全引数

```styl:002_selectors/stylus/003_sample_parent_reference.styl
box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
  html.ie8 &, html.ie7 &, html.ie6 & /* =>&は親要素の#loginを指す */
    border 2px solid arguments[length(arguments) - 1] /* 末尾の引数 */

body
  #login
    box-shadow 1px 1px 3px #eee //->argumentsに代入される
```

　↓

```css:002_selectors/stylus/003_sample_parent_reference.css
body #login {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
  border: 2px solid #eee /* 末尾の引数 */;
}
```

## エスケープ文字（**\\**&）

```styl:002_selectors/stylus/003_sample_parent_reference.styl
.foo[title='\&']
  color yellow
```

　↓

```css:002_selectors/stylus/003_sample_parent_reference.css
.foo[title='&'] {
  color: #ff0;
}
```

## ルート参照

```styl:004_selector_built_in_function.styl
textarea input
  color: #A7A7A7
  &:hover, /* 親要素を指す */
  /.is-hovered /* ルートのクラスを指す */
    color #000
```

　↓

```css:004_selector_built_in_function.css
textarea input {
  color: #a7a7a7;
}
textarea input:hover,
.is-hovered {
  color: #000;
}
```

----

# 要点（003_variables）

|要点|補足|サンプル|解説|
|:-----------|:-----------|:-----------|:-----------:|
|変数の定義<br/>$（変数名）=（値）<br/>or（変数）=（値）|※$は任意。|001_sample_variables.styl|◯|
|@（プロパティ名）|プロパティ値を参照。|002_sample_property_lookup.styl|◯|
|unless|プロパティ値が存在しない場合の初期値を設定。|004_sample_bubble_up.styl|◯|

# 変数の定義

```styl:001_sample_variables.styl
$font-size = 14 // or font-size = 14

body
  font font-size Arial, sans-serif
```

# プロパティ値の参照

```styl:002_sample_property_lookup.styl
#logo
  position absolute
  top 50%
  left 50%
  // 変数を参照して、marginを決定
  // width  w = 150px
  // height h = 80px
  //margin-left -(w / 2)  // -75px
  //margin-top  -(h / 2)  // -40px
  // 変数を用意せず@propertyでも記述可。
  width 150px
  height 80px
  margin-left -(@width / 2)
  margin-top -(@height / 2)
```

# unless

```styl:004_sample_bubble_up.styl
position()
  position arguments
  // mixin呼出元でz-indexが存在しなければz-index:1を使用する。
  z-index 1 unless @z-index

#logo
  z-index 20
  position absolute

#logo2
  position absolute 
  // z-index 1
```

----

# 要点（004_interporation）

|要点|補足|サンプル|解説|
|:-----------|:-----------|:-----------|:-----------:|
|{}による文字列連結|例）-webkit-{'boder' + '-radius'} = -webkit-border-radius|001_sample_interporation.styl, <br/>002_sample_selector_interpolation.styl|◯|


## 挿入

```styl:sample_interporation.styl
// -webkit-{'boder' + '-radius'} = -webkit-border-radius

// mixin:vendor
vendor(prop, args)
  // webkit用の設定
  -webkit-{prop} args
  // mozilla用の設定
  -moz-{prop} args
  // 汎用の設定
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

button
  border-radius 1px 2px / 3px 4px
  //box-shadow 10px 10px
```

　↓

```css:001_sample_interporation.css
button {
  -webkit-border-radius: 1px 2px/3px 4px;
  -moz-border-radius: 1px 2px/3px 4px;
  border-radius: 1px 2px/3px 4px;
}
```

```styl:002_sample_selector_interpolation.styl
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height 10px * row

my_selectors = '#foo, #bar, .baz'

{my_selectors}
  background #000
```

　↓

```css:002_sample_selector_interpolation.css
table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}
#foo,
#bar,
.baz {
  background: #000;
}

```

----

# 要点（005_operators）

単なる数値・文字列の演算だけではなく、単位付きの値（例：ピクセル値、度数、パーセンテージ等）や色（RBG値）の演算も可。

|要点|補足|サンプル|解説|
|:-----------|:-----------|:-----------|:-----------:|
|!0 = true <br/>!!0 = false <br/>0 = 0|**0がfalse**、それ以外がtrue。||◯|
|リスト|例）1 2 3|002_sample_binary_operator.styl|◯|
|キャスト|**()**で囲む、あるいは、**unit関数**使用可。||◯|

※サンプルは[公式サイト](http://stylus-lang.com/docs/operators.html)を見た方が早い。

# 真偽判定

false と判定されるもの

> 真偽値: false
> 数値: 0
> NULL値: null
> 文字列: ''（空文字列）
> リスト:？　

## 留意点

- 0px, 0%のように単位がついているものは、true。
- リストは要素数があれば、true。

# 演算子の優先順序

※上に行くほど優先度が高く、下に行くほど優先度が低い。

|演算子|説明|
|:-----------|:-----------|
|.||
|[]|添字|
|is defined|定義されているか、否か。|
|\*\*<br/>\*<br/>/<br/>%|\*\*...n乗<br/>*...乗算<br/>/...割算<br/>%...除算|
|...<br/>..|Range<br/>1...5 = 1 2 3 **4**<br/>1..5 = 1 2 3 4 **5**<br/>|
|<= >= < >|大小比較|
|in|含有？ex）n in list|
|==<br/>!=<br/>is<br/>not<br/>isnt|等号、不等号|
|is a|インスタンス|
|and（&&）<br/>or（｜｜）|論理演算|
|?:|三項演算子 <br/>例）flag ? value_1 : value_2|
|=<br/>?=（:=）<br/>+=<br/>-=<br/>*=<br/>/=<br/>%=|?=（:=）<br/>変数値が存在しない場合、指定値を代入する。<br/>color := white<br/>color ?= white<br/>color = color is defined ? color : white|
|not|否定|
|if<br/>unless|分岐（〜であれば、〜でなければ）|


### リスト

```styl:002_sample_binary_operator.styl
list = 1 2 3
list[0]  //=> 1 // 昇順で検索
list[-1] //=> 3 // 降順で検索

```

### キャスト

```styl:n/a.styl
a = 15 
(a)px => 15px
unit(a, 'px') => 15px
```


----

# Appendix

## 継承（extend）・mixin・関数（function）の使分け

- 継承はスタイルの共通性＆親子関係が見いだせる時に有効かな？→**クラス構造**
- mixinはグルーピングではなく、引数が渡せる。@contentも使用可。※@contentは子から親に機能を受け渡すイメージ？　→**プロシージャ**っぽい？　
- 関数は引数を与えて、適宜、戻り値を渡している。

そもそも、おのおの概念的に全く別ものな感触なのだが。。。
 
||static/<br/>dynamic|引数|グルーピング|返り値|
|:-----------|:-----------:|:-----------:|:-----------:|:-----------:|
|継承（extend）|static|-|◯|ブロック|
|mixin|static|◯|×|ブロック|
|関数（function）|static|◯|-|値|

- [MD-BLOG_WEB CREATIVE ： Sass解説 - extend, mixin, function](http://www.monster-dive.com/blog/web_creative/20140222_001115.php)が分かりやすい。

## Features

- Optional colons...【オプション】プロパティ右隣のコロン（:）を省略可。
- Optional semi-colons...【オプション】区切り文字、セミコロン（;）を省略可。
- Optional commas...【オプション】デリミタカンマ（,）の省略可。
- Optional braces...【オプション】括弧の省略
- Variables...変数
- Interpolation...{}による構文挿入 例）-webkit-{'border' + '-radius'} = -webkit-border-radius.
- Mixins...mixinによる使い回し　
- Arithmetic...計算
- Type coercion...型強制（自動型変換）
- Dynamic importing...Partial。動的なインポート。
- Conditionals...分岐処理
− Iteration...反復処理
- Nested selectors...セレクタのネスト
- Parent referencing...親要素の参照　例）&:hover
- Variable function calls...可変関数（関数を変数として扱う）の呼出し
- Lexical scoping...スコーピング（宣言の場所により決定される変数やプロシージャの有効範囲がある。）
- Built-in functions (over 60)...豊富なBuilt-in関数（60種類を超える）
- In-language functions...埋込み関数
- Optional compression...【オプション】圧縮
- Optional image inlining...【オプション】画像インライン化
- Stylus executable...手動実行？
- Robust error reporting...強固なエラー検出
- Single-line and multi-line comments...単行・複数行コメント
- CSS literal for those tricky times...デバッグ等のためにCSS出力
- Character escaping...エスケープ文字（\）の採用
- [TextMate bundle](http://stylus-lang.com/docs/textmate.html)...TextMate（The Missing Editor for Mac OS X）にバンドル済
- and more!....などなど。

SASS+αの機能が多く有る。

## インストール

```bash:console
# Ruby インストール状態の確認（インストール済）
$ node -v
v0.10.26
$ npm install stylus -g
 :
$ stylus -V
0.52.4
```

## コンパイル（詳細）

## コマンド　ヘルプ

```bash:console
$ stylus -h

  Usage: stylus [options] [command] [< in [> out]]
                [file|dir ...]

  Commands:

    help [<type>:]<prop> Opens help info at MDN for <prop> in
                         your default browser. Optionally
                         searches other resources of <type>:
                         safari opera w3c ms caniuse quirksmode

  Options:

    -i, --interactive       Start interactive REPL
    -u, --use <path>        Utilize the Stylus plugin at <path>
    -U, --inline            Utilize image inlining via data URI support
    -w, --watch             Watch file(s) for changes and re-compile
    -o, --out <dir>         Output to <dir> when passing files
    -C, --css <src> [dest]  Convert CSS input to Stylus
    -I, --include <path>    Add <path> to lookup paths
    -c, --compress          Compress CSS output
    -d, --compare           Display input along with output
    -f, --firebug           Emits debug infos in the generated CSS that
                            can be used by the FireStylus Firebug plugin
    -l, --line-numbers      Emits comments in the generated CSS
                            indicating the corresponding Stylus line
    -m, --sourcemap         Generates a sourcemap in sourcemaps v3 format
    --sourcemap-inline      Inlines sourcemap with full source text in base64 format
    --sourcemap-root <url>  "sourceRoot" property of the generated sourcemap
    --sourcemap-base <path> Base <path> from which sourcemap and all sources are relative
    -P, --prefix [prefix]   prefix all css classes
    -p, --print             Print out the compiled CSS
    --import <file>         Import stylus <file>
    --include-css           Include regular CSS on @import
    -D, --deps              Display dependencies of the compiled file
    --disable-cache         Disable caching
    --hoist-atrules         Move @import and @charset to the top
    -r, --resolve-url       Resolve relative urls inside imports
    --resolve-url-nocheck   Like --resolve-url but without file existence check
    -V, --version           Display the version of Stylus
    -h, --help              Display help information
```

# Appendix

## GUIコンパイラ（SASS+LESS）
- [Prepros](http://alphapixels.com/prepros/) 29USD
- [Koala](http://koala-app.com/) Free?

# 未勉強

- [Compass Core Framework](http://compass-style.org/)
- [CSSフレームワーク「Compass」の基礎](http://codezine.jp/article/detail/7772)

![Compass Core Framework](http://kwout.com/cutout/w/tm/vi/feh_bor.jpg)

# あとがき

 ８月から「Node.jsってなに？CSSはかろうじて分かるけど、SASSってなによ？」という状態から始めました。「DerbyJSというフレームワークでStylusを使っていて、これも一緒に勉強した方がいいんじゃない？」という安易な理由です。あくまでも、**スピーディー**にざっくり学ぶ為に、直感的な内容です。誤解ばかりとおもいますが、少々の正誤は許してください。技術的な指摘がありましたら、コメント頂けるとうれしいです꒰ღ˘◡˘ற꒱♡

- JAVASCRIPT API...JSからの呼出方法。
- SOURCEMAP...ソースマップ使用可。
    - 「stylus -w -m sample.styl」でコンパイルする。※-wはwatchオプション。
    - 「sample.style.css.map」ファイルが作製される。
    - デバッグ時にソースコードとの対応を確認することが可能となる。
- NIB（CSS3拡張）...複雑なスタイルを簡易なコマンドで設定可。