Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS 開發加速指南
Cloud Computing-Based Services Design and Programming
Lucien Lee
SASS & COMPASS
BeFore TaLk SASS
letMetellsomethingaboutCSS
2
CSS is Hard to learn
• So many property need to know
• Layout property is hard to realize
• How the cascade works
• So man...
CSS is pain
• NO Variables
• NO Math
• NO Functions
• NO Obvious Structure
• Repetitive, Repetitive and Repetitive
4
– CSS co-inventor, Bert Bos
CSS stops short of even more powerful features
that programmers use in their programming
langu...
– CSS co-inventor, Bert Bos
CSS stops short of even more powerful features
that programmers use in their programming
langu...
that’s Why we have
6
補上 CSS 的部份缺陷,讓樣式表更有結構、重複使⽤用性
What is SASS
7
Syntactically Awesome Stylesheets
l.sass
l.css
compile
進階語法
擴充功能
原⽣生語法
⼀一般功能
CSS Preprocessor
‣安裝
‣使用語法
set up your sass
Command line VS GUI
作為⼀一個⼯工程師,我會建議你擁抱 command line
9
easy one GUI
10
# Mac	
$ brew install ruby	
# Windows	
Download ruby from http://rubyinstaller.org/
11
Install Ruby First
# if you install failed, try sudo	
$ gem install sass	
# check 	
$ sass -v
12
Install Sass
# watch and compile .scss file	
$ sass --watch input.scss:output.css	
# watch and compile .scss directory	
$ sass --watch ...
‣基本語法
‣CSS EXTENSIONS
‣SassScript
feature and syntax
15
SASS VS SCSS
SASS	
.block	
	 width: 960px	
	 height: 40px	
	 margin: 0 auto	
	 +mixin	
	 a	
	 	 color: blue	
	
SCSS	
.b...
# Comment will remain in .css	
/*comment*/	
# Comment will disappear in .css	
// comment	
16
Comment
17
nesting
CSS	
#nav{	
	 width: 80%;	
}	
#nav ul{ 	
	 list-style: none;	
}	
#nav li{	
	 float: left;	
}	
#nav li a{	
	 fon...
