Generated by SassMeister.com.

SassMeister-input-HTML.html

  <footer class="footer" role="contentinfo">
      <div class="footer-inner layout-constrain">
        <div class="footer-row footer-row__top">
          <div class="footer-item footer-logo"><a href="<?php echo home_url(); ?>" class="sitename"><img alt="Science Philanthropy Alliance" src="<?php echo get_template_directory_uri() . '/images/footer-logo.png';?>"/></a></div>
          <div class="footer-item footer-menu--primary"><?php gesso_nav('primary'); ?></div>
          <div class="footer-item footer-menu--secondary"><?php gesso_nav('footer-secondary'); ?></div>
          <div class="footer-social">
            <span>
              <a href="https://www.facebook.com/SciPhil.org"><i class="fa fa-facebook"></i></a>
            </span>
            <span>
              <a href="https://www.facebook.com/SciPhil.org"><i class="fa fa-twitter"></i></a>
            </span>
          </div>
        </div>
      </div>
        <div class="footer-row footer-row__bottom">
          <div class="footer-inner layout-constrain"><div class="footer-item footer-copyright"><h6>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></h6></div></div>
        </div>
  </footer>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "breakpoint";
@import "breakpoint";
$dark-green: #687711;
$green: #b7d415;
$navy: #084354;
$blue: #0f7e9e;
$dark-red: #9f1108;
$red: #ef4136;
$charcoal: #283d41;
$dark-grey: #6a8185;
$med-grey: #939fa1;
$lt-grey: #EEEEEE;
$white: #FFF;
// @file
// Styles for the site footer.
.footer {
  background-color: $charcoal;
}
.footer-inner {}
.footer-row {
  display: flex;
  align-items: center;
  align-content: space-between;
  flex-flow: row wrap;
}
.footer-row__top {
  justify-content: space-between;
  padding: 2em 0;
  .footer-logo {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    @include breakpoint(700px, $no-query: true) {
      margin: initial;
      margin-right: 3em;
      width: initial;
    }
  }
  .footer-item {}
  .footer-menu--primary {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    @include breakpoint(700px, $no-query: true) {
        width: initial;
        margin: initial;
    }
    li {
      @extend h2;
      font-size: 24px;
      a {
        color: $white;
      }
      &:before {
        border-left: none;
        margin-left: 0;
      }
    }
    ul.nav {
      li {
        margin: 1em 0;
        text-align: center;
        width: 100%;
        @include breakpoint(700px, $no-query: true) {
          width: initial;
        }
      }
    }
    nav {
      display: block;
    }
  }
  .footer-menu--secondary {
    padding: 0 .5em;
    text-align: center;
    width: 100%;
    @include breakpoint(700px, $no-query: true) {
      max-width: 150px;
      text-align: right;
    }
    .nav__item {
      margin-bottom: 0;
    }
    .nav__link {
      color: $white;
    }
  }
  .footer-social {
    text-align: center;
    padding: 2em;
    width: 100%;
    @include breakpoint(700px, $no-query: true) {
      max-width: 10%;
      margin-right: 2em;
      padding: 0;
    }
    .fa {
      color: $white;
      position: relative;
      top: 0;
      transform: translateY(15%);
      width: 50%;
      padding: 10px;
    }
  }
}

.footer-row__bottom {
  border-top: 2px solid $lt-grey;
  justify-content: flex-end;
  padding: 1em 0;
}

.footer-copyright {
  h6 {
    color: $white;
    margin-bottom: 0;
  }
}

SassMeister-rendered.html

  <footer class="footer" role="contentinfo">
      <div class="footer-inner layout-constrain">
        <div class="footer-row footer-row__top">
          <div class="footer-item footer-logo"><a href="<?php echo home_url(); ?>" class="sitename"><img alt="Science Philanthropy Alliance" src="<?php echo get_template_directory_uri() . '/images/footer-logo.png';?>"/></a></div>
          <div class="footer-item footer-menu--primary"><?php gesso_nav('primary'); ?></div>
          <div class="footer-item footer-menu--secondary"><?php gesso_nav('footer-secondary'); ?></div>
          <div class="footer-social">
            <span>
              <a href="https://www.facebook.com/SciPhil.org"><i class="fa fa-facebook"></i></a>
            </span>
            <span>
              <a href="https://www.facebook.com/SciPhil.org"><i class="fa fa-twitter"></i></a>
            </span>
          </div>
        </div>
      </div>
        <div class="footer-row footer-row__bottom">
          <div class="footer-inner layout-constrain"><div class="footer-item footer-copyright"><h6>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></h6></div></div>
        </div>
  </footer>