[Sass] Level 6: MATH + COLOR -- Ex

ARITHMETIC I

To ensure consistent spacing between columns, our stylesheet has a reusable $gutter variable. Subtract the width values in .factory and .highrise by $gutter to account for the margin.

$gutter: 20px;

.factory {
  background: #fff;
  margin-right: $gutter;
  width: 600px;
}
.highrise {
  background: #797979;
  margin-right: $gutter;
  width: 300px;
}

Answer:

$gutter: 20px;

.factory {
  background: #fff;
  margin-right: $gutter;
  width: 600px-$gutter;
}
.highrise {
  background: #797979;
  margin-right: $gutter;
  width: 300px-$gutter;
}

 

ARITHMETIC II

Your coworker has been attempting to set the font size of span elements inside .sign to half the.sign font size, without success. Knowing what you do about triggering division, utilize parentheses to fix the problem.

.sign {
  font-size: 3.75em;
  font-weight: bold;
  padding: 20px 40px;
  span {
    font-size: 3.75em / 2;
  }
}

Answer:

.sign {
  font-size: 3.75em;
  font-weight: bold;
  padding: 20px 40px;
  span {
    font-size: (3.75em /2);
  }
}

 

ARITHMETIC III

3.75em has been recurring throughout our stylesheet, so let's move it to a variable and use that variable where possible. Remember: utilizing a variable also triggers division, which removes the need for our parentheses.

.sign {
  font-size: 3.75em;
  font-weight: bold;
  padding: 20px 40px;
  span {
    font-size: (3.75em / 2);
  }
}

Answer:

$base-size: 3.75em;

.sign {
  font-size: $base-size;
  font-weight: bold;
  padding: 20px 40px;
  span {
    font-size: $base-size / 2;
  }
}

 

CONCATENATION

Our @if directive performs a bit of string concatenation, but we'd prefer if the output value had quotes around it. Tweak the directive to ensure this is the case.

$theme: modern;
$font: 'serif';

@if $theme == modern {
  $font: sans- + $font;
}

.sign {
  font-family: $font;
}

Answer:

$theme: modern;
$font: 'serif';

@if $theme == modern {
  $font: "sans-" + $font;
}

.sign {
  font-family: $font;
}

 

NUMBER FUNCTIONS I

On reflection, it'd be nice to have a cleaner font size to work with after performing arithmetic inside our span. Use the appropriate built-in function to round the span's font size to the nearest whole number.

$size: 3.75em;

.sign {
  font-size: 3.75em;
  font-weight: bold;
  padding: 20px 40px;
  span {
    font-size: $size / 2;
  }
}

Answer:

$size: 3.75em;

.sign {
  font-size: 3.75em;
  font-weight: bold;
  padding: 20px 40px;
  span {
    font-size: round($size / 2);
  }
}

 

NUMBER FUNCTIONS II

Our .factory and .highrise declarations are lacking responsiveness: using the target / context formula, the given $context variable, and percentage(), give each declaration a fluid width. No need to refactor this into a separate function, just add your percentage() calls within.factory and .highrise.

$context: 960px;

.factory {
  background: #fff;
  width: 600px;
}
.highrise {
  background: #797979;
  width: 300px;
}

Answer:

$context: 960px;

.factory {
  background: #fff;
  width: percentage(600px / $context);
}
.highrise {
  background: #797979;
  width: percentage(300px / $context);
}

 

COLOR SHORTHAND

We've stored a hex color value in $color-base, but the rgb equivalent (121,121,121) is being used in .modal. Use the shorthand version of rgba() to make use of the already-available$color-base value.

$color-base: #797979;

.modal {
  background: rgba(121,121,121,0.75);
  border: 1px solid $color-base;
  padding: 20px;
}

Answer:

$color-base: #797979;

.modal {
  background: rgba($color-base,0.75);
  border: 1px solid $color-base;
  padding: 20px;
}

 

COLOR FUNCTIONS I

Anchor elements are currently missing a hover state - add one via nesting which sets a color15% lighter than $color-link.

$color-link: #3097b4;

a {
  color: $color-link;
  text-decoration: underline;
}

Answer:

$color-link: #3097b4;

a {
  color: $color-link;
  text-decoration: underline;
  &:hover{
        color: lighten($color-link, 15%);
    }
}

 

 

COLOR FUNCTIONS II

Our newly-added hover state isn't bad, but we'd like to up the intensity a bit. Keeping the lighter value, increase the saturation by 20%. Note: look to the :active state to see an example of nested color functions.

$color-link: #3097b4;

a {
  color: $color-link;
  text-decoration: underline;
  &:hover {
    color: lighten($color-link, 15%);
  }
  &:active {
    color: desaturate(darken($color-link, 15%), 25%);
  }
}

Answer:

$color-link: #3097b4;

a {
  color: $color-link;
  text-decoration: underline;
  &:hover {
    color: saturate(lighten($color-link, 15%), 20%);
  }
  &:active {
    color: desaturate(darken($color-link, 15%), 25%);
  }
}

 

COLOR FUNCTIONS III

Unfortunately, our hover state just isn't obvious enough. Remove the saturate() and lighten()additions, and use a color function to invert the value.

$color-link: #3097b4;

a {
  color: $color-link;
  text-decoration: underline;
  &:hover {
    color: saturate(lighten($color-link, 15%), 20%);
  }
  &:active {
    color: desaturate(darken($color-link, 15%), 25%);
  }
}

Answer:

$color-link: #3097b4;

a {
  color: $color-link;
  text-decoration: underline;
  &:hover {
    color: invert($color-link);
  }
  &:active {
    color: desaturate(darken($color-link, 15%), 25%);
  }
}

 

Read More: http://sass-lang.com/documentation/Sass/Script/Functions.html