Edited at

Stylusのあんちょこ꒰。・ω・`;꒱

More than 1 year has passed since last update.


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



  • StylusはCSSメタ言語の1つで、CSSより効率的に記述できる。

  • Stylusでは「*.styl」を「例)stylus original.styl」等のコマンドでCSSにコンパイル(変換)できる。(express, Derby等のフレームワークではプロジェクト生成でstylusさえ選んでおけば、コンパイルモジュールはインストールされる模様。)

  • DRY指向で、SASS+α。SASSの変数・リスト・四則演算・関数・mixin(使い回し)等が利用できるし、記述も簡素化できる。

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



学習計画

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


  • 前提知識として下記は習得しておきたい。


    • HTML/CSS/CSS3/SASS

    • Unix Command

    • Node.js/npm(パッケージインストール用) 




公式サイト/学習サイト


読んで面白かった記事とか


最初の一歩

Stylus

Expressive, dynamic, robust CSS = 表現豊かに動的に記述できる構造的に頑丈なCSS?

→ さっぱり、よくわからない。。。

→ 要するに、従来のCSSやSASSよりコードを構造的に綺麗にすっきり書けるし、効率もいいよってこと?

→ とりあえず、Docsのとおり、手を動かそうょ!


要点

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


インストール


console

$ npm install stylus -g


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


コンパイル(変換)

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


console.log

$ stylus (Stylusディレクトリパス)--out (CSSディレクトリパス)



コメント


sample.styl

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

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

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



エスケープ


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


002_selectors/stylus/003_sample_parent_reference.styl

.foo[title='\&']

color yellow

 ↓


002_selectors/stylus/003_sample_parent_reference.css

.foo[title='&'] {

color: #ff0;
}


ネスト


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


セレクタ & /



  • 「,」で複数並列可。

  • 「&」で親要素、「/」でルート要素にアクセスする。


&の例(Stylus)

textarea, input // <- 親要素

color #A7A7A7
&:hover
color #000

 ↓


&の例(CSS)

textarea,

input {
color: #a7a7a7;
}
textarea:hover, /* <- :hoverは親要素textareaに付く。*/
input:hover {
color: #000;
}

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


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に代入される


 ↓


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では、プロパティが存在しない場合の初期値を設定できる。


キャスト


  • プロパティ値は曖昧性がないように()で囲う。


キャストの例

border-width (5 + 2)px



挿入(文字列挿入){}


挿入

aaa-{'bbb-' + 'ccc'} => aaa-bbb-ccc



OPERATORS:演算子


  • リスト 例)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



環境の準備(インストール)


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)


  • TODO : コンパイルの種類


【STDIO】コンパイル


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



デバッグ実行


console

$ stylus

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


REPL


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でインポートする。


フォルダ構成

 +-index.html ※今回、不使用。

+-stylus(記述ファイル保存先)
+-sample.styl
+-css(変換後ファイル保存先)
+-sample.css


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


console

# stylus (Stylusのディレクトリパス)(CSSのディレクトリパス)

$ stylus 001_hello/stylus/ --out 001_hello/css/



sample.css


sample.css

body {

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



Appendix


コマンド ヘルプ


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に反映される。


サンプル


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)


& : 親要素の参照


002_selectors/stylus/003_sample_parent_reference.styl

textarea, input // <- 親要素

color #A7A7A7
&:hover
color #000

 ↓


002_selectors/stylus/003_sample_parent_reference.css

textarea,

input {
color: #a7a7a7;
}
textarea:hover,
input:hover {
color: #000;
}


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


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に代入される


 ↓


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 /* 末尾の引数 */;
}


エスケープ文字(*\*&)


002_selectors/stylus/003_sample_parent_reference.styl

.foo[title='\&']

color yellow

 ↓


002_selectors/stylus/003_sample_parent_reference.css

.foo[title='&'] {

color: #ff0;
}


ルート参照


004_selector_built_in_function.styl

textarea input

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

 ↓


004_selector_built_in_function.css

textarea input {

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



要点(003_variables)

要点
補足
サンプル
解説

変数の定義
$(変数名)=(値)
or(変数)=(値)
※$は任意。
001_sample_variables.styl

@(プロパティ名)
プロパティ値を参照。
002_sample_property_lookup.styl

unless
プロパティ値が存在しない場合の初期値を設定。
004_sample_bubble_up.styl


変数の定義


001_sample_variables.styl

$font-size = 14 // or font-size = 14

body
font font-size Arial, sans-serif



プロパティ値の参照


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


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,
002_sample_selector_interpolation.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


 ↓


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;
}


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


 ↓


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
!!0 = false
0 = 0

0がfalse、それ以外がtrue。

リスト
例)1 2 3
002_sample_binary_operator.styl

キャスト

()で囲む、あるいは、unit関数使用可。

※サンプルは公式サイトを見た方が早い。


真偽判定

false と判定されるもの


真偽値: false

数値: 0

NULL値: null

文字列: ''(空文字列)

リスト:? 



留意点


  • 0px, 0%のように単位がついているものは、true。

  • リストは要素数があれば、true。


演算子の優先順序

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

演算子
説明

.

[]
添字

is defined
定義されているか、否か。

**
*
/
%
**...n乗
*...乗算
/...割算
%...除算

...
..
Range
1...5 = 1 2 3 4
1..5 = 1 2 3 4 5

<= >= < >
大小比較

in
含有?ex)n in list

==
!=
is
not
isnt
等号、不等号

is a
インスタンス

and(&&)
or(||)
論理演算

?:
三項演算子
例)flag ? value_1 : value_2

=
?=(:=)
+=
-=
*=
/=
%=
?=(:=)
変数値が存在しない場合、指定値を代入する。
color := white
color ?= white
color = color is defined ? color : white

not
否定

if
unless
分岐(〜であれば、〜でなければ)


リスト


002_sample_binary_operator.styl

list = 1 2 3

list[0] //=> 1 // 昇順で検索
list[-1] //=> 3 // 降順で検索



キャスト


n/a.styl

a = 15 

(a)px => 15px
unit(a, 'px') => 15px



Appendix


継承(extend)・mixin・関数(function)の使分け


  • 継承はスタイルの共通性&親子関係が見いだせる時に有効かな?→クラス構造

  • mixinはグルーピングではなく、引数が渡せる。@contentも使用可。※@contentは子から親に機能を受け渡すイメージ? →プロシージャっぽい? 

  • 関数は引数を与えて、適宜、戻り値を渡している。

そもそも、おのおの概念的に全く別ものな感触なのだが。。。

static/
dynamic
引数
グルーピング
返り値

継承(extend)
static
-

ブロック

mixin
static

×
ブロック

関数(function)
static

-


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...TextMate(The Missing Editor for Mac OS X)にバンドル済

  • and more!....などなど。

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


インストール


console

# Ruby インストール状態の確認(インストール済)

$ node -v
v0.10.26
$ npm install stylus -g
:
$ stylus -V
0.52.4


コンパイル(詳細)


コマンド ヘルプ


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)


未勉強

Compass Core Framework


あとがき

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


  • JAVASCRIPT API...JSからの呼出方法。

  • SOURCEMAP...ソースマップ使用可。


    • 「stylus -w -m sample.styl」でコンパイルする。※-wはwatchオプション。

    • 「sample.style.css.map」ファイルが作製される。

    • デバッグ時にソースコードとの対応を確認することが可能となる。



  • NIB(CSS3拡張)...複雑なスタイルを簡易なコマンドで設定可。