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

利用 Compass / Sass 快速開發版型

on

  • 16,341 views

 

Statistics

Views

Total Views
16,341
Views on SlideShare
15,724
Embed Views
617

Actions

Likes
71
Downloads
119
Comments
3

16 Embeds 617

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 51
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • mice
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for sharing! Good job!
    Are you sure you want to
    Your message goes here
    Processing…
  • nice work!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

利用 Compass / Sass 快速開發版型 利用 Compass / Sass 快速開發版型 Presentation Transcript

  • 利用 COMPASS / SASS 快速開發版型
  • 自我介紹• Kuro Hsu / kurotanshi• F2E (前端工程師) @ Yam• 接觸 Drupal 至今約一年半Blog : http://kuro.TwPlurk: http://www.Plurk.Com/kurotanshiFacebook: http://www.Facebook.Com/kurotanshiEmail: kurotanshi [at] gmail.Com
  • 必備基礎知識• 懂 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; .entry-content .entry-content { color: #eee color: #eee; } } SASS SCSS
  • Sass – 特性• Variables - 變數• Nesting - 巢狀• Mixins - 混合• Selector Inheritance - 選擇符繼承
  • Variables 變數
  • Variables SCSS $width: 100px; $color: red; #home { color: $color; width: $width; } CSS#home { color: red; width: 100px;}
  • Variables - math SCSS$container : 960px;$main : 680px;$gutter : 30px;#sidebar { width: $container - $main - $gutter;} CSS#sidebar { width: 250px;}
  • Math Operators SCSS1em + 1em; // 2em1em - 1em; // 0em1in + 72pt; // 2in6px * 4; // 24px18 % 5; // 3
  • Number Functions SCSSpercentage(13/25) // 52%round(2.4) // 2ceil(2.2) // 3floor(2.6) // 2abs(-24) // 24
  • Nesting 巢狀
  • Nesting SCSSarticle { border-top: 1px dashed #eee; header { margin-bottom: 1.5em; }} CSSarticle { border-top: 1px dashed #eee; }article header { margin-bottom: 1.5em; }
  • Nesting SCSSarticle { header, section { margin-bottom: 1.5em; }} CSSarticle header, article section { margin-bottom: 1.5em;}
  • 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 }
  • Mixins 混合
  • 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; }
  • 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;}
  • 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; }
  • SelectorInheritance 選擇符繼承
  • 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; }
  • Conditionals 條件式
  • @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; }}
  • @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;}
  • @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; }}
  • Import 載入
  • @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”;
  • Media 裝置
  • 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;}}
  • Functions 函式
  • Functions • RGB Functions • HSL Functions • Opacity Functions • String Functions • Number Functions • List Functionshttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  • 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); @include box-shadow(#808080, 1px, 1px, 20px);}
  • 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;}
  • Spriting with Compass SCSS@import "icons/*.png";@include all-icons-sprites; http://compass-style.org/help/tutorials/spriting/
  • 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; }
  • @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);}
  • @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;}
  • 還可以拿別人寫好 的 mixin 來用
  • https://github.com/imathis/fancy-buttons
  • 好工具不用嗎
  • 一定要配溫開水自己親手做過
  • 你才會實際感受 到它的強大
  • Need More… ?http://compass-style.org/reference/compass/• Css3 • Reset• Helpers • Typography• Layout • Utilities
  • Drupal ?
  • Using Compass withDrupal1. 安裝 Ruby (win 平台需下載 RubyInstaller)2. 執行 gem update –system 更新 gem3. 執行 gem install compass 安裝 Compass
  • 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"
  • 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: 圖片檔的目錄。
  • Using Compass withDrupal修改版型 (theme) 內的 .info 檔,以便讓 theme 能順利讀到編譯過的 css 檔案。 theme.infostylesheets[all][] = stylesheets/screen.cssstylesheets[print][] = stylesheets/print.css
  • Using Compass withDrupal最後,執行 $ compass watch如果出現下面的訊息,就表示安裝成功了>>> Compass is polling for changes. Press Ctrl-C to Stop.這時候到 sass 目錄下編輯你的 .sass / .scss 檔案,就可以開始利用 Compass 來快速開發你的 Drupal 版型囉!
  • 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
  • 謝謝大家