나침반에 나침반을 사용하여 구문 방식으로 멋진 스타일 시트
마지막 글에서 Compass에 관해 한 번 언급했습니다. 공식 사이트에 따르면, 오픈 소스 CSS 제작 프레임 워크.
간단히 말해 Compass는 Sass 확장 기능이며 LESS Element of LESS와 마찬가지로 CSS3 Mixins을 많이 사용하고 있습니다. 단, Sass의 강력한 동반자 도구가되는 몇 가지 다른 기능이 추가되었습니다. 확인 해보자.
나침반 설치하기
나침반, Sass 같은, 우리 시스템에 설치해야합니다.. 그러나 Scout App 또는 Compass.app와 같은 응용 프로그램을 사용하는 경우에는 필요하지 않습니다..
그들 없이는, 당신은 그것을해야합니다. “수동으로” ...을 통하여 터미널 / 명령 프롬프트. 이렇게하려면 다음 명령 줄을 입력하십시오.
Mac / Linux 터미널에서
sudo gem install compass
Windows 명령 프롬프트에서
보석 설치 나침반
설치가 성공하면 아래와 같이 알림을 받아야합니다.
그런 다음 작업 디렉토리에서 다음 명령 줄을 실행하여 나침반 프로젝트 파일.
나침반 초기화
더 읽을 거리: Compass 명령 줄 문서
나침반 구성
이 명령을 실행 한 경우 나침반 초기화, 이제 파일 이름이 있어야합니다. config.rb 귀하의 작업 디렉토리에. 이 파일은 프로젝트 출력을 구성하는 데 사용됩니다. 예를 들어 기본 디렉토리 이름을 변경할 수 있습니다.
http_path = "/"css_dir = "css"sass_dir = "scss"images_dir = "img"javascripts_dir = "js"
Compass에서 생성 된 주석 행을 제거하십시오. 우리가 설정 한 참된 의견을 인쇄 할 필요가 있거나 그릇된 그럴 필요가 없다면.
line_comments = false
CSS 출력도 결정할 수 있습니다. 선택할 수있는 네 가지 옵션이 있습니다. :넓히는, :콤팩트, : 압축과 : 중첩 된. 현재로서는 개발 단계에 있기 때문에 확장해야합니다..
output_style = : 확장 됨
필자는 이러한 구성이 대부분의 프로젝트에서 일반적으로 충분하다고 생각하지만 더 많은 환경 설정이 필요한 경우이 설명서 인 Compass Configuration Reference를 항상 참조 할 수 있습니다.
마지막으로 우리는 손목 시계 이 명령 줄을 사용하여 디렉토리의 모든 파일.
나침반 시계
이 명령 행은 Sass와 같이 모든 파일 변경을 감시하고 해당 CSS 파일을 작성 또는 갱신합니다. 그러나이 라인은 프로젝트 구성을 마친 후에 실행하십시오. config.rb, 그렇지 않으면 파일의 변경 사항을 무시합니다..
CSS3 믹스
CSS3를 걷기 전에, 우리의 기본 .scss 파일을 컴파일하려면 다음 행을 사용하여 Compass를 가져와야합니다. @ 수입 "나침반";, Compass에서 모든 확장을 가져옵니다. 그러나 CSS3 만 필요한 경우이 줄로 더 구체적으로 할 수 있습니다. @import "compass / css3".
더 읽을 거리: 컴퍼스 CSS3.
자 이제 SaaS와 Compass를 사용하여 무언가를 만들어 봅시다. HTML 문서에서 사용자가 만든 것으로 가정하면 다음과 같은 간단한 마크 업을 추가합니다.
아이디어는 또한 간단하다; 우리는 둥근 모서리가있는 회전 된 상자를 만들고 아래는 초보자를위한 Sass 중첩 스타일입니다.
body background-color : # f3f3f3; 섹션 width : 500px; 여백 : 50 픽셀 자동 0; div width : 250px; 높이 : 250px; 배경색 : #ccc; 여백 : 0 자동;
그리고 사각형을 둥근 모서리로 만들려면 다음과 같이 Compass CSS3 Mixins을 포함시킬 수 있습니다.
body background-color : # f3f3f3; 섹션 width : 500px; 여백 : 50 픽셀 자동 0; div width : 250px; 높이 : 250px; 배경색 : #ccc; 여백 : 0 자동; @include border-radius;
이 국경 - 반경 믹스 인은 모든 브라우저 접두사를 생성하며, 기본적으로 모서리 반경은 5px. 그러나 우리는 필요에 따라 반경을 지정할 수도 있습니다. @include border-radius (10px); .
섹션 div 너비 : 250px; 높이 : 250px; 배경색 : #ccc; 여백 : 0 자동; -webkit-border-radius : 10px; -moz-border-radius : 10px; -ms-border-radius : 10px; -o-border-radius : 10px; border-radius : 10px;
다음으로 계획대로 상자를 회전합니다. 컴퍼스로하는 것은 정말 쉽습니다. 우리가 할 일은 변환 방법을 호출하는 것뿐입니다.
body background-color : # f3f3f3; 섹션 width : 500px; 여백 : 50 픽셀 자동 0; div width : 250px; 높이 : 250px; 배경색 : #ccc; 여백 : 0 자동; @include border-radius (10px); @ 포함 회전;
이 Mixins는 또한 지루한 벤더 프리픽스를 생성 할 것이고 회전은 기본적으로 45도 걸릴 것입니다. 아래에 생성 된 CSS를 보라..
섹션 div 너비 : 250px; 높이 : 250px; 배경색 : #ccc; 여백 : 0 자동; -webkit-border-radius : 10px; -moz-border-radius : 10px; -ms-border-radius : 10px; -o-border-radius : 10px; border-radius : 10px; -webkit-transform : rotate (45deg); -moz-transform : rotate (45deg); -ms-transform : rotate (45deg); -o-transform : rotate (45deg); 변형 : rotate (45deg);
나침반 헬퍼
Compass에서 가장 강력한 기능 중 하나가 도우미입니다. 공식 사이트에 따르면, 나침반 헬퍼는 Sass에서 제공하는 기능을 보완하는 기능입니다. 자, 다음 예제를 통해 명확한 그림을 얻으 십시다..
@ Font-face 파일 추가하기
이 예제에서는 사용자 정의 글꼴 패밀리를 @ font-face 규칙. 평범한 CSS3에서 코드는 다음과 같이 4 가지 글꼴 유형으로 구성되며 일부 사람들에게는 기억하기 어렵습니다..
@ font-face 글꼴 패밀리 : "MyFont"; src : url ( '/ 글꼴 / font.ttf') 형식 ( 'truetype'), url ( '/ 글꼴 / font.otf') 형식 ( 'opentype'), url ( '/ font / font.woff') 형식 ( 'woff'), url ( '/ fonts / font.eot') 형식 ( 'embedded-opentype');
나침반과 함께 우리는 더 쉽게 같은 일을 할 수 있습니다. font-files () 도우미;
@include font-face ( "MyFont", font-files ( "font.ttf", "font.otf", "font.woff", "font.eot")));
위의 코드는 첫 번째 코드 스 니펫과 정확히 동일한 결과를 생성하고 글꼴 유형을 자동으로 감지하여 체재() 통사론.
그러나 코드를 자세히 살펴보면 글꼴 경로를 추가하지 않은 것을 볼 수 있습니다 (/ fonts /). 그렇다면 Compass는 글꼴 위치를 어떻게 알 수 있습니까? 글쎄, 혼란스러워하지 마라.이 경로는 실제로 파생 된 것이다. config.rb 와 fonts_path 재산;
fonts_dir = "글꼴"
그래서, 우리가 그것을 fonts_dir = "myfonts", 생성 된 코드는 url ( '/ myfonts / font.ttf'). 기본적으로 경로를 지정하지 않으면 Compass가 경로를 지정합니다. 스타일 시트 / 글꼴.
이미지 추가
다른 예제를 만들자. 이번에는 이미지를 추가 할 것이다. CSS를 통해 이미지를 추가하는 것이 일반적입니다. 우리는 일반적으로 배경 이미지 그렇게, 재산;
div 배경 이미지 : url ( '/ img / the-image.png');
나침반에서는 url () 함수로 대체 할 수 있습니다. image-url () 도우미와 유사한 추가 @ font-face 위의 경로를 완전히 무시하고 나침반이 나머지를 처리하도록 할 수 있습니다..
이 코드는 첫 번째 스 니펫에서와 똑같은 CSS 선언을 생성합니다..
div 배경 이미지 : 이미지 URL (the-image.png);
또한 Compass에는 Image Dimension Helpers가 있으며 주로 이미지 너비와 높이를 감지하므로 CSS에서 둘 다 지정해야 할 경우 다음과 같이 두 줄을 더 추가 할 수 있습니다.
div background-image : image-url ( "images.png"); 너비 : image-width ( "images.png"); 높이 : image-height ( "images.png");
출력은 다음과 같이됩니다.
div background-image : url ( '/ img / images.png? 1344774650'); 너비 : 80px; 높이 : 80px;
더 읽을 거리: 나침반 도우미 함수
최종 생각
자, Compass에 관해 오늘 많이 토론했습니다. 실제로 볼 수 있듯이이 도구는 정말 강력한 도구이며보다 우아한 방식으로 CSS를 작성합니다..
그리고 이미 알고 있듯이 Sass만이 아닙니다. CSS 전처리 기; 우리가 이전에 철저히 토론 한 LESS도 있습니다. 다음 글에서는 머리를 맞대어 비교해 보겠습니다.이 둘 중 하나는 CSS 전처리에서 더 잘합니다..
- 소스 다운로드
