Sass (SCSS) and Compass Cheat Sheet

Sass (SCSS) and Compass Cheat Sheet

Because there isn’t one

First, a huge thank you to Hampton Catlin and Nathan Weizenbaum for giving us Sass.

As far as I know, there isn’t a Sass (SCSS) Cheat Sheet out there, and there should be. I am fairly certain that most people new to Sass and just getting into it have done plenty of searching for what they are trying to do, but find the actual help available lacking. There are very knowledgeable people out there that are willing to help,like Chris Eppstein and Derek Perez, but outside of those two, there are very few places to turn too. The documentation is ok, but I hate weeding through that thing. I want a cheat sheet that shows me how to do specific things. The problem I keep thinking about though is that you don’t just need the syntax, or a list of methods like jQuery, but actual small examples of how to write something. And just to make things interesting, let’s include Compass!

The real problem – I need help

I can’t do it alone, because I am a newbie. I can start it and add to it as I go, but someone more knowledgeable will have to provide the trickier stuff or just things that I may have missed. So, I am asking you to help me and leave a comment on what should be added. I’ll post it in code form below, and provide a pdf file that you can download below. The Compass part I will include in the pdf version.

Download File

/* Variable: */
$red: #ff0000;
 
.myClass {
color: $red;
}
 
/* !default: If a variable isn't given a value, it uses the one set for default */
$color: #000000;
$color: #ff0000 !default;
 
.myClass {
color: $color;
}
 
/* compiles to black - if color isn't defined, then it gets red */
.myClass {
color: #000000;
}
 
/* Mixin: Re-use whole chunks of CSS, properties or selectors */
@mixin myfont ($size, $weight, $family){
  font: {
    size: $size;
    weight: $weight;
    family: $family;
  }
}
 
.myClass {
@include font(18px, "bold", "Arial,Helvetica,sans-serif");
}
 
/* Nesting: Avoids repetition by nesting selectors within one another */
nav ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    display: inline;
    a {
       color: $red;
    }  
}
}
 
/* Nested Properties */
.myFont {
  font:{
    family: Arial;
    size: 14px;
    weight: bold;
  }
}
 
/* Selector Inheritance (Using @extend): Give a selector the styles of one,
PLUS any additional. This way you don't repeat classes. */
.myClass {
color: #ff0000;
margin: 10px;
}
.anotherClass {
@extend .myClass;
border: 1px #000 solid;
}
 
/* '&': Referencing Parent Selectors */
a {
  color: #ff0000;
  &:hover {
    color: #666666;
  } 
}
 
/* Operations: +, -, *, /, %*/
$width: 1000px;
.myClass {
  width: $width - 400px;
}
 
/* Interpolation: #{} */
$className: samcro;
$attr: background;
a.#{$className} { #{$attr}-color: #000000 }
 
/* compiles to */
a.samcro {
background-color: #000000;
}
 
/* Partials: Additional Sass/SCSS files you want to import but don't want
to compile into additional CSS files (meaning styles are imported into the
main .scss file) */
/* Just save the new file with an underscore in front of it: _nav.scss,
then in the main sass/scss file type - (NOTE - just found out you will get an error if you do not have it AFTER your declared variables and stuff) */
@import "nav";
 
/* @if, @elseif, @else */
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
 
/* @for - could really badass on lists if you needed them each to have
unique styles (@while works similar) */
@for $i from 1 through 3 {
  .myClass-#{$i} { width: 2px * $i; }
}
 
/* compiles to */
.myClass-1 {
  width: 2px; }
.myClass-2 {
  width: 4px; }
.myCass-3 {
  width: 6px; }

Sass Resources you should check out

That is the extent of what I know, a lot gathered from the Sass Reference page, some I knew, and some gathered from questions I’ve learned from asking around. Here is a list of places for you to go to, to learn more:

If you know more, let me know!

Help me help them

I would like some help with syntax changes as well (I’ve seen ‘+’ and ‘=’ for mixins and calls, but unsure if that works with SCSS). Let me know what you think, and PLEASE let me know what I can add so newbies can get all the basics in one place and have an easier time getting started using Sass. If you don’t, my house will be turned into a golf course and the Fratellis will get me.

Coupon Code: webmachine

Tags: ,

One Response to “Sass (SCSS) and Compass Cheat Sheet”

  1. Erik Phipps says:

    For your section on referencing parent selectors, perhaps you could add an example for selecting elements above the parent selector. For example, if you use conditional classes on the html tag to target IE, the scss would look like this:

    .ie7 & .container{width:200px}

    the CSS would look like this:

    .ie7 .parent .container{width:200px}

    anyway, thanks for the cheatsheet!

Leave a Reply