Nib (in Stylus) のショートハンド

## プロパティに対するショートハンド

### border

```sass:stylus
.test
  border #fff
```

```css:css
.test {
  border: 1px solid #fff;
}
```

`border`プロパティに色だけを与えると自動で`1px`と`solid`を付加します。

### border-radius

```sass:stylus
.test1
  border-radius top 50px bottom 10px
.test2
  border-radius left 50px right 10px
.test3
  border-radius top left 15px
.test4
  border-radius top left 15px, bottom left 50px
```

```css:css
.test1 {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.test2 {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.test3 {
  border-top-left-radius: 15px;
}
.test4 {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 50px;
}
```

`top`、`bottom`及び`left`、`right` などを使うことによって包括指定ができる。
また`border-radius top left 15px`といった方法で個別指定もできる。
さらにカンマ区切りで個別指定を複数指定することもできる。

### liner-gradient

```sass:stylus
.test
	background linear-gradient(bottom left, #f00, #00f)
```

```css:css
.test {
  background: -webkit-linear-gradient(bottom left, #f00, #00f);
  background: -moz-linear-gradient(bottom left, #f00, #00f);
  background: -o-linear-gradient(bottom left, #f00, #00f);
  background: -ms-linear-gradient(bottom left, #f00, #00f);
  background: linear-gradient(to top right, #f00, #00f);
}
```

始端さえ指定すれば、終端を指定する`to`方式に変換する。

### image(background-image)

```sass:stylus
.test
	image 'dammy.png' 50px 100px
```

```css:css
.test {
  background-image: url("dammy.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
  .test {
    background-image: url("dammy@2x.png");
    -webkit-background-size: 50px 100px;
    -moz-background-size: 50px 100px;
    background-size: 50px 100px;
  }
}
```

`image 画像ファイル 横 高さ`によりレスポンシブ対応の画像を出力する。
ただし`元の名前@2x.拡張子`の倍画像を用意することが必要。

### overflow: ellipsis(text-overflow: ellipsis)

```sass:stylus
.test
  overflow: ellipsis
```

```css:css
.test {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
```

`overflow: ellipsis`を指定すると、`text-overflow: ellipsis;`用のプロパティ群に自動変換する。

### position

```sass:stylus
.test1
  fixed top
.test2
  absolute top left
.test3
  relative bottom right 10px
```

```css:css
.test1 {
  position: fixed;
  top: 0;
}
.test2 {
  position: absolute;
  top: 0;
  left: 0;
}
.test3 {
  position: relative;
  bottom: 0;
  right: 10px;
}
```

positionプロパティのうち`absolute`、`fixed`、`relative`に関して、`top`、`bottom`及び`left`、`right`を一度に指定する包括指定をすることができる。
一緒に指定される`top`、`bottom`、`left`、`right`については値を書かない場合`0`が付与される。

### size(width, height)

```sass:stylus
.test1
  size 50% 2px
.test2
  size 50% 2px
```

```css:css
.test1 {
  width: 20px;
  height: 20px;
}
.test2 {
  width: 50%;
  height: 2px;
}
```

`width`と`height`を一括指定する。値が１つの場合`width`と`height`にその値を、値が２つの場合`width`に１番目の値、`height`に２番目の値を割り振る。

## ミックスイン、その他

### clearfix()

```sass:stylus
.test
  clearfix()
```

```css:css
.test {
  zoom: 1;
}
.test:before,
.test:after {
  content: "";
  display: table;
}
.test:after {
  clear: both;
}
```

セレクターにclearfix()を与えるとその要素に対してクリアフィックス用のプロパティを付与する。

### hide-text()

```sass:stylus
.test
  hide-text()
```

```css:css
.test {
  text-indent: 101%;
  white-space: nowrap;
  overflow: hidden;
}
```

文字を領域外に追い出し見えなくさせるプロパティ群を提供する。

### replace-text()

```sass:stylus
.test
  replace-text(url(dammy.png), 50%, 50%)
```

```css:css
.test {
  text-indent: 101%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url("dammy.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
```

要素の文字を非表示にし、代わりに画像を表示する関数。
`background-position`に使われる第2,3引数は省略した場合どちらも50%になる。
（内部でhide-text()を使用）

### shadow-stroke()

```sass:stylus
.test
  shadow-stroke(blue)
```

```css:css
.test {
  text-shadow: -1px -1px 0 #00f, 1px -1px 0 #00f, -1px 1px 0 #00f, 1px 1px 0 #00f;
}
```

色の指定のみで上下左右の四方向にtext-shadowを指定できる。

### 各種リセット関数

```sass:stylus
reset-box-model()
```

```css:css
margin: 0;
padding: 0;
border: 0;
outline: 0;
body {
  background-color: #333;
}
```

下記のような各種のリセット用の関数を提供している。

+ global-reset()
+ nested-reset()
+ reset-box-model()
+ reset-font()
+ reset-body()
+ reset-table()
+ reset-table-cell()
+ reset-html5()