Sass 대 Compass – 검토

compass는 sass용 도구 라이브러리입니다.
compass는 sass의 기능을 보완하고 풍부하게 하기 위해 sass를 기반으로 한 일련의 유용한 모듈을 캡슐화합니다.

설치:
compass는 Ruby로 개발되었습니다. 언어이므로 Ruby를 설치하기 전에 먼저 설치해야 합니다.
명령:

gem install compass
프로젝트 초기화:
Compass 프로젝트를 생성하려면 프로젝트 이름이 myproject인 경우
compass create myproject
가 현재 이 위치에 있습니다. 디렉터리는 config.rb 파일과 두 개의 하위 디렉터리인 sass 및 스타일시트가 포함된 디렉터리 아래에 생성됩니다. 전자는 sass 소스 파일을 저장하고 후자는 컴파일된
css 파일을 저장합니다.

편집:
개발하면서 작성한 내용은 파일 확장자가 scss인 파일이었습니다. CSS 파일로 컴파일해야만 웹사이트에서 사용할 수 있습니다.
compass의 컴파일 명령어는
compass compile
입니다. 이 명령어는 프로젝트 루트 디렉터리에서 실행됩니다. sass 하위 디렉터리에 있는 scss 파일을 css 파일로 컴파일하여 stylesheets 하위 디렉터리에 저장합니다.
기본적으로 컴파일되는 CSS 파일에는 코멘트가 많습니다. 프로덕션 환경에서는 압축된 CSS 파일이 필요합니다
compass compile --output-style 압축
수정되지 않은 파일을 다시 컴파일하는 경우
compass compile --force
명령 매개변수를 사용하는 것 외에도 구성 파일 config.rb에서 컴파일 모드를 지정할 수도 있습니다.

output_style = :expanded
:expanded는 컴파일 후에도 원래 형식을 유지한다는 의미입니다. 다른 값에는 중첩,
:compact 및 압축이 포함됩니다. : 압축 모드.
output_style = :compressed
환경 값(:production 또는:development)을 지정하여 컴파일 모드를 지능적으로 결정할 수도 있습니다.

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

명령줄 모드에서는 일회성 컴파일 명령 외에도 compass 자동 컴파일 명령이 있습니다

compass watch
scss 파일이 변경되는 한 자동으로 CSS 파일로 컴파일됩니다.

나침반 모듈

나침반은 모듈 구조를 채택하고 있으며, 모듈마다 다른 기능을 제공하며, 5개의 모듈이 내장되어 있습니다.
css3 레이아웃 타이포그래피 단위 재설정

모듈 재설정

자신만의 스타일을 작성하기 전에 브라우저의 기본 스타일을 재설정해야 합니다.
작성 방법은 다음과 같습니다.
@import "compass/reset"
위의 @import 명령은 로드할 모듈을 지정하는 데 사용되며, 여기서는 재설정 모듈을 로드하는 것입니다. 컴파일 후 해당 CSS 재설정 코드가 생성됩니다.

CSS3 모듈
이 모듈은 24개의 CSS3 명령을 제공합니다. 예:
둥근 모서리를 작성하는 방법(border-radius),
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
위의 @include 명령은 mixin을 호출하는 것을 의미합니다(C 언어의 매크로와 유사). 5px는 필렛의 반경을 지정하는 데 사용되는 매개변수입니다.

컴파일된 코드는 다음과 같습니다.
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border- radius : 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

필요한 경우 왼쪽 상단 모서리는 둥글며
@include border-corner-radius(top, left, 5px);

레이아웃 모듈
으로 작성됩니다. 이 모듈은
예를 들어 다음과 같은 레이아웃 기능을 제공합니다. 페이지 지정 바닥글 섹션은 브라우저 하단에 나타납니다.
@import "compass/layout";
#footer {
@includesticky-footer(54px);
}
하위 요소가 상위 요소의 공간을 차지하도록 지정합니다.

@import "compass/layout";
#stretch-full {
@include Stretch;
　}
타이포그래피 모듈
이 모듈은 템플릿 기능을 제공합니다
예, 링크 색상 지정 믹스인은 다음과 같습니다.
link-colors($normal, $hover, $active, $visited, $focus);
사용 시 다음과 같이 작성됩니다:
@import "compass /typography";
a {
　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

유틸리티 모듈

이 모듈은 다른 모듈의 일부 기능을 제공합니다.
예를 들어 클리어 플로팅:

import "compass/utilities/";
.clearfix {
@includeclearfix;
}
예를 들어 테이블:
@import "compass/utilities";
테이블 {
@include table-scaffolding;
　}

컴파일 후
테이블 th {
text-align: center;
글꼴 두께: 볼드;
}
테이블 td,
테이블 th {
padding: 2px;
}
테이블 td.numeric,
테이블 th. 숫자 {
text-align: right;
　}

도우미 기능
compass는 모듈 외에도 일련의 기능을 제공합니다.
몇 가지 유용한 함수가 있습니다. image-width() 및 image-height()는 이미지의 너비와 높이를 반환합니다.
또 다른 예인 inline-image()는 이미지를 데이터 프로토콜의 데이터로 변환할 수 있습니다.

@import "compass";
.icon { background-image: inline-image("icon.png");}

컴파일 후
.icon을 얻습니다. { background -image: url('data:image/png;base64,iBROR...QmCC');}
함수와 mixin의 주요 차이점은 @include 명령을 사용할 필요가 없으며 @include 명령을 사용할 수 있다는 것입니다. 직접 호출됩니다.

더 많은 Sass 및 Compass - 관련 기사를 검토하려면 PHP 중국어 웹사이트를 주목하세요!