利用 Compass / Sass 快速開發版型

利用 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

謝謝大家

利用 Compass / Sass 快速開發版型

by Kuro Hsu on Feb 17, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 65

Statistics

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

http://kuro.tw	57
http://www.scoop.it	8