[Sass] Variable -- Ex

VARIABLES

The color hex value #797979 has been popping up quite a bit throughout our stylesheet. Let's store the color in a variable and replace all instances of it with that variable.

$base-color: #797979;

.surveyor {
  border: 1px solid $base-color;
  padding: 20px;
}
.surveyor h2 {
  color: $base-color;
  font-size: 18px;
}

.notice {
  background: yellow;
  border: 5px solid $base-color;
  padding: 10px;
}

 

 

THE DEFAULT FLAG

A coworker has been asking to see our modals partial for another project. Before we hand it over, let's clean up the repeated padding declarations to use a variable. To keep it modular, that variable definition should ensure it doesn't override a variable of the same name set elsewhere.

.modal {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  padding: 10px;
}
.modal-title {
  border-bottom: 1px solid #ccc;
  font-size: 24px;
  padding: 10px;
}
.modal-action {
  background: purple;
  display: block;
  padding: 10px;
}

Answer:

$pand-all: 10px !default;

.modal {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  padding: $pand-all;
}
.modal-title {
  border-bottom: 1px solid #ccc;
  font-size: 24px;
  padding: $pand-all;
}
.modal-action {
  background: purple;
  display: block;
  padding: $pand-all;
}

 

LISTS

A last-minute change from the designer just came through: the padding value for the various modal components should be 20px 10px 15px instead of 10px. Knowing we can have lists stored in variables, alter $modal-padding to reflect this revision.

$modal-padding: 10px !default;

.modal {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  padding: $modal-padding;
}
.modal-title {
  border-bottom: 1px solid #ccc;
  font-size: 24px;
  padding: $modal-padding;
}
.modal-action {
  background: purple;
  display: block;
  padding: $modal-padding;
}

Answer:

$modal-padding: 20px 10px 15px !default;


.modal {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  padding: $modal-padding;
}
.modal-title {
  border-bottom: 1px solid #ccc;
  font-size: 24px;
  padding: $modal-padding;
}
.modal-action {
  background: purple;
  display: block;
  padding: $modal-padding;
}

 

VARIABLE NESTING

Our $font-base variable comes in handy when setting the font family in body, but we're getting an error when trying to use it elsewhere. Refactor the styles below so that $font-base is usable throughout.

body {
  $font-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff;
  font: normal 16px/1.5 $font-base;
  margin: 0;
  padding: 0;
}
.blueprint {
  font: bold 24px/1.3 Georgia, serif;
  text-align: center;
  span {
    font-family: $font-base;
  }
}

Answer:

$font-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
body {
  font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff;
  font: normal 16px/1.5 $font-base;
  margin: 0;
  padding: 0;
}
.blueprint {
  font: bold 24px/1.3 Georgia, serif;
  text-align: center;
  span {
    font-family: $font-base;
  }
}

 

INTERPOLATION

We'd like to add a simple way to set which side borders appear on. Create a variable with the current value (left) and interpolate that value into each border property occurance.

.girder {
  border-left: 4px solid #ccc;
  h2 {
    font-size: 24px;
  }
}
.notice {
  border-left: 8px solid #797979;
  a {
    color: #222;
  }
}

Answer:

$trend: left; 

.girder {
  border-#{$trend}: 4px solid #ccc;
  h2 {
    font-size: 24px;
  }
}
.notice {
  border-#{$trend}: 8px solid #797979;
  a {
    color: #222;
  }
}