Upload
stewart-curry
View
134
Download
1
Tags:
Embed Size (px)
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.
Citation preview
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
An Introduction toSassy CSSStewart Curry
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
pastsimple
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
nowcomplicated
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
💬
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
designeverywhere
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
📱 💻
@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.
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
ThereWill
be Code
@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
@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
@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;}
@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!
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
📁 sass
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
📁 sass
📄 style.scss
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow
📄style.scss
⚙processor
📄style.css
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow📁 css
📁 images
📁 scripts
📄 index.html
📁 sass
📄 style.scss
📄 style.css
@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).
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
Y U NO
USE LESS.JS?
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
Install Ruby rubyinstaller.org
$ sudo gem install sass
$ sass --watch style.scss:style.css
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
http://incident57.com/codekit/
@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
@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.
@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...
@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;
@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
@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
@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
@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
@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
@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
@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
@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
@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.
@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
@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
@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
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
&ersand
@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
@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
@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
@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
@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
@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
@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
@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
@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.
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
http://compass-style.org/
@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;}
@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
@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;}
@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));
@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);}
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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.
@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
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
#logo #menu
#content
#leftnav
#footer
12
34
5
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
#logo
#menu
#content
#leftnav
#footer
1
2
3
4
5
@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
@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
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
3.2coming soon
@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/
@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
@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
@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.
@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.
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
workflow
📄_reset.scss
📄_grid.scss
📄_type.scss
📄style.scss
⚙processor
📄style.css
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@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
@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
@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
@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.
@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
@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
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
gotchas!A few things to watch out for when working with SCSS.
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
codekit
@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
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
useful links
@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
@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/
@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
thank you!feedback, comments, links?
@irishstu