Sass Mixins: 스타일시트를 건조하게 유지
게시 됨: 2022-03-11Sass를 사용할 때 가장 좋아하는 이점 중 하나는 프런트 엔드 디자인 워크플로를 쉽게 자동화할 수 있다는 것입니다. 파일 작업 및 기타 작업 자동화를 위한 많은 JavaScript 도구가 있지만 Sass의 내장 믹스인 기능을 사용하면 모듈식 프론트 엔드 스타일 코드를 작성할 수 있습니다. 이 기사에서는 웹 스타일 작성을 자동화하기 위해 내가 가장 좋아하는 Sass 믹스인 10가지를 나열했습니다.
이것들은 제가 작업하는 거의 모든 웹 프로젝트에 사용하는 Sass 믹스인입니다. 웹 전체에 유용한 Sass 믹스인이 포함된 흥미로운 기사가 많이 있습니다. Bourbon과 같은 소규모 작업에 적합한 몇 가지 좋은 Sass 믹스인 라이브러리도 있습니다. 아래에서 일부 믹스인을 파생시킨 또 다른 훌륭한 믹스인 라이브러리는 Andy입니다.
이 기사에서 다룰 믹스인은 다음을 다룹니다.
- 미디어 쿼리
- 색상 테마
- 센터링 요소
- 클리어픽스
- 일관된 글꼴 크기
- 애니메이션 전환
- 망막 이미지
- 빠른 그라디언트
- 외부 글꼴
- 빠른 패딩/여백
미디어 쿼리
미디어 쿼리를 사용하면 스타일시트에 사용자 지정 중단점을 쉽게 추가하고 다양한 중단점에 대한 요소 내에서 사용자 지정 반응 동작을 빠르게 추가할 수 있습니다. 그러나 스타일시트 미디어 쿼리를 어지럽히면 특히 나중에 유지 관리할 때 골칫거리가 될 수 있습니다. Sass 믹스인을 사용하면 모든 것이 바뀔 수 있습니다.
$breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }이를 정의하면 믹스인을 다음과 같이 사용할 수 있습니다.
.foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }독립 실행형 또는 Bootstrap과 같은 다른 그리드 프레임워크와 함께 작동합니다.
if 문은 믹스인에 제공된 크기 이름에 따라 특정 화면 크기로 조정된 미디어 쿼리를 내보냅니다. 이를 통해 CSS 속성의 동작을 그에 따라 쉽게 조정할 수 있습니다. CSS 속성을 조정하려는 지점을 사용자 정의할 수도 있습니다. 일반적으로 가장 반응이 빠른 레이아웃은 3~4개의 정의된 화면 너비 치수를 사용하여 콘텐츠를 조정합니다. 화면 크기, 장치 및 응용 프로그램의 차이는 항상 확장되고 있지만 많은 웹 개발자가 레이아웃에 사용하는 인기 있는 추세가 있습니다. 휴대전화의 경우 작은 화면 크기, 태블릿의 경우 중간 크기, 랩톱의 경우 큰 화면 크기, 데스크톱 컴퓨터의 경우 초대형.
참고로 Bootstrap v3에서 사용되는 미디어 포인트는 다음과 같습니다.
- 최대 너비: 767px(최대 767px 너비의 모든 화면)
- 최소 너비: 768px(768px 이상의 모든 화면)
- 최소 너비: 992px(992px 이상의 모든 화면)
- 최소 너비: 1200px(1200px 이상의 모든 화면)
색상 테마
사이트 전체에서 사용할 색상 테마를 정의하면 동일한 HTML 요소에서 CSS의 동일한 색상 부분을 사용하는 시간을 절약할 수 있습니다. 모든 div 버튼에 1px의 실선 점선 테두리를 지정하려면 이를 테마에 쉽게 추가할 수 있습니다. 이 Sass 믹스인을 사용하면 원하는 만큼 많은 색상 변수를 설정하고 원하는 만큼 많은 클래스에 영향을 줄 수 있습니다. 이것은 무언가에 대한 색상 옵션을 제공하거나 한 번에 많은 요소의 색상에 영향을 주는 기능이 있을 때 유용한 도구가 될 수 있습니다. Sass에서 색상 테마 작업에 대한 자세한 정보가 포함된 훌륭한 기사가 있습니다.
@mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }깊이 있는 색상 테마를 설정하면 올바르게 수행하면 색상 관련 스타일링의 70%가 제거됩니다. 또한 이 .scss 파일을 다른 .scss 파일과 분리하고 모든 브랜드 색상 변수를 동일한 파일에 포함하는 것이 좋습니다.
다음과 같이 간단한 줄:
@include theme(theme-banana, yellow);다음을 방출합니다:
.theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }센터링 요소
레이아웃에 따라 스타일에서 요소를 가운데 정렬하는 다양한 방법이 있습니다. 아래 방법은 절대 위치 지정을 사용하며 수직, 수평 또는 둘 다 중앙에 있는 요소를 정의할 수 있습니다. 상위 요소에는 position: relative가 있어야 합니다. 이를 통해 짧은 2줄의 코드에서 요소의 중심 위치를 쉽게 정의할 수 있습니다.
@mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .foo { @include center(both); } .foo-parent { position: relative; }이 믹스인은 콘텐츠를 중앙에 배치하는 가장 다양한 방법 중 하나이지만 콘텐츠를 중앙에 배치하는 다양한 방법이 있으며 이것이 항상 최상의 솔루션은 아닐 수도 있습니다. 레이아웃 스타일과 브라우저 호환성 허용 여부에 따라 콘텐츠를 다른 방식으로 중앙에 배치할 수 있습니다. Flexbox는 정렬을 위한 또 다른 인기 있고 매우 유용한 도구이지만 현재는 이전 브라우저에서 완전히 지원되지 않습니다. 이 믹스인 없이 간단한 CSS 속성을 사용하여 간단한 텍스트 및 컨테이너 정렬을 쉽게 수행할 수 있습니다. 이것은 레이아웃을 생성하고 다른 컨테이너 내부의 컨테이너로 작업할 때 더 많은 도움이 될 것입니다.
클리어픽스
요소에 clearfix CSS 속성을 빠르고 효과적으로 적용합니다. 웹에는 많은 clearfix 솔루션이 있으며 이 솔루션이 가장 잘 작동하는 것 같습니다. Sass mixin이 생성되면 사용하기도 쉽습니다.
이 믹스인은 콘텐츠가 오른쪽 또는 왼쪽에 떠 있을 때마다 유용하며, 아래에 새 콘텐츠를 삽입하기 위해 떠 있는 요소 아래의 공간을 비우고 싶을 때 유용합니다.
%clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } } .container-with-floated-children { @extend %clearfix; }일관된 글꼴 크기
모든 텍스트 요소에 사용할 문서의 rem 글꼴 크기를 설정합니다. 이것은 em 대신 글꼴을 확대 및 축소하는 더 좋은 방법입니다. em을 사용하면 다른 CSS 속성을 기반으로 합성되지만 rem은 HTML 문서에서 정의한 크기에 따라서만 확장되거나 축소됩니다. 모든 타이포그래피에 대해 .scss 파일을 분리하고 아래 믹스인을 사용하여 기본 글꼴 크기를 정의하면 타이포그래피 코딩 워크플로가 크게 자동화됩니다.
@function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); } p { @include font-size(14px) }이 믹스인은 또한 rem(IE8 이하)을 지원하지 않는 브라우저에 대한 픽셀 대체를 생성합니다. 브라우저가 rem 크기 조정을 지원하지 않으면 mixin은 설정한 초기 rem 크기와 동일한 픽셀을 계산하고 요소에 대한 픽셀 및 rem 값을 모두 출력합니다.
생기
애니메이션 속성을 빠르게 정의하고 요소에 추가합니다. 현재 애니메이션 CSS 속성에는 여전히 공급업체 접두사가 필요하므로 믹스에도 추가됩니다.
@mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }믹스인의 첫 번째 부분은 브라우저 호환성에 필요한 적절한 공급업체 접두사를 추가합니다. 다음 섹션에서는 사용자 지정 문자열과 속성을 입력하도록 설정합니다. 믹스인의 마지막 섹션은 믹스인 이름(이 경우 페이드아웃)을 만들고 애니메이션의 각 키프레임에서 수행할 작업을 정의하는 곳입니다. 이 예제 설정은 매우 기본적이며 애니메이션 지속 시간의 백분율에 변경 사항을 추가할 수 있습니다.
// Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }여기 예제에서는 대상 요소를 애니메이션의 0%(시작)에서 사용하고 속성을 전체 불투명도(불투명도: 1;)에서 불투명도가 없는 상태로 전환하고 애니메이션의 90%에서 본질적으로 사라집니다(불투명도: 0;). . 따라서 애니메이션을 5초 타임라인으로 설정하면 4.5초(5초 애니메이션의 90%) 후에 요소가 사라집니다. 믹스인 사용법에서 정의한 마지막 속성("3")은 애니메이션이 반복되는 횟수입니다.
망막 이미지
고해상도 이미지를 표시하지 않는 장치에 대한 대체를 사용하여 사이트에 고해상도 이미지를 추가합니다. 레티나 이미지를 사용할 때 이미지를 손상시키지 않고 최대한 압축하는 것이 좋습니다. 이를 위한 좋은 도구는 TinyPNG(PNG 및 JPG 지원)입니다.
@mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }이 믹스인을 사용하면 원본 이미지를 정의하는 CSS 속성과 동일한 위치에 규칙을 추가할 수 있습니다.
div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }이전에는 이에 대한 유일한 CSS 솔루션이 미디어 쿼리를 사용하는 것이었으며 이 솔루션이 훨씬 깨끗하고 쉽습니다. 이 믹스인에 대한 더 많은 생각과 아이디어는 이 기사를 확인하세요.
빠른 그라디언트
시작 색상, 종료 색상 및 그라디언트 유형만 정의하는 그라디언트를 쉽게 추가할 수 있습니다. 모든 그라디언트 속성을 추가하고 필요에 따라 선택할 수 있습니다. 그라디언트 유형을 사용하면 수직 그라디언트, 수평 그라디언트 또는 방사형(구 모양) 그라디언트 중에서 선택할 수 있습니다.
@mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }더 이상 그라디언트를 구현하기 위해 다양한 공급업체 접두사와 매개변수 순서를 기억할 필요가 없습니다.
.foo { @include background-gradient(red, black, 'vertical'); }외부 글꼴
CSS font-face 속성을 사용하여 디렉토리에 글꼴을 쉽게 추가하고 모든 글꼴 유형을 포함할 수 있습니다. 글꼴 파일을 사용할 때 브라우저마다 파일 유형과의 호환성이 다릅니다. 이 믹스인은 디렉토리에 있는 관련 글꼴 파일을 사용하여 문제를 해결하는 데 도움이 됩니다.
디렉토리에 글꼴 파일을 포함하고 스타일에 "@include" 태그를 추가하면 선택한 폴더에서 모든 파일을 가져옵니다.
@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }이 믹스인은 이전 버전과의 호환성에 필요한 이상한 해결 방법을 포함하여 대체 글꼴 형식 URL을 정의합니다.
빠른 패딩 및 여백
이것을 사용하는 주된 이유는 때때로 padding-left와 같은 특정 패딩 속성을 생략하고 정의하고 싶지 않기 때문입니다. Sass 속성 null을 사용하면 패딩 속성을 생략할 수 있습니다. 여백에도 동일한 규칙이 적용됩니다.
//Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }그런 다음 혼합을 사용하여 스타일시트 전체에서 padding-* 및 margin-* 속성을 대체할 수 있습니다. 이 믹스인을 모든 요소에 빠르게 포함하고 포함하려는 패딩/여백의 측면만 정의할 수 있습니다. 패딩과 여백은 요소에 추가되는 가장 많이 사용되는 CSS 스타일 중 하나이며 이와 같은 작은 시간 절약 기능은 빠르게 추가됩니다.
// Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;마무리
이 기사에서 설명한 것과 같은 Sass 믹스인을 사용하면 워크플로를 보다 효율적으로 만들 수 있습니다. 이러한 특정 믹스인을 사용하면 일반적인 웹 작업에 더 적은 시간을 할애할 수 있으므로 보다 신중하고 숙련된 통찰력이 필요한 프로젝트의 다른 측면에 더 많은 시간을 할애할 수 있습니다.
Sass 설치 및 작업은 여러 가지 방법으로 수행할 수 있으며 명령 프롬프트를 사용하여 프로젝트에 일부 라이브러리를 설치해야 합니다. Sass를 설치하는 한 가지 방법은 여기의 주요 Sass 웹 사이트에 설명된 대로 Ruby를 사용하는 것이고 또 다른 인기 있는 방법은 Node.js를 사용하는 것입니다.
Sass의 이점은 자동화 이상으로 확장되며 프로젝트 스타일시트를 쉽게 만들고 관리하는 데 도움이 될 수 있습니다. 가장 기본적인 웹 프로젝트 중 일부에도 수천 줄의 CSS 코드가 있을 수 있습니다. Sass는 이 코드를 각각의 초점이 있는 관리하기 쉬운 비트로 나누는 좋은 방법입니다.