Sass를 사용한 테마: SCSS 튜토리얼
게시 됨: 2022-03-11Sass를 사용한 스타일시트 개발은 속성 또는 변수 중첩과 같은 가장 기본적인 기능을 사용하는 경우에도 귀중한 시간을 절약하고 프런트 엔드 개발자의 삶을 더 쉽게 만듭니다. CSS 전처리기가 웹사이트와 애플리케이션을 위한 스타일을 생성하는 사실상의 방법으로 널리 채택된 것은 놀라운 일이 아닙니다. 우리는 더 이상 그들 없이는 살 수 없습니다.
테마 에 관해서는 ; 즉, 레이아웃을 유지하면서 웹사이트의 모양과 느낌을 변경하면 믹스인 또는 기능과 같은 Sass의 기능이 걷는 대신 비행기를 타는 것처럼 느껴질 수 있습니다! 이 SCSS 튜토리얼에서는 최소한의 테마를 만들고 SCSS를 사용하여 CSS 프로그래밍에 초능력을 부여할 것입니다.
기본 Mixin 접근 방식
다음 레이아웃이 있다고 가정해 보겠습니다.
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> 여러 테마를 만들어 달라는 요청을 받았습니다. 테마는 모든 컨테이너(메인 컨테이너 포함)와 버튼의 색상을 변경해야 하며 테마는 본문의 클래스에 의해 결정되거나 "외부" 컨테이너일 수도 있습니다.
<body class="theme-1">색 구성표를 매개변수로 포함할 "themable"이라는 이름의 믹스인을 빌드해 보겠습니다.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }그런 다음 테마를 생성하는 데 사용합니다.
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); 이 시점에서 이미 많은 시간을 절약했지만 이 접근 방식에는 몇 가지 문제가 있습니다.
테마는 일반적으로 색상 외에도 다양한 속성을 가지고 있습니다. 예를 들어 부트스트랩 테마를 수정하려는 경우 이전 "레시피"를 따라 믹스인을 작성하는 것은 유지 관리하기 어렵고 코드를 읽기도 어렵습니다. 게다가 우리는 실제로 믹스인에 16진수 색상 코드를 입력하는 것과 같은 Sass 모범 사례를 따르고 있지 않습니다.
Sass Maps로 스타일 스키마 디자인하기
주로 키 인덱싱된 배열과 같은 맵의 도움으로 테마에 대해 보다 의미 있고 의미 있는 스타일 세트를 구축할 수 있으며 이는 동료 개발자가 유지 관리하고 이해하기 더 쉽습니다. 목록 을 사용할 수도 있지만 개인적으로 이 목적에 더 적합한 지도를 찾습니다. 키는 자체 설명할 수 있는 반면 목록에는 키가 없습니다.
우리의 새로운 접근 방식을 위한 지도는 중첩된 지도가 될 것입니다:
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); 우리의 체계 theme-1 과 그 하위 맵의 각 섹션에 액세스하려면 @each 지시문 을 사용하여 각 섹션을 반복합니다.
@each $section, $map in $theme-1 $section 은 현재 섹션의 키 를 반환하고 $map 은 해당 키에 해당하는 중첩 맵을 반환합니다.
그런 다음 map-get 함수 를 사용하여 각 맵의 속성, 즉 background(bg) 속성에 액세스할 수 있습니다.
map-get($map, bg)마지막으로 맵 구조를 기반으로 새로운 믹스인을 결합하여 원하는 만큼 테마를 만들 수 있습니다.
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … 버튼이 아닌 섹션의 속성을 구별하기 위해 @if 지시문 도 사용하고 있습니다.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }이런 식으로 특정 속성이나 규칙을 만들기 위해 일부 섹션에 다른 속성을 추가하거나 중첩 맵을 사용하여 단일 값을 가진 키와 다른 키를 구별할 수 있습니다.
우리의 테마는 스타일시트의 다른 부분에 적용된 여러 믹스인에서 사용하는 많은 맵으로 구성될 수도 있습니다. 그것은 모두 기본 레이아웃의 복잡성과 물론 개인적인 접근 방식에 달려 있습니다.
추가 최적화
Sass는 더 많은 작업을 절약할 수 있는 유용한 내장 기능을 제공합니다. 예를 들어, hsl은 lighten 또는 darken 와 같은 기능을 하여 예를 들어 버튼 위에 마우스를 놓을 때 버튼의 색상을 계산합니다.
원래 배경색에 관계없이 마우스를 가져갈 때 배경을 밝게 하도록 버튼 코드를 수정할 수 있습니다. 이렇게 하면 이 상태에 다른 색상을 추가할 필요가 없습니다.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }또한 Sass 모듈을 사용하면 코드를 훨씬 더 읽기 쉽고 확장할 수 있습니다. 각 테마 맵은 모듈에 포함된 다음 기본 스타일시트로 가져올 수 있습니다.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …이렇게 하려면 프로젝트에 다음과 같이 모듈을 배치해야 합니다.
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Sass를 사용하여 CSS를 건조하는 방법에 대해 자세히 알아보려면 Toptaler Justin Brazeau와 Sass 애호가가 그의 멋진 기사 Sass Mixins: Keep Your Stylesheets DRY 에서 이에 대해 설명합니다.