CSS관련 전처리기가 여러가지 있는데...그 중 compass에 관심이 가서 회사서 같이 공유하려고 만든자료입니다. 다른 분들께도 도움이 되었으면 좋겠네요.

1. COMPASS 사용하기
에프에이솔루션 UX/UI팀
박지혜 차장

2. 1. BASIC
2. COMPASS
3. SASS 문법
4. COMPASS 확장
5. Eclipse build하기
6. 참고
4
6
11
22
27
31
목차

3. BASIC
3

4. CSS 전처리기?
• CSS는 변수 등의 개념이 없어서 일일이 찾아서 수정하는 번거로움을 해결하기 위해 생겨난, CSS작성
관리를 효율적으로 도와주는 도구입니다.
• 대표적인 CSS 전처리 도구 :
– LESS(http://lesscss.org/)
– SASS(http://sass-lang.com/)
– STYLUS
4

5. COMPASS?
• Compass는 CSS를 쉽게 개발 및 편집할 수 있게하는 CSS Framework
• Ruby를 이용하여 만들어진 개발 툴
• SASS를 기반으로 합니다.
• 확장성이 뛰어납니다.
• Compass의 장점
– 간결한 코드
– 재사용 가능한 패턴
– Sprites를 간단하게 작성
– CSS3 코드를 손쉽게 적용
– 쉽게 확장할 수 있는 구조
– CSS 파일 압축
5

6. COMPASS
6

7. 어떻게 동작하나요?
7
RUBY
Compass
Compass문법으로
SCSS 파일 작성
CSS
자동생성
@import "compass/css3";
@import "compass/utilities";
#demo {
@include clearfix;
}
.border-radius-example {
width: 125px;
height: 125px;
background: red;
margin: 20px;
float: left;
padding: 5px;
}
#border-radius {
@include border-radius(25px);
}
#demo {
overflow: hidden;
*zoom: 1;
}
.border-radius-example {
width: 125px;
height: 125px;
background: red;
margin: 20px;
float: left;
padding: 5px;
}
#border-radius {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}
CMD에서 명령어 적용 : compass watch

8. 설치하기
• http://compass-style.org/install/
• 0. 루비 설치
– http://www.rubyinstaller.org/
• CMD모드에서 환경셋팅
– $ gem update --system
– $ gem install compass
8

9. 프로젝트 생성하기
1. 신규 프로젝트 생성 :
생성디렉토리에서 CMD로 입력
참고링크.
http://www.slideshare.net/yaioyaio/compass-12568089
http://thesassway.com/beginner/getting-started-with-sass-and-compass
9
$ compass create <myproject>
생성결과
Sass폴더안의 파일을 작성하면,
Stylesheets로 css파일이 자동생성되는 구조
생성되는 폴더이름을 변경하고 싶다면 별도
옵션을 사용한다.

10. 프로젝트 옵션 추가
• http://compass-style.org/install/
• 페이지 중간부분 옵션을 선택하면 명령어가 변경된다.
10
$ compass create project01 --sass-dir "sass" --css-dir "css"
변경된 명령어를 복사하여 사용.

11. 기존 프로젝트에 적용하기
• 프로젝트 폴더로 이동후 명령어 입력
11
$ compass install compass

12. Compile 하기
• Sass파일 디렉토리로 이동하여 명령어 적용
– 지정한 파일만 컴파일 하는 경우
– 지정한 파일이 변경되는경우 자동생성
– 해당 폴더의 scss파일이 변경되는 경우 모두 자동생성
12
$ compass compile scss/main.scss
$ compass watch scss/main.scss
$ compass watch

13. 압축하기
• 명령어로 압축
• Config.rb 환경설정에서 적용하기
– 프로젝트의 기본 설정에 대한 디렉토리 정보를 담고 있는 파일
– 타겟 디렉토리를 설정하는 경우 옵션에서 적용이 안된경우 변경가능하다.
– 환경설정파일에 압축옵션을 추가한다.
– Watch 적용시 자동으로 압축된 형태로 산출된다.
13
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts“
output_style = :compressed
$ compass compile -e production --force

14. SASS문법
14

15. BASIC
• Compass는 SASS의 문법을 기본으로 합니다.
• SASS에서 제공하는 변수, 중첩, import, mixins등의 기능 사용이 가능합니다.
15

