Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="scores-container">
  <div class="score-container">
  <div class="score">
    <span>0</span>
  </div>
    <div class="spring-divider">
      
    </div>
  </div>
</div>

SassMeister-input.scss

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

$score-gradient-main: #008a00;
$score-gradient-darker-1: darken($score-gradient-main, 1%);
$score-gradient-darker-2: darken($score-gradient-main, 10%);
$score-gradient-darker-3: darken($score-gradient-main, 22%);

$spring-gradient-main: #e1e1e1;
$spring-gradient-darker-1: darken($spring-gradient-main, 5%);
$spring-gradient-darker-2: darken($spring-gradient-main, 50%);
$spring-gradient-darker-3: darken($spring-gradient-main, 65%);

$score-container-height: 60px;
*{
 box-sizing: border-box; 
}
html, body{
 height: 100%;
 background-color: #e1e1e1;
}
.scores-container{
  position: relative;
  padding: 4px;
  background-color: darken($score-gradient-main, 23%);
}
.score-container{
  position: relative;
  padding: 1px;
 width: 80px;
 height: $score-container-height;
 border-radius: 6px;
 box-shadow:inset 1px 1px 20px 1px rgba(0,0,0,.5);
 border: 1px solid darken($score-gradient-main, 0%);
 background: linear-gradient(to bottom, $score-gradient-darker-3 0%, $score-gradient-darker-2 20%, $score-gradient-darker-1 44%, $score-gradient-main 50%, $score-gradient-darker-1 56%, $score-gradient-darker-2 80%,$score-gradient-darker-3 100%);
&:before,
&:after{
  content: '';
  display: block;
  position: absolute;
  height: 10px;
  background: orange;
  width: 2px;
  top: 50%;
  margin-top: -5px;
  left: 4px;
  background: linear-gradient(to bottom, $spring-gradient-darker-3 0%, $spring-gradient-darker-2 20%, $spring-gradient-darker-1 44%, $spring-gradient-main 50%, $spring-gradient-darker-1 56%, $spring-gradient-darker-2 80%,$spring-gradient-darker-3 100%);
  z-index: 2;
}
&:after{
  right: 4px;
  left: auto;
}
.spring-divider{
  position: relative;
  height: 2px;
  width: 100%;
  background-color: rgba(0,0,0,.7);
  top: 50%;
  margin-top: -1px;
  z-index: 1;
  border-bottom: 1px solid lighten($score-gradient-main, 4%);
  border-top: 2px solid darken($score-gradient-main, 18%);
}

.score{
  position: absolute;
  line-height: $score-container-height;
  text-align: center;
  width: 100%;
  font-size: 40px;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0,0,0,.7);
}
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: #e1e1e1;
}

.scores-container {
  position: relative;
  padding: 4px;
  background-color: #001500;
}

.score-container {
  position: relative;
  padding: 1px;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  box-shadow: inset 1px 1px 20px 1px rgba(0, 0, 0, 0.5);
  border: 1px solid #008a00;
  background: linear-gradient(to bottom, #001a00 0%, #005700 20%, #008500 44%, #008a00 50%, #008500 56%, #005700 80%, #001a00 100%);
}
.score-container:before, .score-container:after {
  content: '';
  display: block;
  position: absolute;
  height: 10px;
  background: orange;
  width: 2px;
  top: 50%;
  margin-top: -5px;
  left: 4px;
  background: linear-gradient(to bottom, #3b3b3b 0%, #626262 20%, #d4d4d4 44%, #e1e1e1 50%, #d4d4d4 56%, #626262 80%, #3b3b3b 100%);
  z-index: 2;
}
.score-container:after {
  right: 4px;
  left: auto;
}
.score-container .spring-divider {
  position: relative;
  height: 2px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  top: 50%;
  margin-top: -1px;
  z-index: 1;
  border-bottom: 1px solid #009e00;
  border-top: 2px solid #002e00;
}
.score-container .score {
  position: absolute;
  line-height: 60px;
  text-align: center;
  width: 100%;
  font-size: 40px;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

SassMeister-rendered.html

<div class="scores-container">
  <div class="score-container">
  <div class="score">
    <span>0</span>
  </div>
    <div class="spring-divider">
      
    </div>
  </div>
</div>