we introduce Sass&Compass used while programming with Sencha WeCreateWell

1. Sass & Compass
Min Jun Kim
minjuny@gmail.com

2. Why Must We Know
Sass & Compass?

3. 문법이 있는 놀라운 스
타일시트!!
SASS
Syntactically Awesome StyleSheets
http://sass-lang.com

4. Install
Install Ruby
http://www.ruby-lang.org
Install Gem
http://rubygems.org
Install sass
# gem install sass
# sass --watch style.scss:style.css
# sass --watch stylesheets/sass:stylesheets/compled

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;
}

10. Sass Feature

11. Sass Feature
Sass is an extension of CSS3..

12. Sass Feature
Sass is an extension of CSS3..
What Extensions???

13. Sass Feature
Sass is an extension of CSS3..
What Extensions???
1. Variables

14. Sass Feature
Sass is an extension of CSS3..
What Extensions???
1. Variables
2. Nesting

15. Sass Feature
Sass is an extension of CSS3..
What Extensions???
1. Variables
2. Nesting
3. Mixins

16. Sass Feature
Sass is an extension of CSS3..
What Extensions???
1. Variables
2. Nesting
3. Mixins
4. Selector Inheritance

17. Variables 1. Basic
2. Operations and functions
3. Interpolcation #{}
/* style.scss */ /* style.css */
$main-color: #ce4dd6; #navbar {
$style: solid; border-bottom-color: #ce4dd6;
border-bottom-style: solid; }
#navbar {
border-bottom: { a {
color: $main-color; color: #ce4dd6; }
style: $style; a:hover {
} border-bottom: solid 1px; }
}
a {
color: $main-color;
&:hover { border-bottom: $style 1px; }
}

18. Variables 1. Basic
2. Operations and functions
3. Interpolcation #{}
/* style.scss */ /* style.css */
#navbar { #navbar {
$navbar-width: 800px; width: 800px;
$items: 5; border-bottom: 2px solid #ce4dd6; }
$navbar-color: #ce4dd6; #navbar li {
float: left;
width: $navbar-width; width: 150px;
border-bottom: 2px solid $navbar-color; background-color: #e5a0e9; }
#navbar li:hover {
li { background-color: #d976e0; }
float: left;
width: $navbar-width/$items - 10px;
background-color:
lighten($navbar-color, 20%);
&:hover {
background-color:
lighten($navbar-color, 10%);
}
}
}

19. Variables 1. Basic
2. Operations and functions
3. Interpolcation #{}
/* style.scss */ /* style.css */
$side: top; .rounded-top {
$radius: 10px; border-top-radius: 10px;
-moz-border-radius-top: 10px;
.rounded- { -webkit-border-top-radius: 10px; }
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}

20. Nesting
/* style.scss */ /* style.css */
#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px; }
#navbar ul {
ul { list-style-type: none; } list-style-type: none; }
li { #navbar li {
float: left; float: left; }
a { font-weight: bold; } #navbar li a {
} font-weight: bold; }
}
1. Basic
2. nest properties, 피리픽스(border-left-)를
반복할 필요가 없다.
3. Parent References

21. Nesting
/* style.scss */ /* style.css */
.fakeshadow { .fakeshadow {
border: { border-style: solid;
style: solid; border-left-width: 4px;
left: { border-left-color: #888;
width: 4px; border-right-width: 2px;
color: #888; border-right-color: #ccc; }
}
right: {
width: 2px;
color: #ccc;
}
}
1. Basic
2. nest properties, 피리픽스(border-left-)를
반복할 필요가 없다.
3. Parent References

22. Nesting
/* style.scss */ /* style.css */
a { a {
color: #ce4dd6; color: #ce4dd6; }
&:hover { color: #ffb3ff; } a:hover {
&:visited { color: #c458cb; } color: #ffb3ff; }
} a:visited {
color: #c458cb; }
1. Basic
2. nest properties, 피리픽스(border-left-)를
반복할 필요가 없다.
3. Parent References

23. Mixins
/* style.scss */ /* style.css */
@mixin rounded-top { #navbar li {
$side: top; border-top-radius: 10px;
$radius: 10px; -moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius; #footer {
-webkit-border-#{$side}-radius: $radius; border-top-radius: 10px;
} -moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }
#navbar li { @include rounded-top; }
#footer { @include rounded-top; }
1. Basic
2. Arguments
3. @import

24. Mixins
/* style.scss */ /* style.css */
@mixin rounded($side, $radius: 10px) { #navbar li {
border-#{$side}-radius: $radius; border-top-radius: 10px;
-moz-border-radius-#{$side}: $radius; -moz-border-radius-top: 10px;
-webkit-border-#{$side}-radius: $radius; -webkit-border-top-radius: 10px; }
}
#footer {
#navbar li { @include rounded(top); } border-top-radius: 5px;
#footer { @include rounded(top, 5px); } -moz-border-radius-top: 5px;
#sidebar { @include rounded(left, 8px); } -webkit-border-top-radius: 5px; }
#sidebar {
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px; }
1. Basic
2. Arguments
3. @import

25. Mixins
/* _rounded.scss */ /* style.css */
@mixin rounded($side, $radius: 10px) { #navbar li {
border-#{$side}-radius: $radius; border-top-radius: 10px;
-moz-border-radius-#{$side}: $radius; -moz-border-radius-top: 10px;
-webkit-border-#{$side}-radius: $radius; -webkit-border-top-radius: 10px; }
}
#footer {
border-top-radius: 5px;
-moz-border-radius-top: 5px;
/* style.scss */ -webkit-border-top-radius: 5px; }
@import "rounded"; #sidebar {
border-left-radius: 8px;
#navbar li { @include rounded(top); } -moz-border-radius-left: 8px;
#footer { @include rounded(top, 5px); } -webkit-border-left-radius: 8px; }
#sidebar { @include rounded(left, 8px); }
1. Basic
2. Arguments
3. @import

26. Selector Inheritance

27. Selector Inheritance
.error { .error {
border: 1px #f00; border: 1px #f00;
background: #fdd; background: #fdd;
} }
.error.intrusion { .error.intrusion {
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
} }
.badError { .badError {
@extend .error; @extend .error;
border-width: 3px; border-width: 3px;
} }

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.

39. Theming Sencha Touch
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch

40. Resources Folder
resources/ 이미지 및 CSS 파일등 존재
resources/css/ 컴파일 된 css파일이 존재
resources/sass/ config.rb와 .scss파일이 존재
/resources/images/ 일반적인 이미지들을 모아놓는 폴더
# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)
# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")
# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")
# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')
# Specify the output style/environment
output_style = :compressed
environment = :production

41. app.scss
copy “touch/resources/
sass/sencha-touch.scss”

42. Global CSS