mediaqueryのブレイクポイントをお手軽に呼び出せます。 引数にはデバイスサイズに合わせて、mobile、table、desktopを指定します。 mobileは480px、tabletは768px、desktopは1280pxで切り替わります。
@include mediaquery(mobile) {
padding: 4px;
}
@include mediaquery(tablet) {
padding: 8px;
}
@include mediaquery(desktop) {
padding: 16px;
}
Retinaディスプレイを判定したいときは、media-retina()のmixinを使用します。
@include media-retina() {
background: url("hoge@2x.jpg");
}
影をつけたいときは、影をつけたい要素のスタイルシートで shadow mixin を読み込みます。
0dp,2dp,3dp,4dp,6dp,8dp,16dp,24dpの値が指定でき、大きいほどレイヤーの位置が高くなります。
引数を指定する必要はありません。
@include shadow-0dp(); @include shadow-2dp(); @include shadow-3dp(); @include shadow-4dp(); @include shadow-6dp(); @include shadow-8dp(); @include shadow-16dp(); @include shadow-24dp();
<!-- ここではclassを指定していますが、mixinを各々のコンポーネントで使用してください。 --> <div class="brsh-shadow__0dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__2dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__3dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__4dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__6dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__8dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__16dp" style="width: 100px; height: 100px;"></div> <div class="ncgr-shadow__24dp" style="width: 100px; height: 100px;"></div>