an introduction to sassy css

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

An Introduction toSassy CSSStewart Curry


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


pastsimple


nowcomplicated


💬


designeverywhere


📱 💻


SASS MAKESCSS FUN AGAINwww.sass-lang.com

Basically, CSS made flexible & awesome by adding in cool features.

http://www.sass-lang.com



TOPICS

• What’s Sass/SCSS?

• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


ThereWill

be Code


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

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

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html




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;}


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!


so you can• experiment more• make global changes quickly• make reusable modules• use frameworks more effectively• handle RWD neatly• have less cluttered code


workflow📁 css

📁 images

📁 scripts

📄 index.html


workflow📁 css

📁 images

📁 scripts

📄 index.html

📁 sass


workflow📁 css

📁 images

📁 scripts

📄 index.html

📁 sass

📄 style.scss


workflow

📄style.scss

⚙processor

📄style.css


workflow📁 css

📁 images

📁 scripts

📄 index.html

📁 sass

📄 style.scss

📄 style.css


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).


Y U NO

USE LESS.JS?


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


Install Ruby rubyinstaller.org

$ sudo gem install sass

$ sass --watch style.scss:style.css

http://rubyinstaller.org

http://rubyinstaller.org


http://incident57.com/codekit/




TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

$variablesvariables allow you to use the same value in multiple places, as well as perform basic maths and functions.


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...


$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;


$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


operations• maths: + - / *• color: darken, lighten, saturation, opacity• http://sass-lang.com/docs/yardoc/Sass/

Script/Functions.html

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html





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


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


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


negatives• wrap in brackets• (-$variable*value)

.moveup { margin:(-$margin*4) (-$margin*2) 0 $margin; }

SCSS

.moveup { margin: -64px -32px 0 16px;}

CSS

$margin : 16px


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

nestingSass avoids repetition by nesting selectors within one another. The same thing works with properties. www.sass-lang.com




why nesting rocksWrite a hell of a lot less CSS. Avoid repetion. Use indentation to quickly scan and see relationships. Use ampersands for awesomeness.


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


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


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


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


&ampersand


& 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


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


ampersand &• use with HTML body classes

#browserwars { border: 1px solid red; .ie8 &, .ie9 & { border: 1px solid blue; } .ie10 & { border: 1px solid green; }}

SCSS



#browserwars { border: 1px solid red;}.ie8 #browserwars, .ie9 #browserwars { border: 1px solid blue;}.ie10 #browserwars { border: 1px solid green;}

CSS



$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



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


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

@mixinsmixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. www.sass-lang.com




why mixins rockReduce massive chunks of CSS into reusable includes that you can use over and over again.


http://compass-style.org/




@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;}


@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


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;}


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));


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);}


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


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


@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


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


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


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

mailto:[email protected]

mailto:[email protected]


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


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

@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




whymedia queries rockMake responsive layouts. Associate media queries more closley with the element you are changeing.


@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


@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


#logo #menu

#content

#leftnav

#footer

12

34

5


#logo

#menu

#content

#leftnav

#footer

1

2

3

4

5


@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


@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


#logo

#menu

#content

#leftnav

#footer

1

2

3

4

5

1

2

3

4

5


3.2coming soon


@media

• variables in queries• Sass 3.2 alpha• other cool stuff

You can’t use this yet - watch https://github.com/nex3/sass/


@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

http://thesassway.com/intermediate/responsive-web-design-part-2#

http://thesassway.com/intermediate/responsive-web-design-part-2#


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

_partialspartials are snippets of scss that are saved into files meant to be imported. They begin with an underscore and don’t get compiled.


why partials rockInclude files for CSS. Make your files more managable by breaking them into discreet external modules.


_partials• filename starts with an underscore• e.g. “_grid.scss”• import it into your .scss file • @import "grid";• save on HTTP requests• better structure


workflow

📄_reset.scss

📄_grid.scss

📄_type.scss

📄style.scss

⚙processor

📄style.css


examples• Separate partials for:

• grids, typography, colours, forms, tables• mixins & variables• different post types for blogs• adverts• media queries• site sub-sections


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


“

@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

http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend

http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend


why extend rocksLets you add styles from one selector to another, as well as its own styles.


@extend• nest @extend .classname;• goes inside another class• don’t have to use multiple classes• association is in CSS not HTML


@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


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


gotchas!A few things to watch out for when working with SCSS.


/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


codekit


TOPICS


• Installing Sass

• Variables

• Nesting

• Mixins

• Media Queries

• Partials

• Inheritance

• Gotchas

• Links


useful links


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

http://sass-lang.com

http://sass-lang.com

http://www.youtube.com/watch?v=fbVD32w1oTo




https://twitter.com/teamsassdesign

https://twitter.com/teamsassdesign

https://twitter.com/scottkellum

https://twitter.com/scottkellum

http://www.slideshare.net/ginader/sass-compass-and-the-new-tools-open-web-camp-iv







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/



http://compass-style.org




http://thesassway.com/projects/sass-twitter-bootstrap




http://foundation.zurb.com

http://foundation.zurb.com

http://zengrids.com

http://zengrids.com

http://jaredhardy.com/sassy-buttons/

http://jaredhardy.com/sassy-buttons/


thank you!feedback, comments, links?

@irishstu

an introduction to sassy css

Technology

css lefolder

normal css

sass variables

variables variables

attitude sass

stylesheets sass

variables rockchange

open sans

￼an introduction to sassy css

an introduction to sassy css