js修改偽類before邊框顏色

在touch中，我們常用的1px邊方案就是通過偽類+transform的scale來縮放偽類元素，達到1像素邊的方案。
但是在實際的項目中，經常會存在希望通過后台配置來控制前端樣式的展示，例如通過配置來實現邊框顏色的修改。此時需要動態的使用js動態的修改before的style屬性。
常見的方法有

1. 動態創建style標簽，然后生成新類名的偽類樣式來覆蓋原有的樣式
   偽代碼如下:

    var color = '#9e9e9e'
    var style = document.createElement('style');
    style.children=`.xxx::before{border-color: ${color}}`
    document.head[0].append(style);
    document.getElement('#myid').classText = document.getElement('#myid').classText + ' xxx';

太過繁瑣。
通過自己的學習和實踐后，發現我們一直忽視的一個css屬性inhert可以簡單的解決這個問題像這樣

    .a {
        @include border-1px(#9e9e9e);
        &::before{
            border-color: inhert;
        }
    }

    document.getElement.style.borderColor= '#fff';

完美解決問題~