More than 5 years have passed since last update.

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

stylus

Last updated at 2018-03-27Posted at 2015-10-26

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

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

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

学習計画

技術的ルーツを考えると、CSS３①→SASS③→Stylusという流れがよいのでは？
- CSS→Stylusを学ぶまでの軌跡① CSS3 ※ほぼ省略
- CSS→Stylusを学ぶまでの軌跡② SASS
- CSS→Stylusを学ぶまでの軌跡③ LESS
- 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
Stylus — expressive, robust, feature-rich CSS preprocessor（GitHub）
GitHub　→　ソースコードあるよ。
Try Stylus（オンライントライ）

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

Sass と LESS 以外の選択肢 Stylus→よくまとまっているよ！
SASSよりもStylusが優れている5つのポイント
Node.jsアプリでCSSテンプレートにStylusを使う→expressjsで使うひとは読むといいかもよ？
ドットインストールには学習動画がまだない。。。もちろん、日本語の記事もあんまりない。。。(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥｀)

最初の一歩

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

【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

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

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）

インデントによるネスト表現（{}は不要）
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	分岐（〜であれば、〜でなければ）

キャスト

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	◯	-	値

MD-BLOG_WEB CREATIVE ： Sass解説 - extend, mixin, functionが分かりやすい。

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）

Prepros 29USD
Koala Free?

未勉強

あとがき

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

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

学習計画

公式サイト／学習サイト

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

最初の一歩

要点

インストール

コンパイル（変換）

コメント

エスケープ

ネスト

セレクタ & /

変数 $（オプション）

プロパティ値

キャスト

挿入（文字列挿入）{}

OPERATORS：演算子

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

コンパイル（変換）の流れ（.styl→.css）

【STDIO】コンパイル

デバッグ実行

REPL

Hello Stylus! 001_hello

ファイル構成（例）

sample.styl

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

sample.css

Appendix

コマンド ヘルプ

要点（001_hello）

サンプル

要点（002_selectors）

サンプル（002_selectors）

& : 親要素の参照

エスケープ文字（\&）

ルート参照

要点（003_variables）

変数の定義

プロパティ値の参照

unless

要点（004_interporation）

挿入

要点（005_operators）

真偽判定

留意点

演算子の優先順序

リスト

キャスト

Appendix

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

Features

インストール

コンパイル（詳細）

コマンド ヘルプ

Appendix

GUIコンパイラ（SASS+LESS）

未勉強

あとがき

コマンド　ヘルプ

コマンド　ヘルプ