개발자를위한 Sass 모범 사례 팁 및 도구

jQuery가 바닐라 자바 스크립트에 혁명을 일으켰던 방법, Sass는 바닐라 CSS에 혁명을 일으켰습니다.. Sass를 배우는 대부분의 개발자는 결코 돌아 가지 않기를 동의합니다. 많은 사람들은 새로운 개발자들에게 가장 큰 문제는 방법 그들은 Sass 자체를 사용하지 않고 Sass를 사용합니다..

나는 웹을 샅샅이 뒤졌으며이 기사를 집필했다. 확장 가능하고 재사용 가능한 Sass 코드 작성을위한 모범 사례. 제안은 제 자신의 견해와 Sass Guidelines와 같은 신뢰할 수있는 웹 사이트에서 온 것입니다..

물론 이러한 모든 기능을 워크 플로에 구현할 필요는 없습니다. 그러나 적어도 이러한 아이디어를 즐겁게하고 잠재적 인 이점을 고려해야합니다..

파일 구성

Sass 개발로 시작하는 가장 좋은 장소는 파일 구성입니다. 이미 모듈 식 코드를 사용하고 있다면 수입 및 부분 값 (나중에 자세히 설명)을 이해해야합니다..

그러나 지금은 DoCSSa의 파일 구조 예제를 살펴보십시오. 아래에서 볼 수있는이 파일 구조를 다시 만들었습니다.

이는 단지 제안 일 뿐이며 파일을 구성 할 수있는 여러 방법 중 하나입니다. 다른 폴더 구조를 사용하는 다른 방법을 찾을 수 있습니다. “전역” 사이트 전체 SCSS 및 “페이지들” 페이지 별 SCSS.

각 폴더의 목적을 조사하기 위해 제안 된 조직 스타일을 살펴 보겠습니다.

/ 전역 - 타이포 그라피, 색상 및 그리드와 같이 사이트 전체에 적용되는 Sass 파일을 포함합니다.
/ 구성 요소 - 버튼, 테이블 또는 입력 필드와 같은 구성 요소 스타일이 포함 된 Sass 파일 포함
/ 섹션 - 페이지의 특정 페이지 또는 영역 전용 Sass 파일 포함 (/ components / 폴더에 더 잘 결합 될 수 있음)
/ utils - Bower와 같은 도구로 동적으로 업데이트 될 수있는 Normalize와 같은 타사 유틸리티가 포함되어 있습니다..
main.scss - 다른 모든 것을 가져 오는 루트 폴더의 기본 Sass 파일.

이것은 기본적인 출발점 일 뿐이며 자신의 아이디어로 확장 할 여지가 충분합니다..

그러나 SCSS를 어떻게 구성하든 상관없이, 조직이있다. Normalize와 같이 업데이트해야하는 라이브러리를위한 별도의 파일 (또는 폴더)과 프로젝트의 Sass 부분에있는 구성 요소.

Sass 부분은 현대 모범 사례에 중요합니다. 이들은 Zurb의 디자인 팀과 많은 다른 전문 프론트 엔드 개발자들에 의해 매우 권장됩니다.

다음은 Sass 웹 사이트의 부분을 설명하는 견적입니다.

“다른 Sass 파일에 포함시킬 수있는 CSS 스 니펫이 포함 된 부분 Sass 파일을 만들 수 있습니다. 이것은 좋은 방법입니다. CSS를 모듈화하고 일을 쉽게 유지할 수 있도록 도와줍니다.. 부분은 단순히 밑줄로 시작하는 Sass 파일입니다. 이름을 _partial.scss. 밑줄은 Sass가 파일이 부분 파일 일 뿐이며 CSS 파일로 생성되어서는 안됨을 알립니다. Sass 부분은 @수입 지령.”

또한 Sass 파일 구조와 관련된 다른 게시물을 살펴보십시오.

내 저음 프로젝트를 구성하는 방법
미적 새스 : 건축과 스타일 조직
코드를 유지 관리하는 데 도움이되는 디렉토리 구조

가져 오기 전략

