[Sass] Level 5: Directive -- Ex

FUNCTIONS

We need to find the height of video containers given a width and a 16:9 aspect ratio. To avoid doing the math manually each time, create a function called aspect that takes a $width argument and returns the commented-out formula. Then, use it to set the height on .intro given a width of500px.

// $width * 9 / 16
@function aspect($width){
  @return $width * 9 / 16;
  }

.intro {
  background: #000;
  width: 500px;
  height: aspect(500px);
}

 

IF

A number stored in $size is being used to set the font size for our .switch. Based on $size, create a conditional statement with @if inside .switch: if $size is less than or equal to 16px,font-family: Arial, sans-serif; is output. Otherwise, font-family: Helvetica, sans-serif; is output.

$size: 18px;

.switch {
  font-size: $size;
  @if $size <= 16px{
    font-family: Arial, sans-serif
    }
  @else{
    font-family: Helvetica, sans-serif;
    }
}

 

ELSE IF

On the same conditional, use @else if to add a condition between the existing @if and @else: if $size is less than or equal to 24px, font-family: Georgia, serif; is output.

$size: 18px;

.switch {
  font-size: $size;
  @if $size <= 16px {
    font-family: Arial, sans-serif;
  }@else if $size <= 24px {
      font-family: Georgia, serif;
  } @else {
    font-family: Helvetica, sans-serif;
  }
}

 

MIXIN' IN

This @if directive could be useful outside .switch - let's expand the scope. Move everything inside of .switch to a mixin called family that takes an argument of $size. Remove the existing$size: 18px; line, then call the mixin from within .switch, passing 18px as an argument.

$size: 18px;

.switch {
  font-size: $size;
  @if $size <= 16px {
    font-family: Arial, sans-serif;
  } @else if $size <= 24px {
    font-family: Georgia, serif;
  } @else {
    font-family: Helvetica, sans-serif;
  }
}

Answer:

@mixin family($size){
    font-size: $size;
  @if $size <= 16px {
    font-family: Arial, sans-serif;
  } @else if $size <= 24px {
    font-family: Georgia, serif;
  } @else {
    font-family: Helvetica, sans-serif;
  }
  }

.switch {
@include family(18px);
}

 

EACH

Someone left us a to-do above this segment - we can clean it up for future expansion by generating the selectors and background with @each. Start by creating a list variable named$tools to store socket, wrench, and bolt.

// TODO: simplify with @each

.tool-socket {
  background: url('socket.png') no-repeat;
}
.tool-wrench {
  background: url('wrench.png') no-repeat;
}
.tool-bolt {
  background: url('bolt.png') no-repeat;
}

Answer:

// TODO: simplify with @each
$tools: socket, wrench, bolt;

@each $tool in $tools{
  .tool-#{$tool}{
    background: url('#{$tool}.png') no-repeat;
    }
  }

 

WHILE

Technically, it works - but this @for with a nested @if is more complicated than necessary to target odd numbers from 1 to 7. Remove the @if statement and refactor the @for using @whileinstead to achieve the same result. Note: if you aren't familiar with the % operator, don't worry - it's covered in the next level.

@for $i from 1 through 7 {
  @if $i % 2 != 0 {
    .row-#{$i} {
      background: #ccc;
      height: $i * 10px;
    }
  }
}

Answer:

    $i : 1;
  @while $i <= 7{
      .row-#{$i} {
        background: #ccc;
        height: $i * 10px;
      }  
        $i: $i + 2;
    }