An Introduction to Sassy CSS
-
Upload
stewart-curry -
Category
Technology
-
view
138 -
download
1
description
Transcript of An Introduction to Sassy CSS
![Page 1: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/1.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
An Introduction toSassy CSSStewart Curry
![Page 2: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/2.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
Who isThis Guy?
Web Designer for 15 years or soTable-based layouts & spacer gifsCSS changed all thatSCSS is CSS only betterwoop.ie - iteration, modules, themes, templates
![Page 3: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/3.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
pastsimple
![Page 4: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/4.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
![Page 5: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/5.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
nowcomplicated
![Page 6: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/6.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
💬
![Page 7: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/7.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
designeverywhere
![Page 8: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/8.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
📱 💻
![Page 9: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/9.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
SASS MAKESCSS FUN AGAINwww.sass-lang.com
Basically, CSS made flexible & awesome by adding in cool features.
![Page 10: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/10.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 11: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/11.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ThereWill
be Code
![Page 12: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/12.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 13: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/13.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
Sass Style with attitude
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. www.sass-lang.com
![Page 14: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/14.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
it looks like CSS$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
![Page 15: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/15.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
it looks like CSS but• it’s neater• it’s faster to write• it allows for more experimentation• it’s more flexible• it’s more manageable• it’s got variables!
![Page 16: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/16.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
so you can• experiment more• make global changes quickly• make reusable modules• use frameworks more effectively• handle RWD neatly• have less cluttered code
![Page 17: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/17.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
![Page 18: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/18.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
📁 sass
![Page 19: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/19.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
📁 sass
📄 style.scss
![Page 20: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/20.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow
📄style.scss
⚙processor
📄style.css
![Page 21: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/21.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
📁 sass
📄 style.scss
📄 style.css
![Page 22: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/22.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
all you do is...• make a .scss file• write to it, just like normal CSS• translate it to a CSS file/folder:• sass --watch style.scss:style.css• sass --watch stylesheets/ ↵
sass:stylesheets/compiled• and any changes you make to your SCSS
file(s) will be complied to your CSS file(s).
![Page 23: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/23.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
Y U NO
USE LESS.JS?
![Page 24: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/24.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 25: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/25.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
![Page 26: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/26.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
![Page 27: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/27.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
Install Ruby rubyinstaller.org
$ sudo gem install sass
$ sass --watch style.scss:style.css
![Page 28: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/28.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
http://incident57.com/codekit/
![Page 29: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/29.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 30: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/30.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
$variablesvariables allow you to use the same value in multiple places, as well as perform basic maths and functions.
![Page 31: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/31.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
why variables rockChange one variable and you change it everywhere. Save hours of search & replacing. Experiment with small changes in margins & gutters. Reskin with different colours...
![Page 32: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/32.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
$variables• begin with a dollar sign $• assign a value with a colon separator :• end with semi-colon ;
$red : #ff0000;$font : "Open Sans", Arial, Sans-Serif;$margin : 16px;$column : 40px;$type : 1em;
![Page 33: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/33.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
$variables• use instead of a value
h1 { color: $primarycolor; font-family: $mainfont; font-size: $basetypesize; margin: 0 0 $margin 0;}
SCSS
h1 { color: red; font-family: "Open Sans", Arial, Sans-Serif; font-size: 1em; margin: 0 0 16px 0;}
CSS
$primarycolor : red$mainfont : “Open Sans...$basetypesize : 1em$margin : 16px
![Page 34: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/34.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
operations• maths: + - / *• color: darken, lighten, saturation, opacity• http://sass-lang.com/docs/yardoc/Sass/
Script/Functions.html
![Page 35: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/35.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
operations.island { background: darken($primarycolor,10%); width: $column*4; margin: $margin*2 $margin/2 $margin+20 $margin; padding: $margin*0.25;}
SCSS
.island { background: #cc0000; width: 160px; margin: 32px 8px 36px 16px; padding: 4px;}
CSS
$primarycolor : red$column : 40px$margin : 16px
![Page 36: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/36.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
escaping• wrap with #{ }• useful for paths
p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; }
SCSS
p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif; }
CSS
$basetypesize : 1em
![Page 37: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/37.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
negatives• minus symbols• -64px -32px 0 16px• top: -96px; right , left are 0; bottom is 16px
.moveup { margin:-$margin*4 -$margin*2 0 $margin;}
SCSS
.moveup { margin: -96px 0 16px;}
CSS
$margin : 16px
![Page 38: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/38.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
negatives• wrap in brackets• (-$variable*value)
.moveup { margin:(-$margin*4) (-$margin*2) 0 $margin; }
SCSS
.moveup { margin: -64px -32px 0 16px;}
CSS
$margin : 16px
![Page 39: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/39.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 40: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/40.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
nestingSass avoids repetition by nesting selectors within one another. The same thing works with properties. www.sass-lang.com
![Page 41: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/41.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
why nesting rocksWrite a hell of a lot less CSS. Avoid repetion. Use indentation to quickly scan and see relationships. Use ampersands for awesomeness.
![Page 42: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/42.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
write html as normal
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul></nav>
HTML
![Page 43: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/43.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
nest & indentnav { font-family: $mainfont;
ul { margin: 0; padding: 0;
li { list-style: none;
a { background: #222; color: #fff; display: block; float: left; padding: $margin $margin*1.5; text-decoration: none; } } }}
SCSS
$mainfont : “Open Sans...$margin : 16px
![Page 44: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/44.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
nest & indentnav { font-family: "Open Sans", Arial, Sans-Serif;} nav ul { margin: 0; padding: 0;}
nav ul li { list-style: none;}
nav ul li a { background: #222; border-right: 1px solid #666; color: #fff; display: block; float: left; padding: 16px 24px; text-decoration: none;}
CSS
$mainfont : “Open Sans...$margin : 16px
![Page 45: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/45.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
selectorsem { font: { family: Georgia, Serif; style: normal; weight: bold; variant: small-caps; }}
SCSS
em { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps;}
CSS
![Page 46: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/46.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
&ersand
![Page 47: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/47.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
& ampersand• pulls the parent selector into the &
#fancybox { li a.fancy { &:link { color: $primarycolor; } &:visited { color: darken($primarycolor,20%); } &:hover { color: lighten($primarycolor,10%); } }}
SCSS
#fancybox li a.fancy:link { color: #993333; }#fancybox li a.fancy:visited { color: #4d1919; }#fancybox li a.fancy:hover { color: #bf4040; }
CSS
$primarycolor : #993333
![Page 48: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/48.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ampersand &• prepends before parent selector
#fancybox { li a.fancy { &:link { color: $primarycolor; } &:hover { color: lighten($primarycolor,10%); } body#checkout & { border:1px solid $primarycolor; } }}
SCSS
#fancybox li a.fancy:link { color: #993333; }#fancybox li a.fancy:hover { color: #bf4040; }body#checkout #fancybox li a.fancy { border: 1px solid #993333; }
CSS
$primarycolor : #993333
![Page 49: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/49.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ampersand &• use with HTML body classes
#browserwars { border: 1px solid red; .ie8 &, .ie9 & { border: 1px solid blue; } .ie10 & { border: 1px solid green; }}
SCSS
![Page 50: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/50.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ampersand &• use with HTML body classes
#browserwars { border: 1px solid red;}.ie8 #browserwars, .ie9 #browserwars { border: 1px solid blue;}.ie10 #browserwars { border: 1px solid green;}
CSS
![Page 51: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/51.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ampersand &• use with HTML body classes
$size :16px;
h1 { font: { family: Arial, sans-serif; size: $size; } .wf-active & { font: { family: "proxima-nova-extra-condensed", Arial, sans-serif; size: $size*1.5; } }}
SCSS
$size : 16px
![Page 52: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/52.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ampersand &• use with HTML body classes
h1 { font-family: Arial, sans-serif; font-size: 16px;} .wf-active h1 { font-family: "proxima-nova-extra-condensed", Arial, sans-serif; font-size: 24px;}
CSS
$size : 16px
![Page 53: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/53.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 54: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/54.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
@mixinsmixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. www.sass-lang.com
![Page 55: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/55.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
why mixins rockReduce massive chunks of CSS into reusable includes that you can use over and over again.
![Page 56: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/56.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
http://compass-style.org/
![Page 57: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/57.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@mixin• begin with @mixin• give it a name• add your $variable(s)• give (an) optional default value(s)
@mixin roundcorner ($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}
![Page 58: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/58.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@mixin• call it with @include
.fancybox { width: 100px; @include roundcorner(10);}
SCSS
.fancybox { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
CSS
![Page 59: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/59.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
image replace@mixin hidetext { text-indent: 100%; white-space: nowrap; overflow: hidden;}
.logo { background: url(images/logo.png) no-repeat; @include hidetext; width: 200px; height: 80px;}
![Page 60: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/60.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
boxshadow@mixin boxshadow ($horz, $vert, $blur, $spread, $color) { -webkit-box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color; -moz-box-shadow: #{$horz} px #{$vert}px #{$blur}px #{$spread}px $color; box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color;}
@include boxshadow (2,2,2,0,rgba(0,0,0,0.5));
![Page 61: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/61.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
transitions@mixin transanim ($time) { -webkit-transition: all #{$time}s ease-in-out; -moz-transition: all #{$time} s ease-in-out; -o-transition: all #{$time}s ease-in-out; -ms-transition: all #{$time}s ease-in-out; transition: all all #{$time}s ease-in-out;}
* { @include transanim(0.5);}
![Page 62: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/62.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
type@mixin type ($size, $lineheight, $marginbottom: 1 1.5 1) { font-size: $grid*$size; font-size: $grid*$size / 16px + rem; line-height: $grid*$lineheight; line-height: $grid*$lineheight / 16px + rem; margin:0 0 $grid*$marginbottom 0;}
h1 { @include type (1.75, 2, 1);}
$grid : 20px$lineheight : 1em
![Page 63: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/63.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
typeh1 { font-size: 35px; font-size: 2.188rem; line-height: 40px; line-height: 2.5rem; margin: 0 0 20px 0; }
CSS
$grid : 20px$lineheight : 1em
![Page 64: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/64.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@each$social: twitter facebook linkedin;
@mixin social-icons { @each $icon in $social { .social-#{$icon} { background: url("images/#{$icon}.png") no-repeat; } }} .social { @include social-icons;}
SCSS
![Page 65: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/65.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
it’s a loop!.social .social-twitter { background: url("images/twitter.png") no-repeat;} .social .social-facebook { background: url("images/facebook.png") no-repeat;} .social .social-linkedin { background: url("images/linkedin.png") no-repeat;}
CSS
![Page 66: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/66.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
retina@mixin bgretina ($source, $format ) { background: { image: url("#{$source}.#{$format}"); size: cover; repeat: no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 2) { background: { image: url("#{$source}@2x.#{$format}"); } }}
#responsivetest { width: 400px; height: 400px; @include bgretina(bgimage,png)}
SCSS
![Page 67: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/67.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
retina#responsivetest { width: 400px; height: 400px; background-image: url("bgimage.png"); background-size: cover; background-repeat: no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 2) { #responsivetest { background-image: url("[email protected]"); } }
CSS
![Page 68: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/68.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ampersand &• make it a mixin to reuse
@mixin webfonts ($fallback, $shinytype, $size) { font: { family: #{$fallback}; size: $size; } .wf-active & { font: { family: "#{$shinytype}", #{$fallback}; size: $size*1.5; } }}
h1 {@include webfonts("Arial, sans-serif", "proxima-nova-extra-condensed", 16px);}
SCSS
![Page 69: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/69.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 70: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/70.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
@media@media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules.www.sass-lang.com
![Page 71: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/71.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
whymedia queries rockMake responsive layouts. Associate media queries more closley with the element you are changeing.
![Page 72: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/72.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@media• begin with @media• write media queries as normal• if it appears within a rule, it will ‘bubble up’
and put the selectors within the rule.• media queries can be nested• combined with the and rule
![Page 73: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/73.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@media.sidebar { float: right; width: 300px; @media screen and (max-width: 480px) { float: none; width: 100%; }}
SCSS
.sidebar { float: right; width: 300px;}@media screen and (max-width: 480px) { .sidebar { float: none; width: 100%; }}
CSS
![Page 74: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/74.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
#logo #menu
#content
#leftnav
#footer
12
34
5
![Page 75: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/75.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
#logo
#menu
#content
#leftnav
#footer
1
2
3
4
5
![Page 76: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/76.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@media@mixin boxit ($dir) { display:box; display:-moz-box; display:-webkit-box; box-orient:$dir; -moz-box-orient:$dir; -webkit-box-orient:$dir;}
@mixin boxnum($num: 1) { box-ordinal-group: #{$num}; -moz-box-ordinal-group: #{$num}; -webkit-box-ordinal-group: #{$num};}
SCSS
![Page 77: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/77.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@media@media screen and (max-width: 480px) {
#wrapper { width: 100%; @include boxit(vertical); #logo { @include boxnum(2); } #menu { @include boxnum(1); } #content { @include boxnum(3); } #leftnav { @include boxnum(4); } #footer { @include boxnum(5); } }}
SCSS
![Page 78: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/78.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
#logo
#menu
#content
#leftnav
#footer
1
2
3
4
5
1
2
3
4
5
![Page 79: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/79.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
3.2coming soon
![Page 80: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/80.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@media
• variables in queries• Sass 3.2 alpha• other cool stuff
You can’t use this yet - watch https://github.com/nex3/sass/
![Page 81: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/81.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@mediaYou can’t use this yet - watch https://github.com/nex3/sass/
@mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: 320px) { @content; } } @else if $media == medium-screens { @media only screen and (min-width: 321px) and (max-width: 1024px) { @content; } } @else if $media == wide-screens { @media only screen and (min-width: 1024px) { @content; } }}
.profile-pic { float: left; width: 250px; @include respond-to(handhelds) { width: 100% ;} @include respond-to(medium-screens) { width: 125px; } @include respond-to(wide-screens) { float: none; }}
SCSS
http://thesassway.com/intermediate/responsive-web-design-part-2#the_future_of_media_queries_in_sass
![Page 82: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/82.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 83: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/83.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
_partialspartials are snippets of scss that are saved into files meant to be imported. They begin with an underscore and don’t get compiled.
![Page 84: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/84.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
why partials rockInclude files for CSS. Make your files more managable by breaking them into discreet external modules.
![Page 85: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/85.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
_partials• filename starts with an underscore• e.g. “_grid.scss”• import it into your .scss file • @import "grid";• save on HTTP requests• better structure
![Page 86: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/86.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow
📄_reset.scss
📄_grid.scss
📄_type.scss
📄style.scss
⚙processor
📄style.css
![Page 87: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/87.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
![Page 88: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/88.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
![Page 89: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/89.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
examples• Separate partials for:
• grids, typography, colours, forms, tables• mixins & variables• different post types for blogs• adverts• media queries• site sub-sections
![Page 90: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/90.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 91: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/91.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
“
@extendThe @extend directive (tells) Sass that one selector should inherit the styles of another selector.http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend
![Page 92: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/92.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
why extend rocksLets you add styles from one selector to another, as well as its own styles.
![Page 93: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/93.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@extend• nest @extend .classname;• goes inside another class• don’t have to use multiple classes• association is in CSS not HTML
![Page 94: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/94.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@extend.error { border: 1px #f00; background: #fdd;}
.badError { @extend .error; border-width: 3px;}
SCSS
.error, .badError { border: 1px #f00; background: #fdd;}
.badError { border-width: 3px;}
CSS
![Page 95: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/95.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 96: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/96.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
gotchas!A few things to watch out for when working with SCSS.
![Page 97: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/97.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
![Page 98: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/98.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
/facepalm• make sure you’re running your compiler• make sure it’s not CSS• watch out for escaping #{values}• be aware of inheritance• when you go back to CSS, don’t forget your
inheritance
![Page 99: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/99.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
codekit
![Page 100: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/100.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
TOPICS
• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links
![Page 101: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/101.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
useful links
![Page 102: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/102.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
learn more• http://sass-lang.com/• http://www.youtube.com/watch?
v=fbVD32w1oTo • https://twitter.com/teamsassdesign• https://twitter.com/scottkellum • http://www.slideshare.net/ginader/sass-
compass-and-the-new-tools-open-web-camp-iv
![Page 103: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/103.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
learn more• http://incident57.com/codekit/• http://compass-style.org/• http://thesassway.com/projects/sass-
twitter-bootstrap• http://foundation.zurb.com/• http://zengrids.com/• http://jaredhardy.com/sassy-buttons/
![Page 104: An Introduction to Sassy CSS](https://reader033.fdocuments.net/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/104.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
thank you!feedback, comments, links?
@irishstu