an introduction to sassy css
DESCRIPTION
CSS is a fantastic language for making beautiful websites, but sometimes it can be a bit, well, clunky. Sassy CSS (SCSS) makes it fun again by extending CSS and adding great features such as variables, mixins, nesting and much more. In this talk I run through a beginner's guide to SCSS, show you how to get started and explain the basic features with lots of code examples. You'll be able to build faster, experiment more, and spend less time typing and more time creating.TRANSCRIPT
![Page 1: An Introduction to Sassy CSS](https://reader033.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/reader033/viewer/2022051412/54c8264c4a79596e068b45a8/html5/thumbnails/104.jpg)
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
thank you!feedback, comments, links?
@irishstu