SCSS cheat sheet

scss-notes.scss

////////////////////
// IMPORTS
////////////////////
@import 'variables'; //imports _variables.scss
@import 'mixins';

////////////////////
// VARIABLES
////////////////////
$dmn-blue: #454545;

////////////////////
// DARKEN/LIGHTEN
////////////////////
$dmn-light-blue: lighten($dmn-blue, 30%);
$dmn-dark-blue: lighten($dmn-blue, 30%);

////////////////////
// NESTING
////////////////////
// styles
h1 {
  padding: 15px 0;
  line-height: 15px;
  // Converts to font-size: 54px; etc...
  // Works for border-, text-, background-...
  font: {
    size: 54px;
    family: Jubliat, Georgia, serif;
    weight: 700;
  }
}
// selectors
li {
  font-weight: 700;
  color: grey;
  // Converts to separate li:hover
  &:hover {
    color: white;
    background-color: red;
  }
}

////////////////////
// MIXINS
////////////////////
// ARGUMENTS: Pass in argument color (optional)
@mixin body-copy-style($color) {
  font: {
    family: Helvetica, sans-serif;
    size: 12px;
    color: $color;
  }
}
// Takes above and inserts into below
section.main{
  @include body-copy-style(#c63); // Send color in as well
  font-weight: 700;
}
// BROWSER PREFIXES EXAMPLE: For browser prefixes (Use for gradients too)
@mixin rounded($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}
.container-box{
  @include rounded(3px);
}


////////////////////
// @EXTENDS
////////////////////
???

////////////////////
// MEDIA QUERIES
////////////////////
$width-small: 500px;
$width-medium: 800px;
$width-large: 1200px;


section.main{
  font-size: 16px;
  line-height: 1.4;
  @media screen and (max-width: $width-large) {
    float: left;
    width: 65%;
  }
  @media screen and (max-width: $width-medium) {
    float: none;
    width: auto;
  }
  @media screen and (max-width: $width-small) {
    font-size: 12px;
    line-height: 1.4;
  }