An Introduction to Sassy CSS
-
Upload
stewart-curry -
Category
Technology
-
view
114 -
download
1
description
Transcript of An Introduction to Sassy CSS
@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