css 開發加速指南-sass & compass
DESCRIPTION
Sass and Compass introductionTRANSCRIPT
![Page 1: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/1.jpg)
CSS 開發加速指南Cloud Computing-Based Services Design and Programming
Lucien Lee
SASS & COMPASS
![Page 2: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/2.jpg)
BeFore TaLk SASS let Me tell something about CSS
2
![Page 3: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/4.jpg)
CSS is pain
• NO Variables
• NO Math
• NO Functions
• NO Obvious Structure
• Repetitive, Repetitive and Repetitive
4
![Page 5: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/5.jpg)
– 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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/6.jpg)
– 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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/7.jpg)
that’s Why we have
6
補上 CSS 的部份缺陷,讓樣式表更有結構、重複使⽤用性
![Page 8: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/8.jpg)
What is SASS
7
Syntactically Awesome Stylesheets
l.sass
l.css
compile
進階語法 擴充功能
原⽣生語法 ⼀一般功能
CSS Preprocessor
![Page 9: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/9.jpg)
‣安裝 ‣使用語法
set up your sass
![Page 10: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/10.jpg)
Command line VS GUI作為⼀一個⼯工程師,我會建議你擁抱 command line
9
![Page 11: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/11.jpg)
easy one GUI
10
![Page 12: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/12.jpg)
# Mac$ brew install ruby# WindowsDownload ruby from http://rubyinstaller.org/
11
Install Ruby First
![Page 13: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/13.jpg)
# if you install failed, try sudo$ gem install sass# check $ sass -v
12
Install Sass
![Page 14: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/14.jpg)
# 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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/15.jpg)
‣基本語法 ‣CSS EXTENSIONS ‣SassScript
feature and syntax
![Page 16: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/17.jpg)
# Comment will remain in .css/*comment*/# Comment will disappear in .css// comment
16
Comment
![Page 18: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/26.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/28.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/30.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/31.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/32.jpg)
@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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/33.jpg)
combine multiple scss
32
![Page 34: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/35.jpg)
‣常用函式 ‣實際範例
Utility and Example
![Page 36: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/36.jpg)
$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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/37.jpg)
Hue, Saturation, Lightness
36
![Page 38: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/38.jpg)
#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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/39.jpg)
Themable Button Set with Sass
38
http://codepen.io/Treehouse/pen/vEkit
![Page 40: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/40.jpg)
You want more MIXINs?
39
![Page 41: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/41.jpg)
40
![Page 42: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/42.jpg)
41
![Page 43: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/43.jpg)
42
html 檔css 檔 引⽤用<link href=”......”>
很難寫
scss 檔好寫 好讀
轉換成 (編譯 / compile)
![Page 44: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/44.jpg)
42
html 檔css 檔 引⽤用<link href=”......”>
很難寫
scss 檔好寫 好讀
轉換成 (編譯 / compile)
compass 函式庫
![Page 45: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/45.jpg)
42
html 檔css 檔 引⽤用<link href=”......”>
很難寫
scss 檔好寫 好讀
轉換成 (編譯 / compile)
compass 函式庫@import compass/......
引⽤用
![Page 46: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/46.jpg)
‣安裝 ‣專案設定
Set up your compass
![Page 47: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/47.jpg)
gem install compass
44
command Line or GUI
![Page 48: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/48.jpg)
$ compass create <project name>$ compass watch
45
Use compass
![Page 49: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/49.jpg)
require 'compass'!
http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"
46
config.rb
![Page 50: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/50.jpg)
@import “compass”;//———————————@import “compass/css3”;//———————————@import “compass/css3/text-shadow”;
47
include compass in your sass
![Page 51: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/51.jpg)
@import “compass/css3"@import “compass/typography"@import "compass/utilities"@import "compass/layout"@import "compass/reset"
48
Mixin categories
![Page 52: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/52.jpg)
‣SPRITE ‣IMAGE ‣CSS3 ‣More
some compass function
![Page 53: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/53.jpg)
Sprites
50
combine
![Page 54: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/54.jpg)
#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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/55.jpg)
.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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/56.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/57.jpg)
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 59: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/59.jpg)
treasure
56
![Page 60: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/60.jpg)
Bootstrap-sass
57
![Page 61: CSS 開發加速指南-Sass & Compass](https://reader034.vdocuments.site/reader034/viewer/2022050710/53f48d5c8d7f728e318b486d/html5/thumbnails/61.jpg)
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