HTMLにCSSがうまく反映されない

Wordpressにて進捗状況を示すバーを作成しています。

下記のHTMLに対して、CSSを反映させたいのですがうまく反映されません。

下記以外のコードでもいくつか試してみたのですが、反映されるものと反映されないものがあり、原因が特定できずです。

ご教授いただけば幸いです、よろしくお願いいたします。

HTML

 <ul class="ui-step-bar">
        <li class="done">
            <span>STEP1</span>
        </li>
        <li class="done">
            <span>STEP2</span>
        </li>
        <li>
            <span>STEP3</span>
        </li>
        <li>
            <span>STEP4</span>
        </li>
        <li>
            <span>STEP5</span>
        </li>
    </ul>

CSS

        .ui-step-bar {
        $barMargin: 8px 0;
        $ballSize: 32px; // ボールの大きさ
        $labelWidth: 80px; // ラベル領域の幅。枝の両端の空白もここで決まる
        $labelFontSize: 12px; // ラベルのフォントサイズ
        $labelFontColor: #ccc; // ラベルのフォントカラー
        $labelFontColorActive: #666; // ラベルのフォントカラー
        $labelPadding: 2px; // ラベルのpadding
        $labelGap: 4px; // ボールとラベルのギャップ(px指定)
        $branchWidth: 8px; //枝の太さ
        $pendingColor: #ccc; // 待受中の色
        $doneColor: #494; // 完了時の色
        $unitHeight: $ballSize + ($labelGap + $labelPadding*2 + $labelGap)*2; //プログレスバーの高さ
        &,
        &>li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        & {
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding: 0 $labelWidth/2;
            position: relative;
            height: $unitHeight;
            margin: $barMargin;
        }
        >li {
            width: 100%;
            position: relative;
            >span {
                position: absolute;
                display: block;
                box-sizing: border-box;
                width: $labelWidth;
                margin: 0 $labelWidth*-0.5;
                padding: $labelPadding;
                top: ($unitHeight + $ballSize) * 0.5 + $labelPadding;
                color: $labelFontColor;
                right: 0;
                font-size: $labelFontSize;
                text-align: center;
                line-height: 1em;
            }
            &:before,
            &:after {
                content: "";
                position: absolute;
                display: block;
                top: 50%;
            }
            // ボールの間の枝
            &:before {
                width: 100%;
                height: $branchWidth;
                margin: $branchWidth*-0.5 0;
                background-color: $pendingColor;
                z-index: 1;
                left: 0;
            }
            &:after {
                width: $ballSize;
                height: $ballSize;
                margin: $ballSize*-0.5;
                border-radius: 100%;
                background-color: $pendingColor;
                z-index: 2;
                right: 0;
            }
            // ここがみそ。最初のLI要素のwidthは0にし、疑似要素の枝を非表示にする。
            &:first-child {
                width: 0;
                &:before {
                    display: none;
                }
            }
            &.done {
                >span {
                    color: $labelFontColorActive;
                }
                &:before,
                &:after {
                    background-color: $doneColor;
                }
            }
        }
    }