Your SlideShare is downloading. ×
利用 Compass / Sass 快速開發版型
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

利用 Compass / Sass 快速開發版型

17,931
views

Published on

Published in: Technology, Lifestyle

3 Comments
98 Likes
Statistics
Notes
No Downloads
Views
Total Views
17,931
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
119
Comments
3
Likes
98
Embeds 0
No embeds

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. 謝謝大家