sass
컴퍼스 CSS3 믹스

소개

환경 설정

명령 줄을 엽니 다.

루비를 이용한 설치

gem update --system

gem install compass

프로젝트 만들기

compass create <myproject>

그러면 나침반 프로젝트가 초기화됩니다. 그것은라는 폴더를 추가합니다. 폴더의 구조는 다음과 같습니다.

나침반 사용

compass watch

그러면 변경 될 때마다 sass 파일이 컴파일됩니다. Sass 폴더 경로는 config.rb에서 변경할 수 있습니다.

나침반과 함께 CSS3 사용하기

이 페이지 에서 CSS3 구성 요소가 지원되는 전체 참조를 찾을 수 있습니다

프로젝트에서 CSS3를 사용하기 위해 Compass는 모든 브라우저에서 CSS3 기능을 지원하기 위해 믹스 인을 제공합니다. Sass / Scss 파일 위에 나침반을 사용하도록 지정해야합니다.

@import "compass/css3";

테두리 반경

sass 파일에 나침반이있는 테두리 반경 포함 :

div {
    @include border-radius(4px);
}

CSS 출력

div {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

보시다시피 일반 CSS 이름을 사용할 수 있습니다. 그냥 앞에 @include를 넣고 ()를 사용하여 값을 설정하십시오.

Flexbox 예제

.row {
  @include display-flex;
  @include flex-direction(row);
}

CSS 출력

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

결론

이것은 단지 두 가지 예입니다. Compass는 훨씬 더 많은 CSS3 믹스를 제공합니다. Compass를 사용하는 것이 매우 편리하며 지정된 브라우저에 CSS3 구성 요소를 정의하는 것을 잊어 버릴 염려가 없습니다. 브라우저가 CSS3 기능을 지원하면 나침반이 CSS3 기능을 정의합니다.