Sass & CompassMin Jun Kimminjuny@gmail.com
Why Must We KnowSass & Compass?
문법이 있는 놀라운 스                                    타일시트!!SASSSyntactically Awesome StyleSheetshttp://sass-lang.com
Install Install Ruby   http://www.ruby-lang.org Install Gem   http://rubygems.org Install sass   # gem install sass   # sa...
.SCSS vs .SASS .SCSS (Sassy CSS)  main syntax, superset of CSS3 .SASS  older syntax, intented syntax  inpired by Haml’s te...
.SCSS vs .SASS .SCSS (Sassy CSS)  main syntax, superset of CSS3 .SASS  older syntax, intented syntax  inpired by Haml’s te...
.SCSS vs .SASS .SCSS (Sassy CSS)  main syntax, superset of CSS3 .SASS  older syntax, intented syntax  inpired by Haml’s te...
.SCSS vs .SASS .SCSS (Sassy CSS)  main syntax, superset of CSS3 .SASS  older syntax, intented syntax  inpired by Haml’s te...
.SCSS vs .SASS  .SCSS (Sassy CSS)      main syntax, $blue: #3bbfce;$margin: 16px;                     superset of CSS3 #3b...
Sass Feature
Sass FeatureSass is an extension of CSS3..
Sass FeatureSass is an extension of CSS3..  What Extensions???
Sass FeatureSass is an extension of CSS3..  What Extensions???        1. Variables
Sass FeatureSass is an extension of CSS3..  What Extensions???        1. Variables        2. Nesting
Sass FeatureSass is an extension of CSS3..  What Extensions???        1. Variables        2. Nesting        3. Mixins
Sass FeatureSass is an extension of CSS3..  What Extensions???        1. Variables        2. Nesting        3. Mixins     ...
Variables                                  1. Basic                                           2. Operations and functions ...
Variables                                     1. Basic                                              2. Operations and func...
Variables                                    1. Basic                                             2. Operations and functi...
Nesting    /* style.scss */                  /* style.css */#navbar {                           #navbar {  width: 80%;    ...
Nesting /* style.scss */      /* style.css */.fakeshadow {        .fakeshadow {  border: {            border-style: solid;...
Nesting /* style.scss */                   /* style.css */a {                               a {  color: #ce4dd6;          ...
Mixins    /* style.scss */                            /* style.css */@mixin rounded-top {                           #navba...
Mixins /* style.scss */                             /* style.css */@mixin rounded($side, $radius: 10px) {       #navbar li...
Mixins /* _rounded.scss */                          /* style.css */@mixin rounded($side, $radius: 10px) {       #navbar li...
Selector Inheritance
Selector Inheritance .error {               .error {  border: 1px #f00;      border: 1px #f00;  background: #fdd;      bac...
Compass is an open-source CSS Authoring Framework                Compass uses Sass.            http://compass-style.org
Compass Specification1.Experience cleaner markup without presentational classes.2.It’s chock full of the web’s best reusabl...
Presentation-free Markup                              3rd party와의 디자인 병합시 커스터마이                                           ...
Presentation-free Markup                                                              3rd party와의 디자인 병합시 커스터마이           ...
Reusable Pattern Support                               CSS3                               크로스 브라우저를 지원하는 CSS를 생성   CSS3   ...
Spriting with Compass32px square icons in my-icons folder   아이콘 스프라이트를 사용하기                                       위한 가장 쉬운...
Spriting with Compass    32px square icons in my-icons folder                     아이콘 스프라이트를 사용하기                         ...
Best Practices                              Partial                               - 밑줄로 시작                               -...
Best Practices                                         Partial                                          - 밑줄로 시작          ...
Best Practices                                         Partial                                          - 밑줄로 시작          ...
Best Practices                                                Partial                                                 - 밑줄...
Theming Sencha Touchhttp://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
Resources Folder      resources/             이미지 및 CSS 파일등 존재      resources/css/         컴파일 된 css파일이 존재      resources/s...
app.scss           copy “touch/resources/           sass/sencha-touch.scss”
Global CSS
Upcoming SlideShare
Loading in …5
×

Sass&compass

1,435 views
1,374 views

Published on

we introduce Sass&Compass used while programming with Sencha

WeCreateWell

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,435
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
66
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sass&compass

    1. 1. Sass & CompassMin Jun Kimminjuny@gmail.com
    2. 2. Why Must We KnowSass & Compass?
    3. 3. 문법이 있는 놀라운 스 타일시트!!SASSSyntactically Awesome StyleSheetshttp://sass-lang.com
    4. 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. 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. 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. 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. 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. 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. 10. Sass Feature
    11. 11. Sass FeatureSass is an extension of CSS3..
    12. 12. Sass FeatureSass is an extension of CSS3.. What Extensions???
    13. 13. Sass FeatureSass is an extension of CSS3.. What Extensions??? 1. Variables
    14. 14. Sass FeatureSass is an extension of CSS3.. What Extensions??? 1. Variables 2. Nesting
    15. 15. Sass FeatureSass is an extension of CSS3.. What Extensions??? 1. Variables 2. Nesting 3. Mixins
    16. 16. Sass FeatureSass is an extension of CSS3.. What Extensions??? 1. Variables 2. Nesting 3. Mixins 4. Selector Inheritance
    17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Selector Inheritance
    27. 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. 28. Compass is an open-source CSS Authoring Framework Compass uses Sass. http://compass-style.org
    29. 29. Compass Specification1.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. 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. 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. 32. Reusable Pattern Support CSS3 크로스 브라우저를 지원하는 CSS를 생성 CSS3 Typography 프린팅을 위한 일반적인 텍스트 스타일링 패턴 Utilities 일방적인 스타일링을 위한 패턴들 Typography Utilities
    33. 33. Spriting with Compass32px 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. 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. 35. Best Practices Partial - 밑줄로 시작 - sass는 이를 css로 변경하지 않음 _base.scss - custom mixins를 만들기 좋은 장소1. Create _base.scss partial2. include this file in all other stylesheets
    36. 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. 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. 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. 39. Theming Sencha Touchhttp://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
    40. 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. 41. app.scss copy “touch/resources/ sass/sencha-touch.scss”
    42. 42. Global CSS

    ×