Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.mpgGraph {
    $block: mpgGraph;

    overflow: hidden;
    margin: 20px auto;
    max-width: 500;
    min-height: 345px;

    &--week {

        .#{mpgGraph}__barWrapper {
           width: 13.6%;
        }
        .bar {

            &__inner {

                &:after {
                    background-color: #78c987; // Old browsers
                    background-image:linear-gradient(top,  #78c987 0%,#61c177 1%,#60bd76 8%,#5bbb73 11%,#5cbc75 12%,#5aba73 13%,#57b770 17%,#53b471 21%,#41a567 37%,#3fa367 40%,#2e955e 52%,#2b915f 56%,#0f7c52 79%,#06764e 89%,#00734c 99%,#005f37 100%);
                    margin-left: -13px;
                    width: 27px;
                }
            }
            &__value {
                font-size: 24px;
            }
        }
    }
    &--year {

        .#{mpgGraph}__barWrapper {
            width: 23px;
        }
        .bar {

            &__inner {

                &:after {
                    background-color: red;
                    margin-left: -8px;
                    width: 15px;
                }
            }
            &__value {
                font-size: 18px;
            }
        }
    }
    &__barWrapper {
        background-color: white;
        border-bottom: 1px solid #d5d5d5;
        float: left;
        height: 345px;
        margin-right: 2px;
        overflow: hidden;
        padding-top: 20px;
        position: relative;
        text-align: center;

        &:nth-child(2n) {
            background-color: #fdfdfd;
        }
        &--noData {

            .bar {

                &__inner {
                    transform: translateY(86%);

                    &:after {
                        background: gray;
                        margin-left: -2px;
                        width: 5px;
                    }
                }
            }
        }
    }
    .mpgGraphLoader {
        display: block;
        margin: 20% auto 0;
    }
}

.reminderItems {
    $block: "reminderItems";
    position: relative;
    
    &--history {

        .#{$block}__header {
            background-color: #eee;
        }
    }
    &__header {
        line-height: 1;
        background-color: #f5f5f5;
        color: #000;
        padding: 23px 30px 25px 90px;
        overflow: hidden;
        position: relative;
    }
    &__title {
        display: inline-block;
    }
    &--emergency {
      
        &__name {
            overflow: hidden;
            margin-bottom: 20px;
        }

        .saveBtn {
            margin-left: 0;
        }
    }
}

SassMeister-output.css

.mpgGraph {
  overflow: hidden;
  margin: 20px auto;
  max-width: 500;
  min-height: 345px;
}
.mpgGraph--week .mpgGraph__barWrapper {
  width: 13.6%;
}
.mpgGraph--week .bar__inner:after {
  background-color: #78c987;
  background-image: linear-gradient(top, #78c987 0%, #61c177 1%, #60bd76 8%, #5bbb73 11%, #5cbc75 12%, #5aba73 13%, #57b770 17%, #53b471 21%, #41a567 37%, #3fa367 40%, #2e955e 52%, #2b915f 56%, #0f7c52 79%, #06764e 89%, #00734c 99%, #005f37 100%);
  margin-left: -13px;
  width: 27px;
}
.mpgGraph--week .bar__value {
  font-size: 24px;
}
.mpgGraph--year .mpgGraph__barWrapper {
  width: 23px;
}
.mpgGraph--year .bar__inner:after {
  background-color: red;
  margin-left: -8px;
  width: 15px;
}
.mpgGraph--year .bar__value {
  font-size: 18px;
}
.mpgGraph__barWrapper {
  background-color: white;
  border-bottom: 1px solid #d5d5d5;
  float: left;
  height: 345px;
  margin-right: 2px;
  overflow: hidden;
  padding-top: 20px;
  position: relative;
  text-align: center;
}
.mpgGraph__barWrapper:nth-child(2n) {
  background-color: #fdfdfd;
}
.mpgGraph__barWrapper--noData .bar__inner {
  transform: translateY(86%);
}
.mpgGraph__barWrapper--noData .bar__inner:after {
  background: gray;
  margin-left: -2px;
  width: 5px;
}
.mpgGraph .mpgGraphLoader {
  display: block;
  margin: 20% auto 0;
}

.reminderItems {
  position: relative;
}
.reminderItems--history .reminderItems__header {
  background-color: #eee;
}
.reminderItems__header {
  line-height: 1;
  background-color: #f5f5f5;
  color: #000;
  padding: 23px 30px 25px 90px;
  overflow: hidden;
  position: relative;
}
.reminderItems__title {
  display: inline-block;
}
.reminderItems--emergency__name {
  overflow: hidden;
  margin-bottom: 20px;
}
.reminderItems--emergency .saveBtn {
  margin-left: 0;
}