16. 변수 : Variables
16
SCSS;
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body { font: 100% $font-stack; color: $primary-color; }
CSS;
body { font: 100% Helvetica, sans-serif; color: #333; }

17. 중첩 : Nesting
17
SCSS;
nav {
ul { margin: 0; padding: 0; list-style: none; }
li { display: inline-block; }
a { display: block; padding: 6px 12px; text-decoration: none; }
}
CSS;
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

18. 파일 Import
18
SCSS;
@import 'reset';
body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; }
CSS;
html, body, ul, ol { margin: 0; padding: 0; }
body { background-color: #efefef; font-size: 100% Helvetica, sans-serif; }

19. Mixin
19
SCSS;
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
CSS;
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

20. 상속 ; Extend/Inheritance
20
SCSS;
.message { border: 1px solid #ccc; padding: 10px; color: #333; }
.success { @extend .message; border-color: green; }
.error {@extend .message; border-color: red; }
.warning {@extend .message; border-color: yellow; }
CSS;
.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; }
.success { border-color: green; }
.error { border-color: red; }
.warning { border-color: yellow; }

21. 연산 ; Operators
• +, -, *, /, 와 % 등의 연산이 가능
21
SCSS;
.container { width: 100%; }
article[role="main"] { float: left; width: 600px / 960px * 100%; }
aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
CSS;
.container { width: 100%; }
article[role="main"] { float: left; width: 62.5%; }
aside[role="complimentary"] { float: right; width: 31.25%; }

22. COMPASS
확장
22

23. CSS3 확장 – Border Radius
• Compass에서 이미 작성해놓은 css3관련 속성을 가져다가 사용할 수 있다.
• 실제 컴파일된 CSS파일에 여러 파일이 import되지 않으며, 속성만 선언된다.
23
SCSS;
@import "compass/css3";
.border-radius-example { width: 125px; height: 125px; background: red; margin: 20px; float: left; padding: 5px;}
#border-radius { @include border-radius(25px);}
CSS;
.border-radius-example { width: 125px; height: 125px; background: red; margin: 20px; float: left; padding: 5px;}
#border-radius {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}

24. CSS3 확장 – BOX sizing
24
SCSS;
@import "compass/css3";
.box-sizing-example {
background: red;
padding: 20px;
border: 10px solid green;
margin: 20px;
width: 200px;
}
#content-box {
@include box-sizing(content-box);
}
#border-box {
@include box-sizing(border-box);
}
CSS;
.box-sizing-example {
background: red;
padding: 20px;
border: 10px solid green;
margin: 20px;
width: 200px;
}
#content-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

25. Image sprite - 기본적용
• Sprite 이미지에 바로 적용하는 경우
25
SCSS;
$icon-width: 24px;
$icon-height: 24px;
$icons: image-url('toolbar.png');
.media-icon { background-image: $icons; background-position: -($icon-width * 5) -($icon-width * 1); width: $icon-
width; height: $icon-height; }
CSS;
.media-icon {
background-image: url('/images/toolbar.png');
background-position: -144px;
width: 24px;
height: 24px;
}

26. Image sprite - 확장적용
• 이미지가 이미 여러 개로 나누어져 있는 경우
• SCSS파일에 명령어를 적용하면 하나로 합쳐진 이미지가 자동 생성되며, 관련 CSS가 산출된다.
• 자동으로 class명을 생성하는 경우
• 클래스명을 지정하는 경우
26
SCSS;
@import "compass/utilities/sprites";
@import "header/*.png";
@include all-header-sprites;
CSS;
.header-sprite, .header-img1, .header-img2, .header-img3, .header-img4 {
background: url('/Proc/images/header-s50c8c3bfb6.png') no-repeat;
}
.header-img1 { background-position: 0 0;}
.header-img2 { background-position: 0 -41px;}
.header-img3 { background-position: 0 -123px;}
.header-img4 { background-position: 0 -82px;}
자동생성
SCSS;
@import "compass/utilities/sprites";
@import "header/*.png";
$icons: sprite-map("header/*.png");
.img1 { background: sprite($icons, img1); }
.img2 { background: sprite($icons, img2); }
.img3 { background: sprite($icons, img3); }
.img4 { background: sprite($icons, img4); }
CSS;
.header-sprite { background: url('/Proc/images/header-s50c8c3bfb6.png') no-
repeat;}
.img1 { background: url('/Proc/images/header-sf1118ffd7b.png') 0 0;}
.img2 { background: url('/Proc/images/header-sf1118ffd7b.png') 0 -41px;}
.img3 { background: url('/Proc/images/header-sf1118ffd7b.png') 0 -123px;}
.img4 { background: url('/Proc/images/header-sf1118ffd7b.png') 0 -82px;}

27. 반응형 웹
27

28. Susy Grid Compass’s Plug in
• Susy 소개
– Susy 는 framework 이다.
– Compass를 이용한 반응형웹 제작시 가장 손쉽고 빠른 grid 형식 지원
– Susy를 Install한 후 import하여 사용
• Susy 설치(cmd에서)
– gem install susy
– config.rg 파일에서 plugin 부분에 susy 기재 : require 'susy‘
– Sass파일에서 import 설정 : @import "susyone";
• Susy설치시 주의사항
• Susy2에서 upgraded 한 후에, 환경설정이 변경된다. Susy를 사용하는 동안에 에러가 발생한다면, 모
든 버전의 sass, compass, susy,를 uninstall한 후에 업그레이드된 버전을 새로 설치한다.
28
CMD ;
sudo gem uninstall sass
sudo gem uninstall compass
sudo gem uninstall susy
# I personally use --pre, but you should be able to get by without
the --pre since Susy 2.0 was officially released.
sudo gem install sass --pre
sudo gem install compass --pre
sudo gem install susy --pre

