Stylus チートシート（柔軟なCSSプリプロセッサ）

Stylus は、標準的な CSS の波括弧構文だけでなく、コロンやセミコロンを省略できる Python 風のインデント構文もサポートしています。

基本構文と変数代入（Syntax & Variables）

.box
  color: blue

  .button
    color: red

// Variables & Conditional Assignment
royal-blue = #36a
royal-blue ?= #89f

div
  color: royal-blue  // Evaluates to #36a

---

Mixin・ブロックMixin・可変長引数

// Mixin with defaults
border-radius(n = 2px)
  -webkit-border-radius: n
  border-radius: n

div
  border-radius(4px)

// Block Mixins
mobile()
  @media (max-width: 480px)
    {block}

+mobile()
  width: 100%

// Rest Parameters
shadow(offset-x, args...)
  box-shadow: offset-x args

#login
  shadow: 1px 2px 5px #eee

---

関数定義・複数返却値・セレクタ補間

add(a, b = 2)
  a + b

body
  padding: add(10px, 5)  // 15px

// Multiple Return Values
sizes()
  8px 16px

sizes()[0]  // 8px

// Interpolation
$icon-path = "/images"

.icon
  background-image: url("%s/icon.png" % $icon-path)

.parent
  &:hover
    opacity: 0.8

---

関連するチートシート

• Sass
• Less