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

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

border

stylus

.test
  border #fff

css

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

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

border-radius

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

.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

stylus

.test
    background linear-gradient(bottom left, #f00, #00f)

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)

stylus

.test
    image 'dammy.png' 50px 100px

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)

stylus

.test
  overflow: ellipsis

css

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

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

position

stylus

.test1
  fixed top
.test2
  absolute top left
.test3
  relative bottom right 10px

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)

stylus

.test1
  size 50% 2px
.test2
  size 50% 2px

css

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

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

ミックスイン、その他

clearfix()

stylus

.test
  clearfix()

css

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

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

hide-text()

stylus

.test
  hide-text()

css

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

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

replace-text()

stylus

.test
  replace-text(url(dammy.png), 50%, 50%)

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()

stylus

.test
  shadow-stroke(blue)

css

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

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

各種リセット関数

stylus

reset-box-model()

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()