Sass 수입 및 부분 수입의 가치에 대해서는 충분하지 않습니다. 코드 구성은 작동하는 가져 오기 구조와 워크 플로를 얻는 데 중요합니다..

시작하기 가장 좋은 곳은 가져 오기, 변수 및 믹스 인을 함께 포함하는 전역 시트입니다. 많은 개발자들이 변수와 믹스 인을 분리하는 것을 선호하지만, 이것은 의미론으로 이어진다..

믹스 인은 Sass 코드를 가져 오거나 오히려 복제하는 방법. 그들은 엄청나게 강력하지만 사용해서는 안됩니다. “공전” 암호. mixins, extends 및 placeholder에는 Sass 개발에 모두 사용되는 점이 다릅니다..

Mixin은 코드 변경을 위해 mixin에 전달 된 동적 값과 함께 사용하는 것이 가장 좋습니다. 예를 들어, 두 색상 사이에 배경 그라디언트를 만드는 Sass 믹스 인을 확인하십시오..

@mixin linearGradient ($ top, $ bottom) background : $ top; / * 오래된 브라우저 * / 배경 : -moz-linear-gradient (top, $ top 0 %, $ bottom 100 %); / * FF3.6 + * / background : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, $ top), 컬러 스톱 (100 %, $ bottom)); / * Chrome, Safari4 + * / background : -webkit-linear-gradient (맨 위 $ 0 %, $ 아래 100 %); / * Chrome10 +, Safari5.1 + * / 배경 : -o 선형 그라디언트 (맨 위 $ 0 %, $ 아래 100 %); / * Opera 11.10 이상 * / 배경 : -ms-linear-gradient (맨 위 $ 0 %, $ 아래 100 %); / * IE10 + * / background : 선형 - 그래디언트 (맨 아래, $ top 0 %, $ bottom 100 %); / * W3C * / filter : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

믹스 인은 상위 색상과 최저 색상의 두 가지 값을 취합니다. 당신은 3 또는 4 + 다른 색상을 포함하는 그라디언트의 다른 유형에 대한 다른 mixins 쓸 수 있습니다. 이렇게하면 사용자 정의 옵션의 매개 변수를 변경하는 동안 mixin 코드를 가져오고 복제 할 수 있습니다.

코드 책임자의 예는 다음과 같습니다.

