css_for_n00bs_demo.scss

css_demo.scss

// Imports  /////////////////////////////////

@import "partials/reset";
@import "partials/clearfix";

// Really ugly styles /////////////////////////////////

body{
  background-color: red;
  font-size: 40px;
}

h1{
  color: pink;
  border: 3px dashed pink;
}

p{
  color: white;
  border: 3px dashed white;
}

// CSS /////////////////////////////////

body{
  background-color: red;
}

h1{
  color: pink;
}

// medium up
@media only screen and (min-width: 600px){
  body{
    background-color:green;
  }
  h1{
    color: yellow;
  }
}

// large up
@media only screen and (min-width: 900px){
  body{
    background-color:blue;
  }
  h1{
    color: white;
  }
}

// SCSS /////////////////////////////////
// Make it dryer, doing nesting, inline media queries

body{
  background-color: red;

  @media only screen and (min-width: 600px){
    background-color:green;
  }

  @media only screen and (min-width: 900px){
    background-color:blue;
  }
}

h1{
  color: pink;

  @media only screen and (min-width: 600px){
    color:yellow;
  }

  @media only screen and (min-width: 900px){
    color:white;
  }
}

// SCSS /////////////////////////////////
// Make it dryer, inline media queries with variables

$medium-up: "only screen and (min-width: 600px)";
$large-up: "only screen and (min-width: 900px)";

body{
  background-color: red;

  @media #{$medium-up}{
    background-color:green;
  }

  @media #{$large-up}{
    background-color:blue;
  }
}

h1{
  color: pink;

  @media #{$medium-up}{
    color:yellow;
  }

  @media #{$large-up}{
    color:white;
  }
}