• Save
利用 Compass / Sass 快速開發版型
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • mice
    Are you sure you want to
    Your message goes here
  • Thanks for sharing! Good job!
    Are you sure you want to
    Your message goes here
  • nice work!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
17,133
On Slideshare
16,507
From Embeds
626
Number of Embeds
16

Actions

Shares
Downloads
119
Comments
3
Likes
74

Embeds 626

http://www.f2e.wcc.tw 152
http://kuro.tw 139
http://ashareaday.wcc.tw 68
http://127.0.0.1 68
http://wcc723.github.io 60
http://funsung.blogspot.com 46
http://www.psvd.com.tw 30
http://webfont.arphic.com 17
http://localhost 16
http://www.scoop.it 13
http://blog.sahsu.mobi 11
http://funsung.blogspot.jp 2
http://www.kuro.tw 1
http://www.plurk.com 1
http://feeds.feedburner.com 1
http://funsung.blogspot.tw 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 利用 COMPASS / SASS 快速開發版型
  • 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. 必備基礎知識• 懂 CSS 語法• 懂 HTML 語法• 有使用純文字編輯器來寫網頁的經驗 如果都沒有的話也沒關係啦,30分鐘應該很快就過去了…
  • 4. http://sonspring.com/journal/sass-for-designers
  • 5. http://sass-lang.com/
  • 6. Sass - Syntactically AwesomeStylesheets article article { margin-bottom: 2em margin-bottom: 2em; .entry-content .entry-content { color: #eee color: #eee; } } SASS SCSS
  • 7. Sass – 特性• Variables - 變數• Nesting - 巢狀• Mixins - 混合• Selector Inheritance - 選擇符繼承
  • 8. Variables 變數
  • 9. Variables SCSS $width: 100px; $color: red; #home { color: $color; width: $width; } CSS#home { color: red; width: 100px;}
  • 10. Variables - math SCSS$container : 960px;$main : 680px;$gutter : 30px;#sidebar { width: $container - $main - $gutter;} CSS#sidebar { width: 250px;}
  • 11. Math Operators SCSS1em + 1em; // 2em1em - 1em; // 0em1in + 72pt; // 2in6px * 4; // 24px18 % 5; // 3
  • 12. Number Functions SCSSpercentage(13/25) // 52%round(2.4) // 2ceil(2.2) // 3floor(2.6) // 2abs(-24) // 24
  • 13. Nesting 巢狀
  • 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. Nesting SCSSarticle { header, section { margin-bottom: 1.5em; }} CSSarticle header, article section { margin-bottom: 1.5em;}
  • 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. Mixins 混合
  • 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. 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. 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. SelectorInheritance 選擇符繼承
  • 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. Conditionals 條件式
  • 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. @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. @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. Import 載入
  • 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. Media 裝置
  • 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. Functions 函式
  • 32. Functions • RGB Functions • HSL Functions • Opacity Functions • String Functions • Number Functions • List Functionshttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  • 33. Compass is a library of mixins, functions, andother useful extensions to Sass.
  • 34. WhyCompass?
  • 35. 有了@import絕對無敵
  • 36. CSS3 – radius & shadow SCSS@import "compass/css3";.box{ @include border-radius(5px); @include box-shadow(#808080, 1px, 1px, 20px);}
  • 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. Spriting with Compass SCSS@import "icons/*.png";@include all-icons-sprites; http://compass-style.org/help/tutorials/spriting/
  • 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. @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. @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. 還可以拿別人寫好 的 mixin 來用
  • 43. https://github.com/imathis/fancy-buttons
  • 44. 好工具不用嗎
  • 45. 一定要配溫開水自己親手做過
  • 46. 你才會實際感受 到它的強大
  • 47. Need More… ?http://compass-style.org/reference/compass/• Css3 • Reset• Helpers • Typography• Layout • Utilities
  • 48. Drupal ?
  • 49. Using Compass withDrupal1. 安裝 Ruby (win 平台需下載 RubyInstaller)2. 執行 gem update –system 更新 gem3. 執行 gem install compass 安裝 Compass
  • 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. 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. Using Compass withDrupal修改版型 (theme) 內的 .info 檔,以便讓 theme 能順利讀到編譯過的 css 檔案。 theme.infostylesheets[all][] = stylesheets/screen.cssstylesheets[print][] = stylesheets/print.css
  • 53. Using Compass withDrupal最後,執行 $ compass watch如果出現下面的訊息,就表示安裝成功了>>> Compass is polling for changes. Press Ctrl-C to Stop.這時候到 sass 目錄下編輯你的 .sass / .scss 檔案,就可以開始利用 Compass 來快速開發你的 Drupal 版型囉!
  • 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. 謝謝大家