利用 COMPASS / SASS   快速開發版型
自我介紹•   Kuro Hsu / kurotanshi•   F2E (前端工程師) @ Yam•   接觸 Drupal 至今約一年半Blog :      http://kuro.TwPlurk:      http://www.Plu...
必備基礎知識•   懂 CSS 語法•   懂 HTML 語法•   有使用純文字編輯器來寫網頁的經驗        如果都沒有的話也沒關係啦,30分鐘應該很快就過去了…
http://sonspring.com/journal/sass-for-designers
http://sass-lang.com/
Sass - Syntactically AwesomeStylesheets article                article {   margin-bottom: 2em       margin-bottom: 2em;   ...
Sass – 特性• Variables - 變數• Nesting - 巢狀• Mixins - 混合• Selector Inheritance - 選擇符繼承
Variables  變數
Variables           SCSS $width: 100px; $color: red; #home {   color: $color;   width: $width; }                    CSS#ho...
Variables - math                                         SCSS$container : 960px;$main : 680px;$gutter : 30px;#sidebar {  w...
Math Operators                          SCSS1em + 1em;    //   2em1em - 1em;    //   0em1in + 72pt;   //   2in6px * 4;    ...
Number Functions                               SCSSpercentage(13/25)   //   52%round(2.4)          //   2ceil(2.2)        ...
Nesting  巢狀
Nesting                                      SCSSarticle {  border-top: 1px dashed #eee;  header { margin-bottom: 1.5em; }...
Nesting                                      SCSSarticle {  header, section { margin-bottom: 1.5em; }}                    ...
The Parent Selector “&”                                          SCSS a {   color: blue;   &:hover { color: red }   displa...
Mixins 混合
Mixins                                      SCSS@mixin hover-link {  text-decoration: none;  &:hover { text-decoration: un...
Mixins - Arguments                                        SCSS@mixin border-radius($amount) {  border-radius: $amount;  -w...
Mixins - Arguments                                              SCSS@mixin link-color($text:blue, $hover:red) {  color: $t...
SelectorInheritance 選擇符繼承
Selector Inheritance                                        SCSS.error {  font-size: 15px;  color: red;}.required-error { ...
Conditionals   條件式
@if - else                      SCSS                     CSS$theme: ocean;div {                            div {  @if $the...
@for                   SCSS                   CSS                           .item-1 {width: 100px;}@for $i from 1 through ...
@while                  SCSS                    CSS$i: 0;                         .item-0 { width: 0px; }@while $i <= 3 { ...
Import  載入
@import                  SCSS(style_a.scss)                                   CSSbackground-color: black;        backgroun...
Media 裝置
Media                                             SCSS #content { margin: 0 1.5em;   @media screen and (min-width: 1280px)...
Functions   函式
Functions  •   RGB Functions  •   HSL Functions  •   Opacity Functions  •   String Functions  •   Number Functions  •   Li...
Compass is a library of mixins, functions, andother useful extensions to Sass.
WhyCompass?
有了@import絕對無敵
CSS3 – radius & shadow                                       SCSS@import "compass/css3";.box{  @include border-radius(5px)...
CSS3 – radius & shadow                                           CSS.box {  -moz-border-radius: 5px;  -webkit-border-radiu...
Spriting with Compass                                                 SCSS@import "icons/*.png";@include all-icons-sprites...
Spriting with Compass                                                         CSS.icon-sprite,.icon-delete,.icon-edit,.ico...
@import ‘s power                                             SCSS@import "compass/reset";@import "compass/css3";.my_class{...
@import ‘s power                                                                     CSS.my_class {  background-image: -we...
還可以拿別人寫好 的 mixin 來用
https://github.com/imathis/fancy-buttons
好工具不用嗎
一定要配溫開水自己親手做過
你才會實際感受 到它的強大
Need More… ?http://compass-style.org/reference/compass/• Css3             • Reset• Helpers          • Typography• Layout  ...
Drupal ?
Using Compass withDrupal1. 安裝 Ruby   (win 平台需下載 RubyInstaller)2. 執行 gem update –system   更新 gem3. 執行 gem install compass 安...
Using Compass withDrupal假設我們要導入 Compass 的版型名稱叫做 foo …到 drupal6/sites/all/themes/foo/ 輸入指令:$ compass create . --syntax sass...
Using Compass withDrupal$ compass create . --syntax sass --sass-dir "sass" --css-dir"css" --javascripts-dir "js" --images-...
Using Compass withDrupal修改版型 (theme) 內的 .info 檔,以便讓 theme 能順利讀到編譯過的 css 檔案。                                theme.infostyle...
Using Compass withDrupal最後,執行 $ compass watch如果出現下面的訊息,就表示安裝成功了>>> Compass is polling for changes. Press Ctrl-C to Stop.這時...
Reference links• Using Compass with Drupal:  http://shomeya.com/articles/using-compass-drupal• Compass stylesheet tool:  h...
謝謝大家
Upcoming SlideShare
Loading in...5
×

利用 Compass / Sass 快速開發版型

19,182

Published on

Published in: Technology, Lifestyle
3 Comments
103 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,182
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
119
Comments
3
Likes
103
Embeds 0
No embeds

No notes for slide

利用 Compass / Sass 快速開發版型

  1. 1. 利用 COMPASS / SASS 快速開發版型
  2. 2. 自我介紹• Kuro Hsu / kurotanshi• F2E (前端工程師) @ Yam• 接觸 Drupal 至今約一年半Blog : http://kuro.TwPlurk: http://www.Plurk.Com/kurotanshiFacebook: http://www.Facebook.Com/kurotanshiEmail: kurotanshi [at] gmail.Com
  3. 3. 必備基礎知識• 懂 CSS 語法• 懂 HTML 語法• 有使用純文字編輯器來寫網頁的經驗 如果都沒有的話也沒關係啦,30分鐘應該很快就過去了…
  4. 4. http://sonspring.com/journal/sass-for-designers
  5. 5. http://sass-lang.com/
  6. 6. Sass - Syntactically AwesomeStylesheets article article { margin-bottom: 2em margin-bottom: 2em; .entry-content .entry-content { color: #eee color: #eee; } } SASS SCSS
  7. 7. Sass – 特性• Variables - 變數• Nesting - 巢狀• Mixins - 混合• Selector Inheritance - 選擇符繼承
  8. 8. Variables 變數
  9. 9. Variables SCSS $width: 100px; $color: red; #home { color: $color; width: $width; } CSS#home { color: red; width: 100px;}
  10. 10. Variables - math SCSS$container : 960px;$main : 680px;$gutter : 30px;#sidebar { width: $container - $main - $gutter;} CSS#sidebar { width: 250px;}
  11. 11. Math Operators SCSS1em + 1em; // 2em1em - 1em; // 0em1in + 72pt; // 2in6px * 4; // 24px18 % 5; // 3
  12. 12. Number Functions SCSSpercentage(13/25) // 52%round(2.4) // 2ceil(2.2) // 3floor(2.6) // 2abs(-24) // 24
  13. 13. Nesting 巢狀
  14. 14. Nesting SCSSarticle { border-top: 1px dashed #eee; header { margin-bottom: 1.5em; }} CSSarticle { border-top: 1px dashed #eee; }article header { margin-bottom: 1.5em; }
  15. 15. Nesting SCSSarticle { header, section { margin-bottom: 1.5em; }} CSSarticle header, article section { margin-bottom: 1.5em;}
  16. 16. The Parent Selector “&” SCSS a { color: blue; &:hover { color: red } display: inline-block; line-height: 1.8em; } CSSa { color: blue; display: inline-block; line-height: 1.8em; }a:hover { color: red }
  17. 17. Mixins 混合
  18. 18. Mixins SCSS@mixin hover-link { text-decoration: none; &:hover { text-decoration: underline; }}nav a { @include hover-link; } CSSnav a { text-decoration: none; }nav a:hover { text-decoration: underline; }
  19. 19. Mixins - Arguments SCSS@mixin border-radius($amount) { border-radius: $amount; -webkit-border-radius: $amount; -moz-border-radius: $amount;}.msg { @include border-radius(5px); } CSS.msg { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
  20. 20. Mixins - Arguments SCSS@mixin link-color($text:blue, $hover:red) { color: $text; &:hover { color: $hover; }}a { @include link-colors($hover: green);} CSSa { color: blue; }a:hover { green; }
  21. 21. SelectorInheritance 選擇符繼承
  22. 22. Selector Inheritance SCSS.error { font-size: 15px; color: red;}.required-error { @extend .error; font-weight: 900;} CSS.error, .required-error{ font-size: 15px; color: red; }.required-error { font-weight: 900; }
  23. 23. Conditionals 條件式
  24. 24. @if - else SCSS CSS$theme: ocean;div { div { @if $theme == dusty { background: blue; background: #c6bba9; color: white; color: $color; } } @else if $theme == ocean { background: blue; color: white; }}
  25. 25. @for SCSS CSS .item-1 {width: 100px;}@for $i from 1 through 5{ .item-2 {width: 200px;} .item-#{$i} { width: 100px * $i; .item-3 {width: 300px;} } .item-4 {width: 400px;}} .item-5 {width: 500px;}
  26. 26. @while SCSS CSS$i: 0; .item-0 { width: 0px; }@while $i <= 3 { .item-#{$i} { .item-1 { width: 100px; } width: 100px * $i; } .item-2 { width: 200px; } $i: $i + 1; .item-3 { width: 300px; }}
  27. 27. Import 載入
  28. 28. @import SCSS(style_a.scss) CSSbackground-color: black; background-color: black; color: red; SCSS(style_b.scss)color: red; SCSS(style.scss)@import “style_a”, “style_b”;
  29. 29. Media 裝置
  30. 30. Media SCSS #content { margin: 0 1.5em; @media screen and (min-width: 1280px) { margin: 0 2.5em } } CSS#content { margin: 0 1.5em; }@media screen and (min-width: 1280px) { #content { margin: 0 2.5em;}}
  31. 31. Functions 函式
  32. 32. Functions • RGB Functions • HSL Functions • Opacity Functions • String Functions • Number Functions • List Functionshttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  33. 33. Compass is a library of mixins, functions, andother useful extensions to Sass.
  34. 34. WhyCompass?
  35. 35. 有了@import絕對無敵
  36. 36. CSS3 – radius & shadow SCSS@import "compass/css3";.box{ @include border-radius(5px); @include box-shadow(#808080, 1px, 1px, 20px);}
  37. 37. CSS3 – radius & shadow CSS.box { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 20px gray; -webkit-box-shadow: 1px 1px 20px gray; -o-box-shadow: 1px 1px 20px gray; box-shadow: 1px 1px 20px gray;}
  38. 38. Spriting with Compass SCSS@import "icons/*.png";@include all-icons-sprites; http://compass-style.org/help/tutorials/spriting/
  39. 39. Spriting with Compass CSS.icon-sprite,.icon-delete,.icon-edit,.icon-new,.icon-save { background: url(/images/icon-s34fe0604ab.png) no-repeat; }.icon-delete { background-position: 0 0; }.icon-edit { background-position: 0 -32px; }.icon-new { background-position: 0 -64px; }.icon-save { background-position: 0 -96px; }
  40. 40. @import ‘s power SCSS@import "compass/reset";@import "compass/css3";.my_class{ @include linear-gradient(color-stops(white, blue33%, black 67%)); @include box-shadow(rgba(black, 0.6) 0px 0px10px); @include border-radius(8px, 8px);}
  41. 41. @import ‘s power CSS.my_class { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,#ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000)); background-image: -webkit-linear-gradient(top, #ffffff, #0000ff 33%, #00000067%); background-image: -moz-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); background-image: -o-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); background-image: -ms-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); background-image: linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px; -o-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px; box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px; -webkit-border-radius: 8px 8px; -moz-border-radius: 8px / 8px; -o-border-radius: 8px / 8px; -ms-border-radius: 8px / 8px; -khtml-border-radius: 8px / 8px; 漸層,陰影,圓角框,三個願望一次滿足 border-radius: 8px / 8px;}
  42. 42. 還可以拿別人寫好 的 mixin 來用
  43. 43. https://github.com/imathis/fancy-buttons
  44. 44. 好工具不用嗎
  45. 45. 一定要配溫開水自己親手做過
  46. 46. 你才會實際感受 到它的強大
  47. 47. Need More… ?http://compass-style.org/reference/compass/• Css3 • Reset• Helpers • Typography• Layout • Utilities
  48. 48. Drupal ?
  49. 49. Using Compass withDrupal1. 安裝 Ruby (win 平台需下載 RubyInstaller)2. 執行 gem update –system 更新 gem3. 執行 gem install compass 安裝 Compass
  50. 50. Using Compass withDrupal假設我們要導入 Compass 的版型名稱叫做 foo …到 drupal6/sites/all/themes/foo/ 輸入指令:$ compass create . --syntax sass --sass-dir "sass" --css-dir"css" --javascripts-dir "js" --images-dir "images"
  51. 51. Using Compass withDrupal$ compass create . --syntax sass --sass-dir "sass" --css-dir"css" --javascripts-dir "js" --images-dir "images"--syntax sass: 表示我們是用 SASS 的格式撰寫(不指定的話,預設是 SCSS)--sass-dir: 是我們放置 sass 檔的目錄;--css-dir: 是編譯好的 css 產出的目錄;--javascripts-dir: JavaScript 檔目錄--images-dir: 圖片檔的目錄。
  52. 52. Using Compass withDrupal修改版型 (theme) 內的 .info 檔,以便讓 theme 能順利讀到編譯過的 css 檔案。 theme.infostylesheets[all][] = stylesheets/screen.cssstylesheets[print][] = stylesheets/print.css
  53. 53. Using Compass withDrupal最後,執行 $ compass watch如果出現下面的訊息,就表示安裝成功了>>> Compass is polling for changes. Press Ctrl-C to Stop.這時候到 sass 目錄下編輯你的 .sass / .scss 檔案,就可以開始利用 Compass 來快速開發你的 Drupal 版型囉!
  54. 54. Reference links• Using Compass with Drupal: http://shomeya.com/articles/using-compass-drupal• Compass stylesheet tool: http://drupal.org/project/compass• Getting Started with Basic, SASS, and Compass on Drupal: http://thejibe.com/blog/11/1/getting- started-basic-sass-and-compass-drupal• Basic (theme): http://drupal.org/project/basic
  55. 55. 謝謝大家

×