An Introduction to Sassy CSS

An Introduction to
Sassy CSS
Stewart Curry

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

Who is
This Guy?

Web Designer for 15 years or so
Table-based layouts & spacer gifs
CSS changed all that
SCSS is CSS only better
woop.ie - iteration, modules, themes, templates


past
simple


now
complicated


💬


design
everywhere



  


 📱  💻

SASS MAKES
CSS FUN AGAIN
www.sass-lang.com

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


TOPICS

• What’s Sass/SCSS?
• Installing Sass
• Variables
• Nesting
• Mixins
• Media Queries
• Partials
• Inheritance
• Gotchas
• Links


There
Will
be Code


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 ﬂexible
• it’s more manageable
• it’s got variables!


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


workﬂow
📁 css

📁 images

📁 scripts

📄 index.html


workﬂow
📁 css

📁 images

📁 sass

📁 scripts

📄 index.html


workﬂow
📁 css

📁 images

📁 sass

📄 style.scss
scripts
📁
📄 index.html


workﬂow

📄 ⚙ 📄
style.scss processor style.css


workﬂow
📁 css

📄 style.css
📁 images
📁 sass

📄 style.scss
📁 scripts

📄 index.html


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?

Install Ruby rubyinstaller.org
$ sudo gem install sass
$ sass --watch style.scss:style.css


http://incident57.com/codekit/


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


why variables rock
Change one variable and you change
it everywhere. Save hours of search &
replacing. Experiment with small
changes in margins & gutters. Reskin
with diﬀerent 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;


$primarycolor : red
$mainfont : “Open Sans...
$basetypesize : 1em

$variables
$margin : 16px

• use instead of a value
SCSS
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;
}
CSS


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


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

operations
SCSS
.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;
}
CSS


$basetypesize : 1em

escaping
• wrap with #{ }
• useful for paths

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

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


$margin : 16px

negatives
• minus symbols
• -64px -32px 0 16px
• top: -96px; right , left are 0; bottom is 16px
SCSS
.moveup   {
  margin:-$margin*4 -$margin*2 0 $margin;
}

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


$margin : 16px

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

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

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


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


why nesting rocks
Write 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

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


$margin : 16px

nest & indent
SCSS
nav   {
  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;
  }
  }
  }
}


$margin : 16px

nest & indent
CSS
nav {
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;
}


selectors
SCSS
em   {
  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;
}
CSS


&
@IRISHSTU
ampersand

AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

$primarycolor : #993333

& ampersand
• pulls the parent selector into the &
SCSS
#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; }
CSS


$primarycolor : #993333

ampersand &
• prepends before parent selector
SCSS
#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; }
CSS


ampersand &
• use with HTML body classes
SCSS
#browserwars   {
  border: 1px solid red;

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


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


$size : 16px

ampersand &
SCSS
$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

ampersand &
CSS
h1 {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.wf-active h1 {
  font-family: "proxima-nova-extra-condensed", Arial, sans-serif;
  font-size: 24px;
}


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


why mixins rock
Reduce 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
SCSS
.fancybox   {
  width: 100px;
  @include roundcorner(10);
}

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


$grid : 20px
$lineheight : 1em

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

type
CSS
h1 {
  font-size: 35px;
  font-size: 2.188rem;
  line-height: 40px;
  line-height: 2.5rem;
  margin: 0 0 20px 0;
  }


@each
SCSS
$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!
CSS
.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
SCSS
@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
CSS
#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
SCSS
@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);
}


@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


why
media queries rock
Make 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
SCSS
.sidebar {
  float: right;
  width: 300px;
  @media screen and (max-width: 480px) {
  float: none;
  width: 100%;
  }
}

.sidebar {
  float: right;
  width: 300px;
}
  .sidebar {
  float: none;
  width: 100%;
  }
}
CSS


1
2
#logo #menu

4
3

#leftnav

#content

5
#footer


2 #menu

1 #logo

#content
4

3 #leftnav

5 #footer


@media
SCSS
@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
SCSS

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


2 #menu 1

1 #logo 2

#content
4 3

3 #leftnav 4

5 #footer 5


3.2
@IRISHSTU
coming soon

AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

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

• variables in queries
• Sass 3.2 alpha
• other cool stuﬀ


@media
You can’t use this yet - watch https://github.com/nex3/sass/
SCSS
@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


_partials
“ partials are snippets of scss
that are saved into ﬁles meant
to be imported. They begin
with an underscore and don’t
get compiled.


why partials rock
Include ﬁles for CSS. Make your ﬁles
more managable by breaking them
into discreet external modules.


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


workﬂow

📄 ⚙ 📄
style.scss processor style.css

📄 📄 📄
_reset.scss _grid.scss _type.scss


examples
• Separate partials for:

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


@extend
“ The @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 rocks
Lets 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
SCSS
.error {
  border: 1px #f00;
  background: #fdd;
}

.badError {
  @extend .error;
  border-width: 3px;
}

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

.badError {
  border-width: 3px;
}
CSS


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


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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie An Introduction to Sassy CSS

Ähnlich wie An Introduction to Sassy CSS (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)