具有无效值的无效CSS

Question

那是我的笔：https://codepen.io/helloworld/pen/qQpdov

为什么顶部的sass变量不正确？使用 FIREFOX 查看错误消息。

HTML

  <ul class="progress-Indicator">
      <li class="completed">
        <span class="bubble"></span>
        <div>1</div>
      </li>
      <li class="completed">
        <span class="bubble"></span>
        <div>2</div>
      </li>
      <li class="completed">
        <span class="bubble"></span> 3
      </li>
      <li>
        <span class="bubble"></span> 4
      </li>
      <li>
        <span class="bubble"></span> 5
      </li>
    </ul>

SASS

$incomplete: #cc9933;
$complete: #664455;
$active: #335577;
$hover: #2244ab;

// sizing
$bubble-size: 40px;
$bubble-line-thickness: 2px;
$border-thickness: 1px;
$darken-amount: 30%;


@mixin bubble-style($color) {
    background-color: $color;
    color: $color;
    border-color: darken($color, $darken-amount);

    &:before,
    &:after {
        background-color: $color;
        border-color: darken($color, $darken-amount);
    }
}

.progress-indicator {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    margin: 0;
    padding: 0;
    font-size: 80%;
    margin-bottom: 1em;

    > li {
        -ms-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        flex: 1;
        list-style: none;
        text-align: center;
        width: auto;
        padding: 0;
        margin: 0;
        position: relative;
        text-overflow: ellipsis;
        color: $incomplete;
        display: block;

        &:hover {
            color: darken($incomplete, $darken-amount);
        }
    }

    > li .bubble {
        border-radius: 1000px;
        width: $bubble-size;
        height: $bubble-size;
        background-color: $incomplete;
        display: block;
        margin: 0 auto 0.5em auto;      
    }
    // line connectors
    > li .bubble:before,
    > li .bubble:after {
        display: block;
        position: absolute;
        top: $bubble-size / 2 - $border-thickness;
        width: 100%;
        height: $bubble-line-thickness;
        content: '';
        background-color: $incomplete;
    }

    > li .bubble:before {
        left: 0;
    }

    > li .bubble:after {
        right: 0;
    }

    > li:first-child .bubble:before,
    > li:first-child .bubble:after {
        width: 50%;
        margin-left: 50%;
    }

    > li:last-child .bubble:before,
    > li:last-child .bubble:after {
        width: 50%;
        margin-right: 50%;
    }
    // completed state
    > li.completed {
        color: $complete;

        .bubble {
            @include bubble-style($complete);
        }
    }
    // current state
    > li.active {
        color: $active;

        .bubble {
            @include bubble-style($active);
        }
    }
    // button states
    > li a:hover .bubble {
        @include bubble-style($hover);
    }  
}