Sass의 아키텍처를 시작합니다

Sass Architecture : 모듈 식 CSS 개발에 대한 깊은 다이빙

Jump Start Sass에서 발췌 한 내용은 CSS 아키텍처의 복잡성과 Sass가 프로세스를 향상시키는 방법을 탐구합니다. 확장 가능하고 유지 관리 가능한 스타일 시트를 구축하기위한 다양한 건축 적 접근 방식과 모범 사례를 검토 할 것입니다.

CSS 아키텍처는 역사적으로 도전이었습니다. SASS는이를 변수, 믹스 인 및 기타 기능으로 다루지 만 최적의 접근 방식은 여전히 ​​논의의 시점입니다. 인기있는 방법으로는 OOCS, SMACSS, 원자 디자인, ITCS 및 BEM이 각각 강점과 약점이 있습니다. 최상의 전략은 종종 여러 시스템의 요소를 결합한 하이브리드입니다. 주요 개념 :

Sass의 향상된

: > CSS의 와 달리 Sass의 버전은 컴파일 중에 여러 파일을 결합하여 HTTP 요청을 줄입니다. 부분이있는 모듈 식 아키텍처 :

폴더 내에서 구성된 밑줄 접두사로 표시된 CSS를 논리 단위로 분류합니다 (부분). 그런 다음 컴파일을 위해 기본 파일로 가져옵니다.

CSS 건축 방법론 : OOCSS, SMACSS, ATOMIC DESIGN, ITCSS 및 BEM을 탐색하여 원리를 이해하고 프로젝트에 적응하십시오.

SASS 기능 : 변수, 믹스 인 및 일관성, 가독성 및 유지 관리에 대한 기능을 활용합니다.

향후 고려 사항 : Sass 4의 모듈 식 수입은 강화 된 제어 및 네임 스페이스 관리를 제공합니다. 구성 파일 구조 : 스타일을 , 및 . @import 여러 파일과 폴더 : 코드를 여러 파일로 나누는 것은 사전 처리기의 핵심 이점입니다. Sass는 세분화 된 조직을 허용합니다. 규칙은 컴파일 중에 브라우저의 단일 CSS 파일로 이러한 파일을 통합합니다. <code>@import CSS vs. SASS 가져 오기 : CSS
• 는 브라우저 측 처리를 사용하여 추가 HTTP 요청이 발생합니다. SASS 는 컴파일을 처리하여 단일 출력 파일을 만듭니다. SASS는 파일, 또는 함수에 대한 표준 CSS 가져 오기로 돌아갑니다. Sass 가져 오기 및 부분 : Sass imports ( 파일)는 기본 파일로 컴파일됩니다. 부분 (로 시작하는 파일 이름)은 독립적으로 컴파일되지 않고 다른 파일로 가져옵니다. 단순성을 위해 수입에서 확장을 생략 할 수 있습니다 _buttons.scss 예제 SASS 디렉토리 구조 :

<code>sass/
├── config/
│   ├── _colors.scss
│   └── _webfonts.scss
├── layout/
│   ├── _navigation.scss
│   └── _banner.scss
├── modules/
│   ├── _calendar.scss
│   └── _contact.scss
└── main.scss</code>

구성 요소 및 조직 :

특이성에 따라 부분을 폴더로 구성합니다 (글로벌 기본값은 먼저, 사이트 전체 패턴, 구성 요소 및 재정의). 동일한 순서로 마스터 파일 ()으로 가져 오십시오. OOCSS (객체 지향 CSS) :

는 다양한 상황에서 재사용 할 수있는 세분화 된 디자인 패턴을 강조합니다. 주요 원리 : 별도의 구조와 피부, 별도의 컨테이너 및 내용.

원자 디자인 : main.scss 는 CSS를 원자, 분자, 유기체, 템플릿 및 페이지로 구성합니다. 구성 요소 구축에 대한 구조화 된 접근법을 제공합니다 bem (블록, 요소, 수정 자) :

는 명명 컨벤션 ()을 사용하여 재사용 가능하고 독립적 인 블록을 만듭니다. CSS, HTML 및 JavaScript를 포함하는 포괄적 인 시스템을 제공합니다

SMACSS (CSS의 확장 가능 및 모듈 식 아키텍처) : 는 CSS를 기본, 레이아웃, 모듈, 상태 및 테마로 분류합니다. 적용 가능성의 깊이와 구성 요소를 작고 독립적으로 유지하는 데 중점을 둡니다. itcss (반전 삼각형 CSS) : 는 반전 된 삼각형으로 시각화 된 도달 범위, 특이성 및 명시성에 따라 CSS를 구성합니다. 레이어에는 설정, 도구, 일반, 요소, 요소, 개체, 구성 요소 및 트럼프가 포함됩니다. Miriam의 Mix-n-match : 다양한 시스템의 요소를 결합하고 CSS 캐스케이드 우선 순위를 정하고 구성 및 재사용 가능한 도구를 위해 "Sass 중추 신경계"를 사용하는 유연한 접근 방식.

Sass 4의 모듈 식 수입 :

이 다가오는 기능은 글로벌 네임 스페이스 충돌을 해결하여 제어 및 네임 스페이스 관리를 향상시킵니다. 를 사용하면 모듈의 특정 부분을 가져 와서 네임 스페이션 할 수 있습니다. 모듈 사이에 API가 전달되는 것을 용이하게합니다

결론 :

올바른 SASS 아키텍처를 선택하는 것은 프로젝트 요구와 팀 선호도에 따라 다릅니다. 다양한 시스템의 모범 사례를 통합 한 하이브리드 접근 방식이 종종 가장 효과적인 솔루션입니다. SASS 4의 모듈 식 수입은 모듈성과 유지 관리에 대한 추가 개선을 약속합니다.

위 내용은 Sass의 아키텍처를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!