Sass와 Compass를 만나다 - Compass Chapter

이 글은 Compass의 내용을 주로 설명합니다. Compass는 Sass용 도구 라이브러리입니다. Sass에 대해 잘 모르는 경우 Sass 자체의 Sass 장을 참조하세요. 단지 "CSS 전처리기"일 뿐이며 Compass는 Sass를 기반으로 Sass의 기능을 보완하기 위해 일련의 모듈과 템플릿이 캡슐화되어 있습니다.

1.나침반 설치

Sass와 마찬가지로 Compass도 Ruby 언어로 개발되므로 Sass를 설치하기 전에 Ruby를 설치해야 합니다. Ruby 설치 과정은 자세히 설명하지 않습니다. Ruby를 설치한 후 명령줄에 다음 명령을 직접 입력하면 됩니다.

<code>sudo gem install compass
</code>

Windows는 cmd로 입력하는데 이전 sudo는 생략해야 합니다.

일반적인 상황에서는 Compass(Sass와 함께)가 설치됩니다.

2.Compass가 프로젝트를 초기화합니다

다음으로 이름이 learn-compass-init라고 가정하고 명령줄에

을 입력해야 합니다.

<code>compass create learn-compass-init
</code>

learn-compass-init 하위 디렉터리가 현재 디렉터리에 생성됩니다(팁: Windows 플레이어는 여기에서 명령줄 창을 열려면 생성해야 하는 파일에서 Shift 키를 누른 채 마우스 오른쪽 버튼을 클릭하면 됩니다).

방금 생성한 하위 디렉토리를 입력하세요

<code>cd learn-compass-init
</code>

다음과 같은 구조를 볼 수 있는데, 여기서 config.rb 파일은 프로젝트 구성 파일입니다. sass와 스타일시트라는 두 개의 하위 디렉터리도 있습니다. 전자는 작성해야 하는 Sass 소스 파일을 저장하고 후자는 컴파일된 CSS 파일을 저장합니다.

3.Compass 프로젝트 컴파일

Sass를 아는 사람이라면 접미사 scss를 붙여 작성한 파일은 CSS 파일로 컴파일된 경우에만 웹사이트에서 사용할 수 있다는 것을 알고 있으므로 Compass는 일련의 컴파일 명령을 제공합니다. 프로젝트

의 루트 디렉터리에서 다음 명령을 실행하세요.

<code>compass compile
</code>

Sass 하위 디렉터리에 접미사 이름이 붙은 scss 파일은 css 파일로 컴파일되어 stylesheets 하위 디렉터리에 저장됩니다.

Scss 파일을 한 번 수정하고 다시 Compass 컴파일을 실행해야 하는 것이 너무 번거롭다고 하시는 분들이 계시는데, Compass에서는 다음과 같은 자동 컴파일 명령도 제공합니다

<code>compass watch
</code>

이 명령을 실행한 후 scss 파일이 수정되는 한 자동으로 스타일시트 하위 디렉터리의 해당 CSS 파일로 컴파일됩니다.

기본적으로 컴파일된 CSS 파일에는 많은 주석이 포함되어 있지만, 이 경우에는 압축된 CSS 파일만 필요합니다

<code>compass compile --output-style compressed
</code>

4. Compass의 모듈

Comapss는 모듈 구조를 채택하고 있습니다. 각 모듈은 개발 중에 필요에 따라 모듈을 도입할 수 있습니다. 아래에서는 각 모듈의 주요 기능을 중점적으로 살펴보겠습니다.

Compass에는 다음을 포함하여 6개의 내장 모듈이 있습니다.

<code>-   reset
-   css3
-   layout
-   typography
-   utilities
-   helpers
</code>

리셋 모듈: 브라우저 차이를 줄여주는, 즉 브라우저 간의 차이를 재설정해주는 브라우저 리셋 모듈입니다.

레이아웃 모듈: 예를 들어 컨테이너의 하위 요소가 가로 및 세로로 채워지는 경우 페이지 레이아웃을 제어하는 ​​기능을 제공합니다.

가져오기를 위해 Reset 모듈과 Layout 모듈만 명시적으로 지정해야 한다는 점은 주목할 가치가 있습니다. 즉, @import "compass"가 있는 한 다른 모듈을 가져올 수 있습니다.

css3 모듈: 크로스 브라우저 CSS3 기능을 제공합니다. 브라우저 접두사를 추가하면 다시 사용해도 골치 아픈 일이 없을 것입니다.

도우미 모듈: Sass의 함수 목록과 매우 유사한 일련의 함수를 포함합니다(드물게 사용되지만 매우 강력함).

타이포그래피 모듈: 텍스트 스타일과 수직 리듬을 수정합니다.

유틸리티 모듈: Compass는 다른 모듈에 넣을 수 없는 모든 컨텐츠를 이 모듈에 담는다고 할 수 있습니다.

실제로 Compass는 브라우저 지원 방법도 제공합니다. 이는 주로 Compass가 기본적으로 지원하는 브라우저와 기본적으로 지원되는 특정 브라우저의 버전을 구성하는 데 사용됩니다. 수정하면 다른 브라우저의 출력에 영향을 미칩니다. 6개의 모듈로, 다양한 브라우저에 맞게 다르게 조정해야 합니다.

다음 글에서는 각 모듈의 사용법과 기능을 하나씩 설명하겠습니다.