stylus helpers

これは何をするものですか

media queryやよくあるCSSルールの組み合わせをバカ正直に書くのが面倒くさいというズボラな人のための、stylus mixin集です。

.hoge
  // 透過方式で書いています
  sz 50
  sz-xs(30, 20)

.hoge {
  width: 50px;
  height: 50px;
}

@media (max-width: 767px) {
  .hoge {
    width: 30px;
    height: 20px;
  }
}

このようにコンパイルされます。

コンパイルに際してはお好きな方法でどうぞ。

インストールと使い方

インストール

npm からインストールしてください。

$npm i -D stylus-helpers

使い方

使用したいstylusファイルの先頭で @import するのが簡単でいいと思います。

@import "path/node_modules/stylus-helpers/helper"

ブレークポイント・閾値の設定

デフォルトで 4段階のmedia queryを採用しています。

• xs : 0 - 767.98px
• sm : 768px - 991.98px
• md : 992px - 1199.98px
• lg : 1200px -

これをたとえば、bootstrap4.x にあわせた5段階のmedia queryにする場合、 _shBreakPointの名前でhashでそれぞれの識別子に対応する上限値を指定し、 helper.styl ミックスインをインポートする前に指定します。

_shBreakPoint = {
  xs: 576
  sm: 768
  md: 992
  lg: 1200
  xl: Infinity
}
@import "path/node_modules/stylus-helpers/helper"

また、現在最大値は次段階の下限値から0.02pxを差し引いたものになっていますが、これをbootstrap3.xに合わせて1px差にする場合、 _shThreshold の名前で数値を設定します。

_shThreshold = 1
@import "path/node_modules/stylus-helpers/helper"

現在、xs ~ xl の5段階にしか対応していません。

主な機能

略記

よく使うcssルールの組み合わせを略記できます。

source

.hoge
  db()
  flr()
  por()

yield

.hoge {
  display: block;
  float: right;
  position: relative;
}

値指定略記

数値などを指定するルールを簡単に書けます。

source

.hoge
  h 20
  w 40%
  m()

yield

.hoge {
  height: 20px;
  width: 40%;
  margin: auto;
}

cssルールによっては単位やキーワードが補完されます。

media queryの略記

上記の略記ルールに、media queryの識別子(xs / sm / md / lg / (xl))をpostfixとして組み合わせて使います。

source

.hoge
  t 50
  t-sm 20

yield

.hoge {
  top: 50px;
}

@media (min-width:768px) and (max-width: 991px) {
  .hoge {
    top: 20px;
  }
}

media query を Block mixins として使用

stylus の標準記法 Block mixins としてmedia queryを使用できます。

source

.hoge
  width 100px  
  +xs()
    width 50px

yield

.hoge {
  width: 100px;
}

@media (max-width: 767px) {
  .hoge {
    width: 50px;
  }
}

Block mixins として使用する場合、media queryを組み合わせて上限・下限を指定することもできます。

source

.hoge
  // (下限)-(上限)で指定します
  +sm-md()
    width 100px

yield

.hoge {
  width: 100px;
}

@media (min-width:768px) and (max-width: 1199px) {
  .hoge {
    width: 100px;
  }
}

その他のmixin

bg(x, y, color) / bg-[xs|sm|md|lg|xl](x, y, color)

background-repeat を no-repeat に設定し、 background-color background-position を同時に指定します。

/* Default */
background-color: transparent; /* color */
background-repeat: no-repeat;
background-position: 50% 50%; /* x y */

br-medias()

各メディアクエリに対応した汎用 .br-** クラスを指定します。 <br> タグ専用です。

