mixin

/* Write your SCSS code below. */
@mixin button ($color,$size)
{
background:$color;
width:$size;
height:$size/2;
}

.menu_button{
@include button(#369,50px)
}

/* Write your SCSS code below. */
%animals {
    background: #369;
}
.animals {
    @extend %animals;
}
.dogs {
    @extend %animals;
}
%super_link {
  font-weight: bold;
  color: red;          
}

/* Write your SCSS code below. */
@function double ($input){
   @return $input * 2 ;
   }

div {
  font-size: unquote(double(5) + "px");
}

/* Write your SCSS code below. */
@media screen and (orientation:landscape) {
    img {
    width: 360px;
  }
}

ul#menu {
    li {
    @media screen and (max-width: 500px) {
        text-align: center;
    }
  }
}

@mixin cars($make, $color) {
        .#{$make} {
            border: 1px solid black;
        background-image: url("#{$color}.png");
   }
}

$time: morning;
a {
  @if $time == morning {
    color: red;
  } @else if $time == afternoon {
    color: blue;
  } @else {
    color: grey;
  }
}


select 1 to 3

@for $i from 1 through 3 { .item_#{$i} { width: $i * 100px; } }

@each $color in red, blue, green {
  .#{$color}_box {
    background-color: $color;
  }

@each $num in 1, 2, 3, 4, 5 { // a list of numbers
  // your code here
}

@each $num in 1 2 3 4 5 { // also a list of numbers
  // your code here
}

@for $num from 1 through 5 { // a range
  // your code here
}

@for $num from 1 to 6 { // also a range, and equivalent to the one above
  // your code here
}
}