53 行
1.4 KiB
SCSS
53 行
1.4 KiB
SCSS
// @desc - メディアクエリを`max-width`で挿入します。
|
|
// @param {String} $breakpoint [$_default-breakpoint] - 引数に変数のキーワードを渡します。
|
|
// @see - $_breakpoint-down
|
|
// @example scss - Usage
|
|
// .foo {
|
|
// color: red;
|
|
// @include sp {
|
|
// color: blue;
|
|
// }
|
|
// }
|
|
// @example css - CSS output
|
|
// .foo {
|
|
// color: red;
|
|
// }
|
|
// @media screen and (max-width: 767px) {
|
|
// .foo {
|
|
// color: blue;
|
|
// }
|
|
// }
|
|
@mixin sp($breakpoint: $_default-breakpoint) {
|
|
@if map-has-key($_breakpoint-down, $breakpoint) {
|
|
@media screen and (max-width: 1067px) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Please make sure it is defined in `$_breakpoint-down` map.";
|
|
}
|
|
}
|
|
|
|
@mixin sp02($breakpoint: $_default-breakpoint) {
|
|
@if map-has-key($_breakpoint-down, $breakpoint) {
|
|
@media screen and (max-width: 430px) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Please make sure it is defined in `$_breakpoint-down` map.";
|
|
}
|
|
}
|
|
|
|
|
|
@mixin min($breakpoint: $_default-breakpoint) {
|
|
@if map-has-key($_breakpoint-down, $breakpoint) {
|
|
@media screen and (max-width: 374px) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Please make sure it is defined in `$_breakpoint-down` map.";
|
|
}
|
|
}
|