Generated by SassMeister.com.

SassMeister-input-HTML.html

   <div class="sidebar">
        <a id="button1" class="button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-add icon-36"></i>
            <p>Button 1 Button 1 Button 1</p>
          </div>
        </a>
        <a id="button2" class="button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-edit icon-36"></i>
            <p>Button 2 Button 2 Button 2</p>
          </div>
        </a>
   </div>

SassMeister-input.scss

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

.sidebar {
  height: 50px;
  border: 1px solid black;
  #button1, #button2, #button3, #button4, #button5 {
    border-color: #333333;
    height: 10px;
    div {
        color: #999999;
        i {
          padding-bottom: 10px;
        }
    }
  }
  &:hover {
    #button1, #button2, #button3, #button4, #button5 {
      div {
        p {
          color: green;
        }
      }
    }
  }
}

SassMeister-output.css

.sidebar {
  height: 50px;
  border: 1px solid black;
}
.sidebar #button1, .sidebar #button2, .sidebar #button3, .sidebar #button4, .sidebar #button5 {
  border-color: #333333;
  height: 10px;
}
.sidebar #button1 div, .sidebar #button2 div, .sidebar #button3 div, .sidebar #button4 div, .sidebar #button5 div {
  color: #999999;
}
.sidebar #button1 div i, .sidebar #button2 div i, .sidebar #button3 div i, .sidebar #button4 div i, .sidebar #button5 div i {
  padding-bottom: 10px;
}
.sidebar:hover #button1 div p, .sidebar:hover #button2 div p, .sidebar:hover #button3 div p, .sidebar:hover #button4 div p, .sidebar:hover #button5 div p {
  color: green;
}

SassMeister-rendered.html

   <div class="sidebar">
        <a id="button1" class="button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-add icon-36"></i>
            <p>Button 1 Button 1 Button 1</p>
          </div>
        </a>
        <a id="button2" class="button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-edit icon-36"></i>
            <p>Button 2 Button 2 Button 2</p>
          </div>
        </a>
   </div>