SASS를 사용한 미디어 쿼리 중단점
SASS 규칙
@mixin
믹스인을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있습니다. .float-left와 같은 비의미적 클래스의 사용을 피하고 라이브러리[1]에 스타일 모음을 배포하는 것을 쉽게 만듭니다.
@mixin button {
width: 400px;
height: 50px;
background-color: #fcd;
border: 1px solid #ccc;
color: #fff;
&:hover {
color: #fcd;
background-color: #ccc;
}
}
인수와 혼합
믹스인은 또한 해당 클래스에 사용되는 경우 동작을 사용자 정의할 수 있는 인수를 취할 수 있습니다. 수신된 인수는 프로그래밍에 사용되는 일반 함수처럼 작성할 수 있습니다. 여기서 주목해야 할 가장 중요한 점은 인수가 SASS 스크립트 표현식의 형식이어야 한다는 것입니다[2].
@mixin button(
$color: $primary,
$hoverColor: $primary,
$hoverBgColor: $white,
$borderColor: $primary,
$width: 100px,
$height: 40px,
$bgColor: $white
) {
width: $width;
height: $height;
background-color: $bgColor;
border: 1px solid $borderColor;
color: $color;
&:hover {
color: $hoverColor;
background: $hoverBgColor;
}
}
선택적 인수와 혼합
Mixins와 함께 javascript에 사용하는 구성 요소와 유사한 수신 인수가 사용되지 않는 경우 값을 기본으로 설정할 수 있습니다. 이 상황과 유사한 사용법이 SASS에서 유효합니다. 이 경우 다음 코드 스니펫[3]에서 예제를 검토할 수 있습니다.
@mixin text(
$color: $info,
$fontSize: 1.5rem,
$fontWeight: 500,
$textAlign: center
) {
color: $color;
font-size: $fontSize;
font-weight: $fontWeight;
text-align: $textAlign;
}
.optionalArgumentsForText {
@include text(#0000FF, 2.5rem); /*In this usage, The fontWeight and textAlign properties are set by default.*/
}
@콘텐츠
@content 블록을 수신하는 믹스인은 이러한 블록에 인수를 전달할 수 있습니다. 이것은 @content()로 작성됩니다. @mixin이 @content 블록에 인수를 전달하면 해당 @mixin 사용자()는 를 입력하여 해당 인수를 수락합니다. 콘텐츠 블록의 인수 목록은 mixin의 인수 목록처럼 작동하며 @content에 의해 전달된 인수는 mixin[4]에 인수를 전달하는 것처럼 작동합니다.
/*_breakpoints.scss*/
$breakpoints: (
"xs": 0,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1600px,
);
@mixin md {
@media (min-width: map-get($breakpoints, "xs")) {
@content;
}
}
/*todo.scss*/
@include md {
color: $primary-orange;
border: 1px solid $error;
}
믹스인은 at-rule을 사용하여 현재 컨텍스트에 포함되며, 믹스인 이름은 포함됩니다[5].
/*todo.scss*/
@include md {
color: $primary-orange;
border: 1px solid $error;
}
React 프로젝트용 SASS의 미디어 쿼리
이 섹션에서는 SASS로 프로젝트를 시작할 때 필요한 변경 사항과 함께 사용하는 템플릿의 $breakpoints를 설명하려고 합니다. 아래 코드 스니펫을 살펴보면 $breakpoints는 반응형 보기를 위한 장치에 필요한 너비 값을 정의합니다. 여기서 하나 이상의 옵션으로 정의할 수 있다는 점이 매우 편리합니다. 다음 단계로 @mixin으로 호출될 @mixin 메서드의 이름이 결정됩니다(저는 혼동을 피하기 위해 보통 사용하는 중단점과 동일한 이름을 사용합니다). 올바른 값이 결정되면 @media로 반응형으로 설정할 media-query 속성을 map-get 메서드를 사용하여 해당 $breakpoints 값을 가진 min-witdh 속성에 할당합니다. 마지막으로 @content와 함께 @mixin에서 사용될 모든 기능이 정의된 미디어 쿼리 기능에 사용되도록 합니다.
$breakpoints: (
"xs": 0,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1600px,
);
@mixin xs {
@media (min-width: map-get($breakpoints, "xs")) {
@content;
}
}
@mixin sm {
@media (min-width: map-get($breakpoints, "sm")) {
@content;
}
}
@mixin md {
@media (min-width: map-get($breakpoints, "md")) {
@content;
}
}
@mixin lg {
@media (min-width: map-get($breakpoints, "lg")) {
@content;
}
}
@mixin xl {
@media (min-width: map-get($breakpoints, "xl")) {
@content;
}
}
@mixin xxl {
@media (min-width: map-get($breakpoints, "xxl")) {
@content;
}
}
@mixin breakpoint($bp: 0) {
@media (max-width: $bp) {
@content;
}
}
프로젝트에서의 구현
적용 단계에서는 다음과 같이 생성한 _breakpoints.scss 파일을 사용하려는 파일로 가져옵니다. 그런 다음 원하는 장치 사양에 따라 생성한 $breakpoints 미디어 쿼리 클래스 중 하나를 메서드와 함께 추가한 다음 디자인에 따라 콘텐츠를 추가합니다.
@import "./breakpoints";
$error: red;
$success: green;
$warning: orange;
$info: #6204ac;
.optionalBreakPointsForText {
// for mobile
color: $info;
// for md media-query
@include md {
display: none;
color: $success;
}
// for xl media-query
@include xl {
display: block;
color: $error;
}
// for xl media-query
@include xxl {
display: block;
color: $warning;
}
}
결론
이 기사에서는 소셜 미디어 및 SASS 문서에서 조사하고 여러 번 배포할 기회가 있었던 동적 미디어 쿼리 기능을 위해 만든 _breakpoints.scss 스타일에 대해 설명하려고 했습니다. 문헌 검토의 기회를 제공하는 본 연구는 미디어 쿼리 기능의 동적 사용에 대한 중요한 설명을 제공하고 초기 단계에서 더 빠르게 구조로 프로젝트를 시작할 수 있는 기회를 제공합니다. 이 약간의 배경 지식으로 이제 SASS에서 미디어 쿼리 표현식을 이해하고 사용하는 방법을 설명할 수 있기를 바랍니다. 이것에 대해 조금 더 알고 싶다면 아래에서 내가 참조한 링크를 참조하십시오.
참조
Reference
이 문제에 관하여(SASS를 사용한 미디어 쿼리 중단점), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/serifcolakel/breakpoints-with-sass-in-react-2k59텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