18
Parent Selector Reference
CSS	
a{	
	 color: blue;	
	 text-decoration: none;

}	
a:hover{	
	 color:orange;		
}	
a:visite...
19
Parent Selector Reference
code
SCSS	
button{	
	 background: gray;	
	 &[type=submit]{	
	 	 background: blue;	
	 }	
}
CSS...
20
Variable
code
SCSS	
$wrapper-width: 960px;	
$bg-color: #000;	
$side: left;	
!
.wrapper{	
	 max-width: $wrapper-width;	
...
21
Variable
!
CSS	
@import url("http://
fonts.googleapis.com/
css?family=Droid
+Sans");	
!
SCSS	
$family:
unquote("Droid+S...
Variable
• numbers (e.g. 1.2, 13, 10px)
• strings of text, with and without quotes (e.g. "foo", 'bar', baz)
• colors (e.g....
23
Mixin
code
SCSS	
@mixin inline-block{	
	 display: inline-block;	
	 *display: inline-block;	
	 *zoom: 1;	
}	
!
.media{	
...
24
Mixin with arguments
code
SCSS	
@mixin size($width, $height){	
	 width: $width;	
	 height: $height;	
}	
!
.media{	
	 @i...
25
Mixin with default arguments
code
SCSS	
@mixin size( $width:100px,
$height:100px ){	
	 width: $width;	
	 height: $heigh...
26
operation
code
SCSS	
@mixin opacity($opacity){	
	 opacity: $opacity/100;	
}	
.wrapper{	
	 margin: 3px + 7px;	
	 color: ...
27
inheritance
CSS	
.error, .seriousError, .inputError {	
border-color: #f00;	
background-color: #fdd;	
}	
!
.seriousError...
28
placeholder selector
CSS	
.seriousError, .inputError {	
border-color: #f00;	
background-color: #fdd;	
}	
!
.seriousErro...
29
function
CSS	
!
!
!
.sidebar{	
	 width: 240px;	
}
SCSS	
$grid-width: 40px;	
$gutter-width: 10px;	
!
@function grid-widt...
30
loop
CSS	
!
.col_1{	
	 width:40px;	
}	
.col_2{	
	 width:90px;	
}	
.col_3{	
	 width:140px;	
}
SCSS	
!
!
$columns: 3;	
@f...
@function set-notification-text-color($color) {	
@if (lightness( $color ) > 50) {	
@return #000000; 	
	 	 // Lighter color...
combine multiple scss
32
33
partial CSS
# In main.css	
base/head……	
base/body……	
base/foot……	
# In main.scss	
@import "base/head";	
@import "base/b...
‣常用函式
‣實際範例
Utility and Example
$base_color: hsl(15,50%,35%);	
!
$complement_color: adjust_hue($base_color, 180);	
$complement_alt_color: darken($compleme...
Hue, Saturation, Lightness
36
#Removes quotes from a string.	
unquote($string)	
#Returns the number of characters in a string.	
str-length($string)	
#Co...
Themable Button Set with Sass
38
http://codepen.io/Treehouse/pen/vEkit
You want more MIXINs?
39
40
41
42
html 檔css 檔 引⽤用 <link	
  href=”......”>
很難寫
scss 檔
好寫	

好讀
轉換成	

(編譯 / compile)
42
html 檔css 檔 引⽤用 <link	
  href=”......”>
很難寫
scss 檔
好寫	

好讀
轉換成	

(編譯 / compile)
compass	

函式庫
42
html 檔css 檔 引⽤用 <link	
  href=”......”>
很難寫
scss 檔
好寫	

好讀
轉換成	

(編譯 / compile)
compass	

函式庫@import	
  compass/......
...
‣安裝
‣專案設定
Set up your compass
gem install compass
44
command Line or GUI
$ compass create <project name>	
$ compass watch
45
Use compass
require 'compass'	
!
http_path = "/"	
css_dir = "stylesheets"	
sass_dir = "sass"	
images_dir = "images"	
javascripts_dir =...
@import “compass”;	
//———————————	
@import “compass/css3”;	
//———————————	
@import “compass/css3/text-shadow”;
47
include ...
@import “compass/css3"	
@import “compass/typography"	
@import "compass/utilities"	
@import "compass/layout"	
@import "comp...
‣SPRITE
‣IMAGE
‣CSS3
‣More
some compass function
Sprites
50
combine
#images/levels/low.png	
#images/levels/mid.png	
#images/levels/hard.png	
@import "levels/*.png";	
@include all-levels-spri...
.logo {	
background-image: image-url("gaya-design-logo.png");	
width: image-width("gaya-design-logo.png");	
height: image-...
53
CSS3 border-radius
.box {	
-webkit-border-radius: 8px;	
-moz-border-radius: 8px;	
-ms-border-radius: 8px;	
-o-border-ra...
54
CSS3 clearfix
section {	
overflow: hidden;	
*zoom: 1;	
}	
!
.evil {	
*zoom: 1;	
}	
!
.evil:after {	
content: "";	
displ...
ellipsis
55
http://codepen.io/anon/pen/ocgyk
treasure
56
Bootstrap-sass
57
CopyRight
• http://sass-lang.com
• http://alistapart.com/article/why-sass
• http://blog.visioncan.com/2011/sass-scss-your-...
Upcoming SlideShare
Loading in …5
×

CSS 開發加速指南-Sass & Compass

2,205 views

Published on

Sass and Compass introduction

Published in: Engineering, Technology

CSS 開發加速指南-Sass & Compass

  1. 1. CSS 開發加速指南 Cloud Computing-Based Services Design and Programming Lucien Lee SASS & COMPASS
  2. 2. BeFore TaLk SASS letMetellsomethingaboutCSS 2
  3. 3. CSS is Hard to learn • So many property need to know • Layout property is hard to realize • How the cascade works • So many selectors need to know • Browser issue make developer crazy 3
  4. 4. CSS is pain • NO Variables • NO Math • NO Functions • NO Obvious Structure • Repetitive, Repetitive and Repetitive 4
  5. 5. – CSS co-inventor, Bert Bos CSS stops short of even more powerful features that programmers use in their programming languages: macros, variables, symbolic constants, conditionals, expressions over variables, etc. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won’t even touch CSS. It’s a balance. And for CSS the balance is different than for some other things. 5
  6. 6. – CSS co-inventor, Bert Bos CSS stops short of even more powerful features that programmers use in their programming languages: macros, variables, symbolic constants, conditionals, expressions over variables, etc. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won’t even touch CSS. It’s a balance. And for CSS the balance is different than for some other things. 5 CSS 當初設計時 根本沒有考慮到當今 Web UI 排版的情況 ⽽而是讓⼤大家好懂他的語法
  7. 7. that’s Why we have 6 補上 CSS 的部份缺陷,讓樣式表更有結構、重複使⽤用性
  8. 8. What is SASS 7 Syntactically Awesome Stylesheets l.sass l.css compile 進階語法 擴充功能 原⽣生語法 ⼀一般功能 CSS Preprocessor
  9. 9. ‣安裝 ‣使用語法 set up your sass
  10. 10. Command line VS GUI 作為⼀一個⼯工程師,我會建議你擁抱 command line 9
  11. 11. easy one GUI 10
  12. 12. # Mac $ brew install ruby # Windows Download ruby from http://rubyinstaller.org/ 11 Install Ruby First
  13. 13. # if you install failed, try sudo $ gem install sass # check $ sass -v 12 Install Sass
  14. 14. # watch and compile .scss file $ sass --watch input.scss:output.css # watch and compile .scss directory $ sass --watch app/sass:public/stylesheets 13 Use sass
  15. 15. ‣基本語法 ‣CSS EXTENSIONS ‣SassScript feature and syntax
  16. 16. 15 SASS VS SCSS SASS .block width: 960px height: 40px margin: 0 auto +mixin a color: blue SCSS .block{ width: 960px; height: 40px; margin: 0 auto; @include mixin a{ color: blue; } }
  17. 17. # Comment will remain in .css /*comment*/ # Comment will disappear in .css // comment 16 Comment
  18. 18. 17 nesting CSS #nav{ width: 80%; } #nav ul{ list-style: none; } #nav li{ float: left; } #nav li a{ font-weight: bold; } SCSS #nav{ width: 80%; ul{ list-style: none; } li{ float: left; a{ font-weight: bold; } }
  19. 19. 18 Parent Selector Reference CSS a{ color: blue; text-decoration: none;
 } a:hover{ color:orange; } a:visited{ color:red; } SCSS a{ color: blue; text-decoration: none;
 &:hover{ color:orange; } &:visited{ color:red; } }
  20. 20. 19 Parent Selector Reference code SCSS button{ background: gray; &[type=submit]{ background: blue; } } CSS button{ background: gray; } button[type=submit]{ background: blue; }
  21. 21. 20 Variable code SCSS $wrapper-width: 960px; $bg-color: #000; $side: left; ! .wrapper{ max-width: $wrapper-width; color: $bg-color; span{ border-#{$side}-radius:5px; } } CSS $wrapper-width: 960px; $bg-color: #000; $side: left; ! .wrapper{ max-width: 960px; color: #000; } .wrapper span{ border-left-radius: 5px; }
  22. 22. 21 Variable ! CSS @import url("http:// fonts.googleapis.com/ css?family=Droid +Sans"); ! SCSS $family: unquote("Droid+Sans"); @import url("http:// fonts.googleapis.com/ css? family=#{$family}");
  23. 23. Variable • numbers (e.g. 1.2, 13, 10px) • strings of text, with and without quotes (e.g. "foo", 'bar', baz) • colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)) • booleans (e.g. true, false) • nulls (e.g. null) • lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif) • maps from one value to another (e.g. (key1: value1, key2: value2)) 22
  24. 24. 23 Mixin code SCSS @mixin inline-block{ display: inline-block; *display: inline-block; *zoom: 1; } ! .media{ @include inline-block; } CSS ! .media{ display: inline-block; *display: inline-block; *zoom: 1; } ! !
  25. 25. 24 Mixin with arguments code SCSS @mixin size($width, $height){ width: $width; height: $height; } ! .media{ @include size(200px, 400px); } CSS ! .media{ width: 200px; height: 400px; } ! !
  26. 26. 25 Mixin with default arguments code SCSS @mixin size( $width:100px, $height:100px ){ width: $width; height: $height; } ! .media{ @include size; } CSS ! .media{ width: 100px; height: 100px; } ! !
  27. 27. 26 operation code SCSS @mixin opacity($opacity){ opacity: $opacity/100; } .wrapper{ margin: 3px + 7px; color: #010203 + #040506; opacity(20); } CSS ! .wrapper{ margin: 10px; color: #050709; opacity: 0.2; } !
  28. 28. 27 inheritance CSS .error, .seriousError, .inputError { border-color: #f00; background-color: #fdd; } ! .seriousError { border-width: 3px; } ! .inputError { border-width: 1px; } SCSS .error { border-color: #f00; background-color: #fdd; } ! .seriousError { @extend .error; border-width: 3px; } ! .inputError { @extend .error; border-width: 1px; }
  29. 29. 28 placeholder selector CSS .seriousError, .inputError { border-color: #f00; background-color: #fdd; } ! .seriousError { border-width: 3px; } ! .inputError { border-width: 1px; } SCSS %error { border-color: #f00; background-color: #fdd; } ! .seriousError { @extend %error; border-width: 3px; } ! .inputError { @extend %error; border-width: 1px; }
  30. 30. 29 function CSS ! ! ! .sidebar{ width: 240px; } SCSS $grid-width: 40px; $gutter-width: 10px; ! @function grid-width($n){ @return $n*$grid-width + ($n-1) * $gutter-width; } ! .sidebar{ width: grid-width(5); }
  31. 31. 30 loop CSS ! .col_1{ width:40px; } .col_2{ width:90px; } .col_3{ width:140px; } SCSS ! ! $columns: 3; @for $i from 1 through $columns{ .col_#{$i}{ grid-width($i); } }
  32. 32. @function set-notification-text-color($color) { @if (lightness( $color ) > 50) { @return #000000; // Lighter color, return black } @else { @return #FFFFFF; // Darker color, return white } } 31 flow controlhttp://codepen.io/jlong/pen/ktcqw
  33. 33. combine multiple scss 32
  34. 34. 33 partial CSS # In main.css base/head…… base/body…… base/foot…… # In main.scss @import "base/head"; @import "base/body"; @import "base/foot";
  35. 35. ‣常用函式 ‣實際範例 Utility and Example
  36. 36. $base_color: hsl(15,50%,35%); ! $complement_color: adjust_hue($base_color, 180); $complement_alt_color: darken($complement_color, 5%); ! $light_color: lighten($base_color, 15%); $lighter_color: lighten($base_color, 30%); ! $triad1_color: adjust_hue($base_color, 120); $triad2_color: adjust_hue($base_color, -120); 35 color mathhttp://jackiebalzer.com/color
  37. 37. Hue, Saturation, Lightness 36
  38. 38. #Removes quotes from a string. unquote($string) #Returns the number of characters in a string. str-length($string) #Converts a string to upper case. to-upper-case($string) #Converts a string to lower case. to-lower-case($string) 37 String function
  39. 39. Themable Button Set with Sass 38 http://codepen.io/Treehouse/pen/vEkit
  40. 40. You want more MIXINs? 39
  41. 41. 40
  42. 42. 41
  43. 43. 42 html 檔css 檔 引⽤用 <link  href=”......”> 很難寫 scss 檔 好寫 好讀 轉換成 (編譯 / compile)
  44. 44. 42 html 檔css 檔 引⽤用 <link  href=”......”> 很難寫 scss 檔 好寫 好讀 轉換成 (編譯 / compile) compass 函式庫
  45. 45. 42 html 檔css 檔 引⽤用 <link  href=”......”> 很難寫 scss 檔 好寫 好讀 轉換成 (編譯 / compile) compass 函式庫@import  compass/...... 引⽤用
  46. 46. ‣安裝 ‣專案設定 Set up your compass
  47. 47. gem install compass 44 command Line or GUI
  48. 48. $ compass create <project name> $ compass watch 45 Use compass
  49. 49. require 'compass' ! http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" 46 config.rb
  50. 50. @import “compass”; //——————————— @import “compass/css3”; //——————————— @import “compass/css3/text-shadow”; 47 include compass in your sass
  51. 51. @import “compass/css3" @import “compass/typography" @import "compass/utilities" @import "compass/layout" @import "compass/reset" 48 Mixin categories
  52. 52. ‣SPRITE ‣IMAGE ‣CSS3 ‣More some compass function
  53. 53. Sprites 50 combine
  54. 54. #images/levels/low.png #images/levels/mid.png #images/levels/hard.png @import "levels/*.png"; @include all-levels-sprites; ! <span class="levels-low"></span> <span class="levels-mid"></span> <span class="levels-hard"></span> 51 Sprites
  55. 55. .logo { background-image: image-url("gaya-design-logo.png"); width: image-width("gaya-design-logo.png"); height: image-height("gaya-design-logo.png"); } 52 image helper
  56. 56. 53 CSS3 border-radius .box { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: rgba(204, 204, 204, 0.5) 3px 3px 5px; -moz-box-shadow: rgba(204, 204, 204, 0.5) 3px 3px 5px; box-shadow: rgba(204, 204, 204, 0.5) 3px 3px 5px; } .box { @include border-radius(8px); @include box-shadow( 
 rgba(#ccc, 0.5) 3px 3px 5px ); }
  57. 57. 54 CSS3 clearfix section { overflow: hidden; *zoom: 1; } ! .evil { *zoom: 1; } ! .evil:after { content: ""; display: table; clear: both; } section { @include clearfix; } ! .evil { @include pie-clearfix; }
  58. 58. ellipsis 55 http://codepen.io/anon/pen/ocgyk
  59. 59. treasure 56
  60. 60. Bootstrap-sass 57
  61. 61. CopyRight • http://sass-lang.com • http://alistapart.com/article/why-sass • http://blog.visioncan.com/2011/sass-scss-your-css/ • http://blog.teamtreehouse.com/create-a-themable- button-set-with-sass 58

×