Sass 수용: 바닐라 CSS 사용을 중단해야 하는 이유

Sass 및 기타 CSS 전처리기에 대해 처음 들었을 때 내 정확한 생각은 그다지 열광적이지 않았습니다. "이미 CSS만큼 아름답게 작동하는 도구에 또 다른 도구가 필요한 이유는 무엇입니까?". "나는 그것을 사용하지 않을 것입니다." "내 CSS는 필요하지 않을 정도로 주문되었습니다." "전처리기는 CSS 작성 방법을 모르는 사람들을 위한 것입니다. CSS 작성 방법을 알면 전처리기가 필요하지 않습니다." “어쨌든 프로세서는 CSS를 작성할 줄 모르는 사람들을 위한 것입니다. 그렇다면 전처리기가 필요하지 않을 것입니다.” 그리고 여러 프로젝트에서 강제 로 사용해야 할 때까지 실제로 한동안 피했습니다.

프로젝트에서 바닐라 CSS로 다시 전환해야 했던 최근까지 Sass로 작업하는 것이 얼마나 즐거운지 몰랐습니다. 그 동안 너무 많이 배웠기에 Sass를 칭찬하고 더 나은 세상을 만들고 당신을 더 행복한 사람으로 만들기로 결심했습니다!

어쨌든 Sass를 사용하는 이유는 무엇입니까?

조직: @import

방금 언급한 대규모 전자 상거래 웹 사이트인 이 프로젝트에는 7184줄의 압축되지 않은 스타일 선언이 포함된 단일 CSS 파일이 있습니다. 예, 올바르게 읽었습니다. 7,184줄의 CSS입니다. 나는 이것이 업계에서 처리해야 하는 가장 큰 CSS 파일 프론트 엔드 개발자가 아니라고 확신하지만, 완전히 엉망이 될 만큼 충분히 컸습니다.

이것이 Sass가 필요한 첫 번째 이유입니다. 스타일시트를 구성하고 모듈화하는 데 도움이 됩니다. 변수가 아니며 중첩되지 않습니다. 나에게 Sass의 핵심 기능은 부분적이며 SCSS 및 Sass 파일을 가져올 수 있도록 CSS @import 규칙을 확장하는 방법입니다. 실제로 이것은 큰 style.css 파일을 유지 관리, 이해 및 구성하기 쉬운 여러 개의 작은 파일로 분할할 수 있음을 의미합니다.

@import 규칙은 CSS 자체만큼 오랫동안 존재해 왔습니다. 그러나 CSS 파일에서 @import를 사용할 때 가져오는 각 CSS 파일에 대해 하나씩 별도의 HTTP 요청을 트리거하기 때문에 나쁜 평판을 얻었습니다. 이는 사이트 성능에 해로울 수 있습니다. Sass와 함께 사용하면 어떻게 될까요? "전처리기"라는 단어가 무엇을 의미하는지 생각하기 위해 멈추지 않았다면 지금이 적기입니다.

전처리기는 입력 데이터를 처리하여 다른 프로그램의 입력으로 사용되는 출력을 생성하는 프로그램입니다. —위키피디아

따라서 @import 규칙으로 돌아가서 이것은 @import가 Sass에 의해 처리되고 모든 CSS 및 SCSS 파일이 라이브 사이트에서 끝나는 단일 파일로 컴파일됨을 의미합니다. 사용자는 단 한 번의 요청만 하고 단일 파일을 다운로드해야 하며 프로젝트 구조는 수백 개의 모듈화된 파일로 구성될 수 있습니다. 전형적인 Sass 프로젝트의 style.scss는 다음과 같습니다.

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

자신을 반복하지 마십시오: 변수

Sass를 칭찬하는 모든 기사는 아마도 Sass의 주요 기능인 변수를 언급하는 것으로 시작할 것입니다. 변수의 가장 일반적인 사용은 색상 팔레트입니다. 아무도 동일한 16진수 코드를 사용하지 않기 때문에 CSS에서 약간 다른 음영으로 끝나는 동일한 색상이 무엇인지에 대한 여러 선언을 몇 번이나 찾았습니까? Sass가 구출합니다. Sass에서는 거의 모든 값으로 변수를 선언할 수 있습니다. 따라서 색상 팔레트는 다음과 같을 수 있습니다.

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

$로 시작하는 단어는 Sass 변수입니다. 이것이 의미하는 바는 나중에 스타일시트에서 해당 단어를 사용할 수 있고 이전에 정의한 값에 매핑된다는 것입니다.

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

이것이 우리의 7184줄의 CSS 코드를 어떻게 바꿀 수 있는지 상상해보십시오. 지금 바로 Sass를 원할 수도 있습니다. 더 나아가 브랜드가 재설계되고 CSS의 모든 색상을 업데이트해야 한다고 상상해 보십시오. Sass를 사용하면 해당 변수의 선언을 한 번만 업데이트하면 됩니다. baam! 변경 사항은 스타일시트 전체에 적용됩니다.

Sass 플레이그라운드인 Sassmeister에서 이 예제를 코딩했습니다. 따라서 해당 변수를 다른 것으로 변경해 보십시오.

변수의 유용성은 색상뿐만 아니라 글꼴 선언, 크기, 미디어 쿼리 등에 국한됩니다. 이것은 아이디어를 제공하는 정말 기본적인 예이지만 Sass의 가능성은 무한합니다.

