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.

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

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

h1 { color: red; font-family: "Open Sans", Arial, Sans-Serif; font-size: 1em; margin: 0 0 16px 0;}

$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

operations.island { background: darken($primarycolor,10%); width: $column*4; margin: $margin*2 $margin/2 $margin+20 $margin; padding: $margin*0.25;}

.island { background: #cc0000; width: 160px; margin: 32px 8px 36px 16px; padding: 4px;}

$primarycolor : red$column : 40px$margin : 16px

escaping• wrap with #{ }• useful for paths

p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; }

p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif; }

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

.moveup { margin: -96px 0 16px;}

$margin : 16px

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

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

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

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

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

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

$mainfont : “Open Sans...$margin : 16px

selectorsem { font: { family: Georgia, Serif; style: normal; weight: bold; variant: small-caps; }}

em { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps;}

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

#fancybox li a.fancy:link { color: #993333; }#fancybox li a.fancy:visited { color: #4d1919; }#fancybox li a.fancy:hover { color: #bf4040; }

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

#fancybox li a.fancy:link { color: #993333; }#fancybox li a.fancy:hover { color: #bf4040; }body#checkout #fancybox li a.fancy { border: 1px solid #993333; }

$primarycolor : #993333

ampersand &• use with HTML body classes

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

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

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

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

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

.fancybox { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

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

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

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

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

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("bgimage@2x.png"); } }

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

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

.sidebar { float: right; width: 300px;}@media screen and (max-width: 480px) { .sidebar { float: none; width: 100%; }}

#logo #menu

#content

#leftnav

#footer

#content

#leftnav

#footer

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

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

#content

#leftnav

#footer

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

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

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

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

.error, .badError { border: 1px #f00; background: #fdd;}

.badError { border-width: 3px;}

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

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/

thank you!feedback, comments, links?

@irishstu

an introduction to sassy css

css lefolder

normal css

sass variables

variables variables

attitude sass

stylesheets sass

variables rockchange

open sans

Technology

sassy catálogo

css introduction

introduction to...

01 introduction to css

an introduction to css

complexity metrics for sassy cascading style sheets · 1....

multimedia&css introduction

introducing css introduction to css - stanford...

html&css 3 - introduction to css

introduction to css preprocessors

basic css introduction

css styling introduction - ucg.ac.me › skladiste ›...

introduction to css

sassy scheduler

topic 03 : introduction to css

sensorveiledning · hva er sass, og hvordan skiller dette...

1 css introduction

introduction to cold sassy tree 2012 with notes

introduction to css - stanford...

introduction to css - university of babylon › eprints ›...

￼an introduction to sassy css

an introduction to sassy css