This document introduces Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor that adds powerful features like variables, nested rules, mixins, inheritance, and other useful tools that help make authoring CSS easier and more maintainable. It discusses some of the key benefits of using Sass like variables, nesting, mixins, functions, and operations that make styling more powerful and repetitive tasks easier. It also covers using Compass, a Sass extension framework, to gain access to useful CSS3 mixins and functions.

1. CSS 開發加速指南
Cloud Computing-Based Services Design and Programming
Lucien Lee
SASS & COMPASS

2. BeFore TaLk SASS
letMetellsomethingaboutCSS
2

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. CSS is pain
• NO Variables
• NO Math
• NO Functions
• NO Obvious Structure
• Repetitive, Repetitive and Repetitive
4

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. – 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. that’s Why we have
6
補上 CSS 的部份缺陷，讓樣式表更有結構、重複使⽤用性

8. What is SASS
7
Syntactically Awesome Stylesheets
l.sass
l.css
compile
進階語法
擴充功能
原⽣生語法
⼀一般功能
CSS Preprocessor

9. ‣安裝
‣使用語法
set up your sass

10. Command line VS GUI
作為⼀一個⼯工程師，我會建議你擁抱 command line
9

11. easy one GUI
10

12. # Mac
$ brew install ruby
# Windows
Download ruby from http://rubyinstaller.org/
11
Install Ruby First

13. # if you install failed, try sudo
$ gem install sass
# check
$ sass -v
12
Install Sass

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. ‣基本語法
‣CSS EXTENSIONS
‣SassScript
feature and syntax

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. # Comment will remain in .css
/*comment*/
# Comment will disappear in .css
// comment
16
Comment

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. 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. 19
Parent Selector Reference
code
SCSS
button{
background: gray;
&[type=submit]{
background: blue;
}
}
CSS
button{
background: gray;
}
button[type=submit]{
background: blue;
}

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. @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. combine multiple scss
32

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. ‣常用函式
‣實際範例
Utility and Example

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. Hue, Saturation, Lightness
36

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. Themable Button Set with Sass
38
http://codepen.io/Treehouse/pen/vEkit

40. You want more MIXINs?
39

41. 40

42. 41

43. 42
html 檔css 檔 引⽤用 <link
href=”......”>
很難寫
scss 檔
好寫
好讀
轉換成
（編譯 / compile）

44. 42
html 檔css 檔 引⽤用 <link
href=”......”>
很難寫
scss 檔
好寫
好讀
轉換成
（編譯 / compile）
compass
函式庫

45. 42
html 檔css 檔 引⽤用 <link
href=”......”>
很難寫
scss 檔
好寫
好讀
轉換成
（編譯 / compile）
compass
函式庫@import
compass/......
引⽤用

46. ‣安裝
‣專案設定
Set up your compass

47. gem install compass
44
command Line or GUI

48. $ compass create <project name>
$ compass watch
45
Use compass

49. require 'compass'
!
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
46
config.rb

50. @import “compass”;
//———————————
@import “compass/css3”;
//———————————
@import “compass/css3/text-shadow”;
47
include compass in your sass

51. @import “compass/css3"
@import “compass/typography"
@import "compass/utilities"
@import "compass/layout"
@import "compass/reset"
48
Mixin categories

52. ‣SPRITE
‣IMAGE
‣CSS3
‣More
some compass function

53. Sprites
50
combine

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. .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. 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. 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. ellipsis
55
http://codepen.io/anon/pen/ocgyk

59. treasure
56

60. Bootstrap-sass
57

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