responsive mixin
1. responsive mixin
今回はスクリーンサイズに応じて効果を適用するmixinを作りたいと思います.応答mixinは@content関数で関数の内容をスタイル化します.scssで設定できます.じゃ、まずhtmlを作りましょう.スクリーンサイズによって、HELLOの色が変わります.
今回はスクリーンサイズに応じて効果を適用するmixinを作りたいと思います.応答mixinは@content関数で関数の内容をスタイル化します.scssで設定できます.じゃ、まずhtmlを作りましょう.スクリーンサイズによって、HELLOの色が変わります.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/css/reset.css" />
<link rel="stylesheet" href="dist/css/styles.css" />
<title>(S)CSS Masterclass</title>
</head>
<body>
<h1>Hell3o</h1>
</body>
</html>$minIphone: 400px;
$maxIphone: 700px;
$minTablet: 900px;
$maxTablet: 1100px;
@mixin responsive($device) {
@if $device == "iphone" {
@media screen and (max-width: $maxIphone) and (min-width: $minIphone) {
@content;
// 즉 최소넓이가 400px 그리고 최대 700ox 일때 효과가 발동되는 데
// 그 효과는 styles.scss 에 적어준대로다.(@content때문에 가능한 기능이다.)
}
} @else if $device == "tablet" {
@media screen and (max-width: $maxTablet) and (min-width: $minTablet) {
@content;
}
}
}@import "_mixins";
h1 {
@include responsive("iphone") {
color: yellowgreen;
}
@include responsive("tablet") {
color: peru;
}
}
// responsive 함수안에 있는 @content 때문에 h1 태그에 적는 족족 responsive와 연동되어 함께 효과가 나타난다.Reference
この問題について(responsive mixin), 我々は、より多くの情報をここで見つけました https://velog.io/@yhko1992/responsive-mixinテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol