css 開發加速指南-sass & compass

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

Upload: lucien-lee

Post on 19-Aug-2014

579 views

Category:

Engineering


1 download

DESCRIPTION

Sass and Compass introduction

TRANSCRIPT

Page 1: CSS 開發加速指南-Sass & Compass

CSS 開發加速指南Cloud Computing-Based Services Design and Programming

Lucien Lee

SASS & COMPASS

Page 2: CSS 開發加速指南-Sass & Compass

BeFore TaLk SASS let Me tell something about CSS

2

Page 3: CSS 開發加速指南-Sass & Compass

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

Page 4: CSS 開發加速指南-Sass & Compass

CSS is pain

• NO Variables

• NO Math

• NO Functions

• NO Obvious Structure

• Repetitive, Repetitive and Repetitive

4

Page 5: CSS 開發加速指南-Sass & Compass

– 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

Page 6: CSS 開發加速指南-Sass & Compass

– 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排版的情況

⽽而是讓⼤大家好懂他的語法

Page 7: CSS 開發加速指南-Sass & Compass

that’s Why we have

6

補上 CSS 的部份缺陷,讓樣式表更有結構、重複使⽤用性

Page 8: CSS 開發加速指南-Sass & Compass

What is SASS

7

Syntactically Awesome Stylesheets

l.sass

l.css

compile

進階語法 擴充功能

原⽣生語法 ⼀一般功能

CSS Preprocessor

Page 9: CSS 開發加速指南-Sass & Compass

‣安裝 ‣使用語法

set up your sass

Page 10: CSS 開發加速指南-Sass & Compass

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

9

Page 11: CSS 開發加速指南-Sass & Compass

easy one GUI

10

Page 12: CSS 開發加速指南-Sass & Compass

# Mac$ brew install ruby# WindowsDownload ruby from http://rubyinstaller.org/

11

Install Ruby First

Page 13: CSS 開發加速指南-Sass & Compass

# if you install failed, try sudo$ gem install sass# check $ sass -v

12

Install Sass

Page 14: CSS 開發加速指南-Sass & Compass

# 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

Page 15: CSS 開發加速指南-Sass & Compass

‣基本語法 ‣CSS EXTENSIONS ‣SassScript

feature and syntax

Page 16: CSS 開發加速指南-Sass & Compass

15

SASS VS SCSSSASS.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; } }

Page 17: CSS 開發加速指南-Sass & Compass

# Comment will remain in .css/*comment*/# Comment will disappear in .css// comment

16

Comment

Page 18: CSS 開發加速指南-Sass & Compass

17

nestingCSS#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; } }

Page 19: CSS 開發加速指南-Sass & Compass

18

Parent Selector ReferenceCSSa{ color: blue; text-decoration: none; }a:hover{ color:orange;}a:visited{ color:red; }

SCSSa{ color: blue; text-decoration: none; &:hover{ color:orange; } &:visited{ color:red; }}

Page 20: CSS 開發加速指南-Sass & Compass

19

Parent Selector Reference

code

SCSSbutton{ background: gray; &[type=submit]{ background: blue; }}

CSSbutton{ background: gray;}button[type=submit]{ background: blue;}

Page 21: CSS 開發加速指南-Sass & Compass

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;}

Page 22: CSS 開發加速指南-Sass & Compass

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}");

Page 23: CSS 開發加速指南-Sass & Compass

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

Page 24: CSS 開發加速指南-Sass & Compass

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;}!!

Page 25: CSS 開發加速指南-Sass & Compass

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;}!!

Page 26: CSS 開發加速指南-Sass & Compass

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;}!!

Page 27: CSS 開發加速指南-Sass & Compass

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;}!

Page 28: CSS 開發加速指南-Sass & Compass

27

inheritanceCSS.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;

}

Page 29: CSS 開發加速指南-Sass & Compass

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;

}

Page 30: CSS 開發加速指南-Sass & Compass

29

functionCSS!

!

!

.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);}

Page 31: CSS 開發加速指南-Sass & Compass

30

loopCSS!.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); }}

Page 32: CSS 開發加速指南-Sass & Compass

@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

Page 33: CSS 開發加速指南-Sass & Compass

combine multiple scss

32

Page 34: CSS 開發加速指南-Sass & Compass

33

partial CSS

# In main.cssbase/head……base/body……base/foot……

# In main.scss@import "base/head";@import "base/body";@import "base/foot";

Page 35: CSS 開發加速指南-Sass & Compass

‣常用函式 ‣實際範例

Utility and Example

Page 36: CSS 開發加速指南-Sass & Compass

$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

Page 37: CSS 開發加速指南-Sass & Compass

Hue, Saturation, Lightness

36

Page 38: CSS 開發加速指南-Sass & Compass

#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

Page 39: CSS 開發加速指南-Sass & Compass

Themable Button Set with Sass

38

http://codepen.io/Treehouse/pen/vEkit

Page 40: CSS 開發加速指南-Sass & Compass

You want more MIXINs?

39

Page 41: CSS 開發加速指南-Sass & Compass

40

Page 42: CSS 開發加速指南-Sass & Compass

41

Page 43: CSS 開發加速指南-Sass & Compass

42

html 檔css 檔 引⽤用<link  href=”......”>

很難寫

scss 檔好寫 好讀

轉換成 (編譯 / compile)

Page 44: CSS 開發加速指南-Sass & Compass

42

html 檔css 檔 引⽤用<link  href=”......”>

很難寫

scss 檔好寫 好讀

轉換成 (編譯 / compile)

compass 函式庫

Page 45: CSS 開發加速指南-Sass & Compass

42

html 檔css 檔 引⽤用<link  href=”......”>

很難寫

scss 檔好寫 好讀

轉換成 (編譯 / compile)

compass 函式庫@import  compass/......

引⽤用

Page 46: CSS 開發加速指南-Sass & Compass

‣安裝 ‣專案設定

Set up your compass

Page 47: CSS 開發加速指南-Sass & Compass

gem install compass

44

command Line or GUI

Page 48: CSS 開發加速指南-Sass & Compass

$ compass create <project name>$ compass watch

45

Use compass

Page 49: CSS 開發加速指南-Sass & Compass

require 'compass'!

http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"

46

config.rb

Page 50: CSS 開發加速指南-Sass & Compass

@import “compass”;//———————————@import “compass/css3”;//———————————@import “compass/css3/text-shadow”;

47

include compass in your sass

Page 51: CSS 開發加速指南-Sass & Compass

@import “compass/css3"@import “compass/typography"@import "compass/utilities"@import "compass/layout"@import "compass/reset"

48

Mixin categories

Page 52: CSS 開發加速指南-Sass & Compass

‣SPRITE ‣IMAGE ‣CSS3 ‣More

some compass function

Page 53: CSS 開發加速指南-Sass & Compass

Sprites

50

combine

Page 54: CSS 開發加速指南-Sass & Compass

#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

Page 55: CSS 開發加速指南-Sass & Compass

.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

Page 56: CSS 開發加速指南-Sass & Compass

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 );

}

Page 57: CSS 開發加速指南-Sass & Compass

54

CSS3 clearfixsection {

overflow: hidden;

*zoom: 1;

}

!.evil {

*zoom: 1;

}

!.evil:after {

content: "";

display: table;

clear: both;

}

section { @include clearfix;}!

.evil { @include pie-clearfix;}

Page 58: CSS 開發加速指南-Sass & Compass

ellipsis

55

http://codepen.io/anon/pen/ocgyk

Page 59: CSS 開發加速指南-Sass & Compass

treasure

56

Page 60: CSS 開發加速指南-Sass & Compass

Bootstrap-sass

57

Page 61: CSS 開發加速指南-Sass & Compass

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