클리너 소스 코드: 중첩

중첩은 Sass에서 두 번째로 많이 언급되는 기능일 수 있습니다. Sass를 사용한 후 다시 바닐라 CSS로 돌아갔을 때 보고 있던 CSS 파일이 너무 어수선해서 축소되었는지 확신할 수 없었습니다. 중첩이 없으면 바닐라 CSS는 인쇄된 .min.css 파일보다 더 좋아 보이지 않습니다.

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

중첩을 사용하면 선언의 중괄호 사이에 클래스를 추가할 수 있습니다. Sass는 선택자를 매우 직관적으로 컴파일하고 처리합니다. "&" 문자를 사용하여 부모 선택자의 참조를 얻을 수도 있습니다. 예제 CSS로 돌아가서 다음과 같이 변환할 수 있습니다.

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

보기에도 좋고 읽기도 쉽습니다. 이 예제를 가지고 자유롭게 플레이하십시오.

다시! 자신을 반복하지 마십시오: 믹스인 및 확장

CSS에서 반복은 항상 피하기 어렵습니다. 특히 Sass가 믹스인과 확장을 제공할 때 이 점을 조금 더 강조해도 나쁠 것은 없습니다. 둘 다 강력한 기능이며 많은 반복을 피하는 데 도움이 됩니다. mixin과 extends의 가능성은 끝이 없는 것 같습니다. 믹스인을 사용하면 매개변수화된 CSS 선언을 만들고 스타일시트 전체에서 재사용할 수 있습니다.

예를 들어 내부에 버튼이 있는 상자 모듈이 있다고 가정해 보겠습니다. 상자의 테두리와 버튼의 배경이 같은 색상이 되도록 하고 싶습니다. 바닐라 CSS를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

 .box { border: 2px solid red; } .box .button { background: red; }

이제 동일한 상자 모듈을 원하지만 색상이 다르다고 가정해 보겠습니다. CSS에 다음과 같이 추가합니다.

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

이제 더 얇은 테두리가 있는 상자 모듈을 원한다고 가정해 보겠습니다. 당신은 추가할 것입니다:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

많이 반복되죠? Sass를 사용하면 이러한 사례를 추상화하여 반복을 줄일 수 있습니다. 다음과 같이 믹스인을 정의할 수 있습니다.

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

따라서 소스 코드를 다음과 같이 줄일 수 있습니다.

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

예쁘죠? 이 예제를 가지고 놀아보세요. 자신만의 믹스인 라이브러리를 만들거나 더 나은 방법으로 커뮤니티 라이브러리 중 하나를 사용할 수 있습니다.

확장은 유사하며 한 선택기에서 다른 선택기로 속성을 공유할 수 있습니다. 그러나 여러 선언을 출력하는 대신 속성을 반복하지 않고 클래스 목록을 출력합니다. 이렇게 하면 출력에서도 코드가 반복되는 것을 피할 수 있습니다. 이전 예제의 버튼은 잊어버리고 @extend가 .boxes 에서 어떻게 작동하는지 봅시다 .

첫 번째 상자를 선언했다고 가정해 보겠습니다.

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

이제 이 상자와 비슷하지만 테두리 색상이 다른 두 개의 상자가 필요합니다. 다음과 같이 할 수 있습니다.

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

컴파일된 CSS는 다음과 같습니다.

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

강력하죠? 여기에서 예제를 찾을 수 있습니다. 결과 CSS를 검토하면 .box 클래스가 출력에 포함된다는 것을 알게 될 것입니다. 이 동작을 원하지 않으면 @extend 를 "자리 표시자"와 결합할 수 있습니다. 자리 표시자는 CSS에서 클래스를 출력하지 않는 특수 선택기입니다. 예를 들어, 때때로 목록의 기본 스타일을 많이 재설정하는 경우가 있습니다. 나는 일반적으로 다음과 같은 자리 표시자와 함께 @extend를 사용합니다.

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

그런 다음 모든 스타일시트에서 이 패턴을 재사용할 수 있습니다.

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

컴파일된 CSS는 다음과 같습니다.

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

여기에서 예제를 확인하십시오.

더 있나요?

전적으로! 나는 이 기사를 너무 복잡하게 만들고 싶지 않았지만 당신이 발견하기를 기다리고 있는 Sassy 세계가 있습니다. 그리고 그 외에도 많은 기능이 있습니다. 작업, //, 함수, if 루프가 있는 한 줄 주석 ... "CSS로 'X' 작업을 수행하는 것이 좋을 것"이라고 생각한 적이 있다면 확신합니다. 그 'X'는 이미 Sass에 의해 수행되었습니다. "초능력을 가진 CSS"가 그 슬로건이며 진실에 더 가깝습니다.

결론

설치 페이지로 이동하여 해킹을 시작하십시오! 저를 믿으세요, 당신은 그것을 후회하지 않을 것입니다.

예, Sass에 대한 몇 가지 대안이 있습니다. 기타 전처리기(LESS, Stylus), 후처리기, Grunt 등 CSS 변수도 있습니다. Sass가 유일한 기술이라고 말하는 것이 아닙니다. 내가 말하는 것은 그것이 최고라는 것뿐입니다! 적어도 현재로는. 내 말을 믿지 않아? 직접 시도해 보세요. 당신은 그것을 후회하지 않을 것입니다!