Stylus

英語

中国語
中国語(張鑫旭)

英語

中国語
中国語(張鑫旭)

外観

トップに戻る
このページについて

表現力豊かで、動的で、堅牢なCSS

CSSにはヒーローが必要だ 

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

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

波括弧を省略できたらどうだろう？ 

body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

セミコロンはどうだろう？ 

body
  font: 12px Helvetica, Arial, sans-serif

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

body
  font: 12px Helvetica, Arial, sans-serif

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

DRY原則を維持する 

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

透過的なMixinはどうだろう？ 

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

作成＆共有 

@import 'vendor'

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

@import 'vendor'

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

言語組み込み関数も！ 

sum(nums...)
  sum = 0
  sum += n for n in nums

sum(1 2 3 4)
// => 10

sum(nums...)
  sum = 0
  sum += n for n in nums

sum(1 2 3 4)
// => 10

すべてがオプションだったらどうだろう？ 

fonts = Helvetica, Arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

fonts = Helvetica, Arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

Stylusでスタイリングを始めよう

Node.js がインストールされていれば、Stylusのインストールは非常に簡単です。お使いのプラットフォーム用のバイナリを入手し、Nodeのパッケージマネージャーであるnpmも含まれていることを確認してください。

次に、ターミナルで入力します

$ npm install stylus -g

$ npm install stylus -g

これらの機能、または以下にリストされている機能を備えた、Node.js向けの表現力豊かなCSS言語が必要な場合は、詳細について  GitHub にアクセスしてください。

機能

  • コロンは省略可能
  • セミコロンは省略可能
  • カンマは省略可能
  • 波括弧は省略可能
  • 変数
  • 式展開
  • Mixin
  • 算術演算
  • 型強制
  • 動的インポート
  • 条件分岐
  • 反復処理
  • ネストされたセレクタ
  • 親要素参照
  • 可変関数呼び出し
  • レキシカルスコープ
  • 組み込み関数 (60以上)
  • 言語組み込み関数
  • 圧縮は省略可能
  • 画像のインライン化は省略可能
  • Stylus実行可能ファイル
  • 堅牢なエラーレポート
  • 単一行および複数行コメント
  • 複雑な場合のためのCSSリテラル
  • 文字エスケープ
  • TextMateバンドル
  • その他多数！