29. Susy one 적용하기
• Basic Setting
– Container: grid의 최상위
– Layout: grid에서 컬럼의 총합
– Grid Padding: grid의 양쪽의 간격
– Context: 상위 객체에 의해 싸여진 컬럼의 수
– Omega: Any Grid Element spanning the last Column in its Context.
– $total-columns : 12; 전체 컬럼의 수
– $column-width : 1개; 컬럼의 넓이 (em, px, %등 가능)
– $gutter-width : 1em; 컬럼사이의 간격. (단위는 컬럼의 넓이와 같아야 한다)
– $grid-padding: $gutter-width;
• Functions
– Columns : span-columns mixin과 비슷하다. 그렇지만 수학적인 계산값을 반환한다.
– Gutter :
– Space : 컬럼 사이의 공간. 외부 gutters와 내부를 포함한다.
29

30. 관련링크
• http://surgeworks.com/blog/responsive-web-design-using-compass-revised
• http://susy.oddbird.net/guides/getting-started/
• http://snugug.github.io/RWD-with-Sass-Compass/#/extension-basics
• http://www.zell-weekeat.com/susy2-tutorial/
• http://leveluptuts.com/forum/susy-installation

31. Eclipse에
build하기
31

32. Builder 설정
• Project메뉴 > properties > Builders
32

33. Builder 설정
33

34. Builder 설정
34
SCSS 파일을 변경하면 파일 CSS 파일이 자동으로 갱신됨.

35. 참고
35

36. 관련 링크
CSS 전처리 관련
– http://sass-lang.com/
– http://compass-style.org/
– http://css-tricks.com/sass-vs-less/
설치관련
– http://compass-style.org/install/
– http://www.slideshare.net/yaioyaio/compass-12568089
– http://thesassway.com/beginner/getting-started-with-sass-and-compass
이클립스 관련
– http://www.crazed.org.uk/2012/04/integrating-compass-into-eclipse/
– http://java.dzone.com/articles/configuring-compass-eclipse
– http://garethcooper.com/2013/04/how-to-use-compass-in-eclipse-on-windows/
– http://stackoverflow.com/questions/7614612/is-there-an-eclipse-editor-for-sasss-scss-files-or-syntax-coloring-
plugin
– http://frmmpgit.blog.fc2.com/blog-entry-33.html
36

37. SASS 설치
• Compass에서 적용하지 않고 별도로 SASS만 사용하는 경우
• SASS 설치하기(http://sass-lang.com/install)
– Here's the quickest way we've found to start using Sass by using the command line:
1. Open your Terminal or Command Prompt. On the Mac the Terminal.app comes installed by default. It's
located in your "Utilities" folder. On Windows, run `cmd`.
2. Install Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window
type:
gem install sass
This will install Sass and any dependencies for you. It's pretty magical. If you get an error message then it's likely you will need to
use the sudo command to install the Sass gem. It would look like:
sudo gem install sass
3. Double-check. You should now have Sass installed, but it never hurts to double-check. In your terminal
application you can type:
sass –v
It should return Sass 3.3.4 (Maptastic Maple). Congratulations! You've successfully installed Sass.
4. Go and play. If you're brand new to Sass we've set up some resources to help you learn pretty darn quick.
5. 추가로 Compass 를 설치한다면,
sudo gem install compass
• SASS watch명령어(디렉토리에서 cmd로 적용)
sass --watch mlife.scss:mlife.css
• Watch하면서 자동압축
sass --watch a.scss:a.css --style compressed
37

38. 이클립스에서 scss 코드 색상 변경하기
• I just figured out how to do this in Eclipse. I admit that this solution does not have 100% SASS support, the colors
get a little funky when using nested css, but it's waaaaay better than looking at plain text and you don't need to
install a separate editor.
• You need to associate the .scss file type with the native Eclipse CSS Editor in Eclipse[Part 1]. After you do that, you
need to add the .scss file type to the native CSS Editor as well so the CSS Editor will be able to open it [Part 2].
Here are the steps for eclipse (I'm running Eclipse Java EE IDE for Web Developers, Indigo):
• ---------- [Part 1] ----------
• Go to Window --> Preferences
• Drill down to General --> Editors --> File Associations
• In File Associations pane, click the 'Add..." button on the top right.
• For "File Type:", enter *.scss and then click OK.
• Find the *.scss entry in the File Associations list and select it.
• After selecting *.scss, on the bottom pane "Associated editors:", click the "Add..." button.
• Make sure "Internal editors" is selected on the top, then find and select "CSS Editor" and then click OK.
• This associated the file type .scss with eclipses native CSS Editor. Now we have to configure the native CSS Editor
to support .scss files. To do this, follow this steps:
• ---------- [Part 2] ----------
• Go to Window --> Preferences
• Drill down to General --> Content Types
• In the Content Types pane, expand "Text", then select "CSS".
• After "CSS" is selected, on the bottom "File associations:" pane, click the "Add..." button.
• For "Content type:", enter *.scss and then click OK.
• Click OK to close out the Preferences window.
• All done. All you need to do now is close any .scss files that you have open then re-open them and wha-la, css
colors in Eclipse for .scss files!
• Hope this helps.
• http://stackoverflow.com/questions/7614612/is-there-an-eclipse-editor-for-sasss-scss-files-or-syntax-coloring-plugin
38