/*
  br-medias()
*/
br.br-lg,
br.br-md,
br.br-sm,
br.br-xs {
  display: none;
}
@media (min-width: 1200px) and (max-width: 1599.98px) {
  br.br-lg {
    display: block;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  br.br-md {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  br.br-sm {
    display: block;
  }
}
@media (max-width: 767.98px) {
  br.br-xs {
    display: block;
  }
}

cf() / cf-[xs|sm|md|lg|xl]()

clearfixとなるCSSコードを生成します。

ellips() / ellips-[xs|sm|md|lg|xl]()

省略文字を表示するCSSコードを生成します。

fvc(align-item-keyword, flex flug) / fvc-[xs|sm|md|lg|xl](align-item-keyword, flex flug)

flexコンテナを作り、内容物を天地中央に配置します。 align-item-keyword を指定することで内容物の位置も指定できます。 第2引数にfalseを指定するとdisplay: inline-flexになります。デフォルト(無指定)はdisplay: flexです。

highlighter(color, breadth, base-color) / highlighter-[xs|sm|md|lg|xl](color, breadth, base-color)

ブロック・インラインブロック下部に蛍光ペンで引いたようなアンダーラインをつけます。 background-image: linear-gradient() を使用しているので、併用はできません。

color にはカラーコードを指定します。デフォルトで lightgreen が指定されます。
breadth には線の太さを1 - 10の数値で指定します。デフォルトで 1(10%) が指定されます。
base-color には線以外の「地色」を指定します。デフォルトで transparent が指定されます。

lhx(fontSize, lineHeight) / lhx-[xs|sm|md|lg|xl](fontSize, lineHeight)

カンプ内でフォントサイズと、行間がともにピクセルなどで指定されているときにline-heightを算出します。

メディアクエリを表す接尾辞をつけることもできます。

source

.hoge
  // 単位は無視されますが、計算上揃える必要があります。
  lhx-xs(24px, 40px)

yield

@media (max-width: 767.98px) {
  .hoge {
    line-height: 1.67;
  }
}

ratio(width, h, v) / ratio-[xs|sm|md|lg|xl](width, h, v)

横幅( width デフォルトで 100% )と縦横比( h:v )を指定することで長方形（デフォルトで h = v 正方形）を作ります。
擬似要素 ::after のパディングを使って無理やり高さを出すやり方ですので、 ::after とは併用できません。

参考: レスポンシブデザインで要素の縦横比を固定する 可変幅で正方形

position: relative; が指定されます。内容物に position: absolute; などを指定して使用します。

.hd
  // ブラウザ横幅いっぱいで、レスポンシブな 16:9 の長方形を作ります
  ratio(100vw, 16, 9)
.square
  // レスポンシブな正方形を作ります
  ratio()

rfz(baseFontSize, baseWindowWidth) / rfz-[xs|sm|md|lg|xl](baseFontSize, baseWindowWidth)

特定のウインドウサイズ(=baseWindowWidth)におけるフォントサイズ(=baseFontSize)を指定することで、画面サイズの変更にあわせてほぼ同じ見た目で表示するvw単位指定でのフォントサイズに変換します。

メディアクエリを表す接尾辞をつけることもできます。

source

.hoge
  // iPhone6サイズのカンプで20pxで指定されていたフォント
  rfz-xs(20, 375)

yield

@media (max-width: 767.98px) {
  .hoge {
    font-size: 5.3vw;
  }
}

sz(width, height) / sz-[xs|sm|md|lg|xl](width, height)

width height 領域を指定します。 width のみの指定で正方形の領域を指定します。デフォルトで auto になります。

trbl0() / trbl0-[xs|sm|md|lg|xl]()

box内の天地左右中央に配置される position: absolute のボックスを生成します。別途 width height の指定が必要です。

略記一覧

引数の指定 () の前にmedia queryを示す接尾辞 -xs -sm -md -lg (-xl) をつけることで、それぞれ対応する条件にのみ適用されるようになります。

値固定

値指定

• カンマ区切り3値または2値で指定する。1値のみの場合は同じ値が第1値第2値に適用される。 ** p() がbuiltin-functionとかぶっていたので変更 p- はメディアクエリ修飾子との組み合わせのみ使用可能