5. .SCSS vs .SASS
.SCSS (Sassy CSS)
main syntax, superset of CSS3
.SASS
older syntax, intented syntax
inpired by Haml’s terseness
no longer the primary syntax but still
supported
6. .SCSS vs .SASS
.SCSS (Sassy CSS)
main syntax, superset of CSS3
.SASS
older syntax, intented syntax
inpired by Haml’s terseness
no longer the primary syntax but still
supported
7. .SCSS vs .SASS
.SCSS (Sassy CSS)
main syntax, superset of CSS3
.SASS
older syntax, intented syntax
inpired by Haml’s terseness
no longer the primary syntax but still
supported
8. .SCSS vs .SASS
.SCSS (Sassy CSS)
main syntax, superset of CSS3
.SASS
older syntax, intented syntax
inpired by Haml’s terseness
no longer the primary syntax but still
supported
9. .SCSS vs .SASS
.SCSS (Sassy CSS)
main syntax,
$blue: #3bbfce;
$margin: 16px;
superset of CSS3 #3bbfce
$blue:
$margin: 16px
.SASS
.content-navigation { .content-navigation
border-color: $blue; border-color: $blue
older syntax, intented
color: syntax
color: darken($blue, 9%)
darken($blue, 9%);
}
inpired by Haml’s terseness
.border
padding: $margin / 2
.border { margin: $margin / 2
no longer the primary
padding: $margin / 2; syntax but still $blue
border-color:
supported
margin: $margin / 2;
border-color: $blue;
}
28. Compass is an open-source CSS Authoring Framework
Compass uses Sass.
http://compass-style.org
29. Compass Specification
1.Experience cleaner markup without
presentational classes.
2.It’s chock full of the web’s best reusable
patterns.
3.It makes creating sprites a breeze.
4.Compass mixins make CSS3 easy.
5.Create beautiful typographic rhythms.
6.Download and create extensions with ease.
30. Presentation-free Markup 3rd party와의 디자인 병합시 커스터마이
징이 어렵고,
With CSS
업그래이드 등이 어려움
Unfortunately, with CSS it’s hard to compose a design from
third-party parts. They are hard to customize결국 inline을 사용하게 됨
and once
customized, hard to upgrade if there are bugs that need to be
fixed. Clearly there must be a better way.
Functions
css에서 제공하는 기본적인 함수 뿐 아니라 ruby코드를 만
져서 새로운 함수를 작성할 수 있음.
Variables
변수를 이용하여 flexible
Mixins
쉽고 빠르게 적용할 수 있는 모듈화
Expressions
변수들이나 숫자들의 계산을 통한 relative한 포지셔닝등
가능
31. Presentation-free Markup 3rd party와의 디자인 병합시 커스터마이
징이 어렵고,
With CSS Unfortunately, with CSS it’s hard to compose a design from
third-party parts. They are hard to customize and once
업그래이드 등이 어려움
customized, hard to upgrade if there are bugs that need to be
fixed. Clearly there must be a better way.
결국 inline을 사용하게 됨
With COMPASS
Variables Expressions
Functions
css에서 제공하는 기본적인 함수 뿐 아니라 ruby코드를 만
져서 새로운 함수를 작성할 수 있음.
Variables
Mixins
변수를 이용하여 flexible
Functions
Mixins
쉽고 빠르게 적용할 수 있는 모듈화
Expressions
변수들이나 숫자들의 계산을 통한 relative한 포지셔닝등
가능
32. Reusable Pattern Support
CSS3
크로스 브라우저를 지원하는 CSS를 생성
CSS3
Typography
프린팅을 위한 일반적인 텍스트 스타일링
패턴
Utilities
일방적인 스타일링을 위한 패턴들
Typography
Utilities
33. Spriting with Compass
32px square icons in my-icons folder 아이콘 스프라이트를 사용하기
위한 가장 쉬운 방법은
• images/my-icons/new.png compass가 각 스프라이트를 위
• images/my-icons/edit.png 한 클래스를 제공하도록 하는
것이다.
• images/my-icons/save.png
• images/my-icons/delete.png 그리고 필요할 때 해당 class를
사용하면 끝!!
@import "my-icons/*.png";
@include all-my-icons-sprites;
34. Spriting with Compass
32px square icons in my-icons folder 아이콘 스프라이트를 사용하기
위한 가장 쉬운 방법은
• images/my-icons/new.png compass가 각 스프라이트를 위
• images/my-icons/edit.png 한 클래스를 제공하도록 하는
것이다.
• images/my-icons/save.png
• images/my-icons/delete.png 그리고 필요할 때 해당 class를
사용하면 끝!!
@import "my-icons/*.png";
@include all-my-icons-sprites;
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
35. Best Practices
Partial
- 밑줄로 시작
- sass는 이를 css로 변경하지 않음
_base.scss
- custom mixins를 만들기 좋은 장소
1. Create _base.scss partial
2. include this file in all other stylesheets
36. Best Practices
Partial
- 밑줄로 시작
- sass는 이를 css로 변경하지 않음
_base.scss
- custom mixins를 만들기 좋은 장소
1. Create _base.scss partial
$blueprint-grid-columns : 24;
$blueprint-grid-width : 30px;
$blueprint-grid-margin : 10px;
$font-color : #333;
@import "compass/reset";
@import "compass/utilities";
@import "blueprint";
// etc.
2. include this file in all other stylesheets
37. Best Practices
Partial
- 밑줄로 시작
- sass는 이를 css로 변경하지 않음
_base.scss
- custom mixins를 만들기 좋은 장소
1. Create _base.scss partial
$blueprint-grid-columns : 24;
$blueprint-grid-width : 30px;
$blueprint-grid-margin : 10px;
$font-color : #333;
@import "compass/reset";
@import "compass/utilities";
@import "blueprint";
// etc.
2. include this file in all other stylesheets
@import "base";
#wrapper {
@include container;
}
// etc.
38. Best Practices
Partial
- 밑줄로 시작
- sass는 이를 css로 변경하지 않음
_base.scss
- custom mixins를 만들기 좋은 장소
1. Create _base.scss partial
$blueprint-grid-columns : 24; constants that you want to override in
$blueprint-grid-width : 30px;
base.scss first, before @import-ing the
$blueprint-grid-margin : 10px;
framework files
$font-color : #333;
@import "compass/reset";
@import "compass/utilities";
@import "blueprint";
// etc.
2. include this file in all other stylesheets
@import "base";
#wrapper {
@include container;
}
// etc.