.버튼 @include linearGradient (#cccccc, # 666666);

믹스 인과 관련하여 Sass의 자리 표시자는 확장 지시어에 주로 유용합니다. 믹스 인보다 더 복잡한 것은 사실이지만 이것은 초과 코드를 다시 작성하지 않고 선택기를 함께 결합.

Sass는 단 하나의 @import 메소드를 가지고 있지만, 믹스 인과 플레이스 홀더를 포함시켜 하나의 파일로 작성 될 수 있지만 어디에서나 포함될 수있는 코드의 유연성을 보여줍니다..

가져 오기 구조를 만들 때 DRY 코딩 (직접 반복하지 마십시오)의 개념을 따르십시오..

명명 규칙

명명 규칙에 대한 일반적인 규칙은 변수, 함수 및 혼합에 적용됩니다. Sass에서 이름을 지을 때 분리를 위해 대문자로 모두 소문자 사용.

Sass 코드 구문은 실제로 CSS 지침 ruleset을 기반으로합니다. 다음은 권장할만한 권장 사항입니다.

2 개의 공백 들여 쓰기, 탭 없음
이상적으로는 80 자의 넓은 줄 이하
의미있는 공백 사용
CSS 작업을 설명하기 위해 주석 사용

유효한 Sass 코드에는 필수 항목이 아닙니다. 그러나 이러한 제안은 이 규칙 세트가 가장 균일 한 코딩 경험을 제공한다는 것을 발견했습니다..

그러나 명명 규칙에 관해서는 두 가지 구조로 끝날 수 있습니다. 하나는 Sass 이름 용이고 다른 하나는 CSS 클래스 이름 용입니다. 일부 개발자는 Sass 제안보다 BEM을 선호합니다. 어느 쪽도 더 많거나 적습니다. 다른 운영 절차에 따라 다른.

문제는 블록 / 요소 / 수정 자 (BEM) 구조가 없으므로 BEM이 Sass 변수 또는 믹스 인에 잘 전달되지 않는다는 것입니다. 나는 개인적으로 Sass 명명 규칙을 사용하는 것을 선호하지만 camelCase에서 자신의 내부 구문으로 무엇이든 시도 할 수 있습니다..

변수 및 믹스를 구성 할 때 카테고리별로 분류 한 다음 알파벳순으로 나열하십시오.. 이렇게하면 어디에서 무엇인가를 찾을 수있는 정확한 위치를 알 수 있으므로 훨씬 쉽게 편집 할 수 있습니다..

예를 들어 링크 색상을 변경하려면 변수 파일을 엽니 다 (어쩌면 _variables.scss) 색상 변수 섹션을 찾으십시오. 그런 다음 이름순으로 링크를 찾고 (헤더 링크, 텍스트 링크 등) 색상을 업데이트하십시오. 단순한!

Sass 파일에 대한 목차를 구성하는 방법에 대한 아이디어를 얻으려면 Foundation 설정 파일을 확인하십시오..

 // 사이트 설정을위한 기초 // ----------------------------- // // 목차 : // // 1 전역 // 2. 중단 점 // 3. 그리드 // 4. 기본 타이포그래피 // 5. 타이포그래프 헬퍼 ... // 1. 글로벌 // --------- $ global-font-size : 100 %; $ global-width : rem-calc (1200); $ global-lineheight : 1.5; // etc

또 다른 명명 관행은 반응하는 중단 점. Sass 중단 점의 이름을 지정할 때는 장치 별 이름을 사용하지 마십시오. 작은 이름, med, lg 및 xlg와 같은 이름을 쓰는 것이 좋습니다. 서로에 비례하여.

이것은 중단 점 간의 내부 관계에 더 좋지만 개발자가 어떤 장치가 서로 관련되어 있는지 알지 못하는 팀에게도 좋습니다.

실제로 이름을 적는 것에 관해서는, 당신이 여분의 긴 변수없이 가능한 한 구체적이어야한다.. 너는해야한다. 기억하기 쉬운 사이트 차원의 명명 규칙을 채택하십시오. 코딩하는 동안.

색상, 여백, 글꼴 스택 및 행 높이와 같은 모든 것에 대해 특정한 명명 규칙을 지정하십시오. 이름을 신속하게 회수 할 수있을뿐만 아니라 기존 구문과 일치해야하는 새로운 변수 이름을 작성할 때 작업이 쉬워집니다..

하지만 특이성과 컨볼 루션 사이의 미세한 선. 연습은 그 라인을 찾는 데 도움이되며, 더 기억하기 쉬운 이름을 쓰면 코드를 다른 프로젝트에 쉽게 복사 할 수 있습니다..

중첩 및 루핑

이 두 가지 Sass 기법은 매우 다른 동작을하지만 둘 다 적당히 사용하지 않을 경우 학대받을 수있는 능력.

중첩 ~의 과정이다. 들여 쓰기를 통해 중첩 된 선택기를 추가하여 적은 코드로 더 많은 특수성을 만듭니다.. Sass는 작동중인 코드 중첩의 예를 보여주는 중첩 가이드를 제공합니다. 그러나 둥지를 틀면 쉽게 벗어날 수 있습니다. 지나치게 열정적이라면 다음과 같은 코드로 끝날 수 있습니다.

본문 div.content div.container ... 본문 div.content div.container div.articles ... 본문 div.content div.container div.articles> div.post ...

너무 구체적이고 덮어 쓰기가 거의 불가능한이 유형의 코드는 계단식 스타일 시트의 목적을 상쇄합니다.

이 SitePoint 가이드를 살펴보면 네 가지 중첩 규칙이 있습니다.

3 단계 이상 깊이 내려 가지 마십시오..
CSS 출력이 깨끗하고 재사용 가능한지 확인하십시오..
기본 옵션이 아닌 중첩을 사용하십시오..

개발자 Josh Broton은 필요할 때 중첩을 제안하고 나머지는 일반적인 구문 규칙으로 들여 씁니다..

CSS 선택기를 들여 쓰기하면 CSS 효과가 연속적으로 발생하지 않습니다. 하지만 Sass 파일을 감추는 것이 더 쉬운 시간을 가질 것입니다. 어떤 클래스가 서로 관련이 있는지 찾아냅니다..

루프도 가능합니다. 제대로 적용되지 않으면 과용된다.. 3 개의 Sass 루프는 다음과 같습니다. @에 대한, @동안, 과 @마다. 나는 그들이 어떻게 작동하는지에 대해서는 자세하게 설명하지 않겠지 만이 게시물을 확인해보고 싶다면.

대신에 나는 루프 사용 목적 그리고 그들이 Sass에서 어떻게 작동하는지. 이것들은 자동화 될 수있는 코드 작성 시간을 절약하기 위해 사용되어야합니다. 예를 들어, Clubmate 게시물의 코드 스 니펫에 다음과 같은 몇 가지 Sass 코드가 출력됩니다.

/ * Sass code * / @for $ i from 1 ~ 8 $ width : 퍼센트 (1 / $ i). 콜 - # $ i 너비 : $ 너비;  / * output * / .col-1 width : 100 %; .col-2 width : 50 %;. 콜 -3 width : 33.333 %; 콜 -4 width : 25 %;  .col-5 폭 : 20 %; 콜 -6 폭 : 16.666 %; 콜 -7 폭 : 14.285 %; 콜 8 폭 : 12.5 %;

이러한 열 클래스는 그리드 시스템과 함께 사용할 수 있습니다. 루프 코드를 편집하여 더 많은 열을 추가하거나 제거 할 수 있습니다..

루프 할까요 아니 선택자에 대한 선택자 또는 속성을 복제하는 데 사용됩니다.; 믹스 인이.

루핑 할 때 key : value 쌍의 데이터를 저장하는 Sass 맵이라고하는 것이 있습니다. 고급 사용자는 가능할 때마다이를 활용해야합니다..

그러나 정기적 인 Sass 루프는 반복없이 코드 출력을 제공하는 데 간단하고 효율적입니다. 루프를 사용하는 가장 좋은 이유는 데이터 출력을 변경하는 CSS 속성.

루프가 도움이되는지 확인하는 좋은 방법은 다음과 같습니다. 더 적은 코드 행으로 필요한 CSS를 출력 할 수있는 다른 방법이 있다면. 그렇지 않다면 루프 구문은 아마 좋은 생각 일 것이다..

혼란 스럽거나 중첩 또는 Sass 루프에 대한 피드백을 원한다면 / r / sass / 또는 / r / css /, 매우 숙련 된 Sass 개발자가있는 활동중인 Reddit 커뮤니티에 질문을 게시해야합니다.

모듈화

모듈 형 Sass를 작성하는 것은 대부분의 프로젝트에서 절대적으로 필요합니다 (모든 프로젝트에서 논쟁하겠습니다). 모듈화는 프로젝트를 더 작은 모듈로 나누기. 이것은 Sass에서 다음을 사용하여 수행 할 수 있습니다. 부분.

모듈화 된 Sass의 아이디어는 글로벌 콘텐츠 (타이포그래피, 그리드) 또는 페이지 요소 (탭, 양식)를 대상으로하는 특정 목적으로 개별 SCSS 파일을 작성하는 것입니다..

Sass 모듈 정의는 매우 명확하고 매우 구체적인 제안을합니다 : 모듈을 가져 오면 절대로 코드를 출력해서는 안됩니다..

모든 모듈에 대한 필수 출력 아이디어는 최적화에 악몽이 될 것입니다. 대신 모듈을 개별적으로 만들고 필요한 것만 부르세요.. 모듈은 믹스 인이나 함수로 정의 할 수 있지만 셀렉터도 포함하는 모듈을 만들 수 있습니다.

그러나 Sass Way 기사에서는 모든 선택기를 믹스 인으로 쓰고 필요할 때만 호출하는 방법을 제안합니다. 당신이 이것을 채택할지 여부는 궁극적으로 당신의 선택입니다. 나는 그것이 프로젝트의 크기와 믹스를 다루는 것에 대한 당신의 편안함에 달려 있다고 생각합니다..

존 롱 (John Long)을 '사스 웨이 (Sass Way)

“나에게 모듈은 내 Sass 프로젝트의 기본 단위 또는 빌딩 블록이되었다..”

정말로 Sass 루틴을 찾고 있다면 완전히 모듈화하는 것이 좋습니다. 거의 모든 것을 기본 CSS 파일에 포함되는 모듈 식 부분으로 만들어보십시오. 처음에는이 워크 플로우가 힘들어 보일 수 있지만 더 큰 규모의 프로젝트에서는 의미가 있습니다 - 특히 큰 프로젝트의 경우.

또한 프로젝트가 서로 다른 파일에있을 때 모듈을 다른 프로젝트로 복사하는 것이 훨씬 쉽습니다.. 적응성 과 재사용 가능한 코드 모듈 형 개발의 초석이다..

Sass 모듈 및 모듈화 기술에 대한 자세한 내용은 다음 게시물을 확인하십시오.

CSS 모듈 : 미래에 오신 것을 환영합니다.
Modular Sass의 장점과 단점
SMACSS & SASS를 이용한 모듈 식 CSS 조직

완벽한 워크 플로 찾기

각 팀과 개인 개발자는 자신의 실천이 가장 잘 작동합니다. 개인적으로 가장 잘 작동하는 방법을 채택하거나 전문적으로 팀에게 가장 적합한 방법을 채택해야합니다..

또한 Gulp 또는 Grunt를 사용하여 프로젝트 자동화 및 코드 축소에 대해 고려하십시오. 이렇게하면 많은 수작업을 줄일 수 있고 자동화 도구는 현재 의심 할 여지없이 현대 프론트 엔드 개발을위한 모범 사례의 일부입니다..

GitHub의 Foundation SCSS와 같은 오픈 소스 라이브러리를 살펴보고 다른 라이브러리에서 사용하는 모범 사례에 대해 자세히 알아보십시오..

가장 좋은 방법은 대부분의 경우 작업을 실제로 향상시키는 것이지만 많은 대안이 있습니다. 사물을 시험해보고 그들이 어떻게 느끼는지 보아라. 당신은 모범 사례가 5 년 동안 급속하게 변할 수 있도록 항상 배울 것입니다..

Sass 과정 전체에 대한 마지막 제안은 명료하게 의사 결정을 내릴 수있다.. 작업을보다 쉽게 만들어주는 코드 작성. 더 간단한 방법이 있다면 프로젝트를 복잡하게하지 마십시오..

Sass는 CSS 개발 경험을 향상시키기위한 것입니다. 명확성과 모범 사례로 작업 최상의 경험을 얻으려면.

마무리

Sass 워크 플로의 정체는 코드 스타일을 조정하고 모범 사례를 따르면 해결할 수 있습니다. 나는 Sass 블로그와 전문 개발자들로부터 주어진이 게시물에서 몇 가지 제안을 설명했다..

더 많은 정보를 얻으려면 워크 플로에 이러한 방법을 적용하는 것이 가장 좋습니다. 어떤 작품보기. 시간이 지남에 따라 어떤 활동은 다른 활동보다 더 유익하다는 것을 알게 될 것입니다. 무슨 일이라도하고 무엇을하지 않겠습니까?.

Sass 개발에 대한 추가 팁과 모범 사례를 찾으려면 다음 링크를 확인하십시오.

새 스 지침
우리 웅덩이를위한 비전
당신이 웅덩이에서 최선을 나가는 데 도움이되는 8 가지 팁
혼란 스러움없이 웅크 리기에서 확장하기
Sass Best Practices - 3 단계 이상의 중첩