scssでの記述の仕方がわからないため、ご教示いただきたいです。

前提・実現したいこと

scssをコンパイル後にcssに書き出さられるコードを下記のようにしたいが、scssをどのように記述したらいいのかわからないため、アドバイスを頂きたいです。
.tab:hover .social a::before{
margin-left:-100px;
};

発生している問題・エラーメッセージ

gulpで記述が正しくないため、エラーを起こしてしまう。

該当のソースコード

--html--
<div class="container">
      <header>
        <h1>Follow Me On Social Media</h1>
      </header>
      <ul class="accordion">
        <li class="tab">
          <div class="social youtube">
            <a
              href="https://www.youtube.com/watch?v=9PnfGokdYtc"
              target="_blank"
              >Youtube</a
            >
          </div>
          <div class="content">
            <h1>Youtube</h1>
            <p>Follow me on YouTube</p>
          </div>
        </li>
        <li class="tab">
          <div class="social instagram">
            <a href="https://www.instagram.com/dreamcenterdev/" target="_blank"
              >Instagram</a
            >
          </div>
          <div class="content">
            <h1>Instagram</h1>
            <p>Follow me on Instagram</p>
          </div>
        </li>
        <li class="tab">
          <div class="social linkedin">
            <a
              href="https://www.linkedin.com/in/dreamcenterdev/"
              target="_blank"
              >LinkedIn</a
            >
          </div>
          <div class="content">
            <h1>LinkedIn</h1>
            <p>Follow me on Linkedin</p>
          </div>
        </li>
        <li class="tab">
          <div class="social facebook">
            <a href="https://www.facebook.com/danmax" target="_blank"
              >Facebook</a
            >
          </div>
          <div class="content">
            <h1>Facebook</h1>
            <p>Follow me on Facebook</p>
          </div>
        </li>
        <li class="tab">
          <div class="social codepen">
            <a href="https://codepen.io/danmax/" target="_blank">Codepen</a>
          </div>
          <div class="content">
            <h1>Codepen</h1>
            <p>Follow me on Codepen</p>
          </div>
        </li>
      </ul>
    </div>
--html--

--scss--
.container {
  margin: 50px auto;
  width: 90%;
}

header {
  h1 {
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
  }
}

.accordion {
  background: #333;
  width: 100%;
  min-width: 800px;
  display: block;
  list-style-type: none;
  overflow: hidden;
  height: 200px;
  font-size: 0;
}
.tab {
  display: inline-block;
  background-color: #444;
  border-right: 1px solid #333;
  width: 80px;
  overflow: hidden;
  position: relative;
  margin: 0;
  transition: all 0.5s ease-in-out 0.1s;

  &:hover {
    width: 450px;
  }
  &:hover {
    margin-left: -100px;
  }
}

--scss--