Optional: Getting Started with Sass

Get started with Sass!  Use the online Sass processor at www.sassmeister.com to process the following document:

/* =============================== */
/* Harvard Color Palette */
/* crimson */
$crimson    : rgb(165,28,48);
/* core color palette */
$ink        : rgb(30,30,30);
$mortar     : rgb(140,129,121);
$parchment  : rgb(243,243,241);
$slate      : rgb(137,150,160);
$shade      : rgb(186,197,198);
/* accent  colors */
$indigo     : rgb(41,51,82);
$bluebonnet : rgb(78,132,196);
$ivy        : rgb(82,133,76);
$pear       : rgb(195,215,164);
$saffron    : rgb(232,125,30);
$creme      : rgb(244,237,202);
$gold       : rgb(196,150,26);
$lemon      : rgb(255,219,109);
/* =============================== */

$font-stack : Times New Roman, serif;

$color: $ink;
$header-color: $crimson;
$background-color-main : $parchment;

body {
    font: 100% $font-stack;
    color: $color;
    background-color: $background-color-main;
}

Do two things:

1. Process the above Sass content on www.sassmeister.com
2. Add a rule for h1, h2, h3, h4, h5, h6 to set the color to the value of the $header-colorThen process that!

Note with this Sass file, we are defining all the colors in the Harvard palette, and then using those color variables to define more semantic variables, such as "$header-color". The reason for this is that the colors are very specific in terms of RGB values, but we may want to use them differently -- so we define the colors, and then define variables that are meaningful to our page.

Here's what you might get

Note that I've removed the comments

1. body {
     font: 100% Times New Roman, serif;
     color: #1e1e1e;
     background-color: #f3f3f1;
   }

2. body {
     font: 100% Times New Roman, serif;
     color: #1e1e1e;
     background-color: #f3f3f1;
   }
   
   h1, h2, h3, h4, h5, h6 {
     color: #a51c30;
   }