30 行
863 B
SCSS
30 行
863 B
SCSS
// @desc - class名とルールセットを指定することで、レスポンシブに対応したスタイルを生成します。
|
|
// @param {String} - 共通のclass名をクウォートとドットをつけて渡します（e.g. `.foo`）。
|
|
// @param {Strind} - 使用するブレイクポイントを定義した変数を渡します。
|
|
// @see - foundation/variable/_breakpoint.scss
|
|
// @example scss - Usage
|
|
// @include _responsive(".display-none") {
|
|
// display: none;
|
|
// }
|
|
// @example css - CSS output
|
|
// .display-none {
|
|
// display: none;
|
|
// }
|
|
// @media screen and (min-width: 400px) {
|
|
// .display-none-sm {
|
|
// display: none;
|
|
// }
|
|
// }
|
|
@mixin _responsive($class, $bp: $_breakpoint-up) {
|
|
#{$class} {
|
|
@content;
|
|
}
|
|
@each $suffix, $value in $bp {
|
|
@media #{$value} {
|
|
#{$class}-#{$suffix} {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
}
|