css - 使用伪类和伪元素进行扩展

Question

我的list元素里面有链接，使用了font-awesome for Less。如何将代码保存在第一个伪元素中并在第二个，第三个中重复。有没有简写符号？

我的目标不是为不同的元素重复相同的属性。如果 &:nth-child(1)，&:nth-child(2)等具有相同的属性，但每个类中的top: ...;和left: ...;不同。

我在stackoverflow上阅读了很多主题，得出的结论是使用mixin的最佳解决方案，但它不起作用。示例解释一下：CSS-Less class extend class with pseudo class。

&:nth-child(1){
   property; ...;
}
$:before{
  property; ...; 
}
&:nth-child(2){
   &:nth-child(1);
}
&:nth-child(3){
 &:nth-child(1);
}

        li {
            text-align: center;
            width: 115px;
            height: 90px;
            margin: 1px;
            background: linear-gradient(#ffffff, #d7d7d7);
            &:nth-child(1) {
                .fa-icon;
                .fas;
                &:before {
                    content: @fa-var-globe;
                    color: @txt-color;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
            }
            &:nth-child(2) {
                .fa-icon;
                .fas;
                &:before {
                    content: @fa-var-paper-plane;
                    color: @txt-color;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
            }
            &:nth-child(3){
                .fa-icon;
                .fas;
                &:before{
                    content: @fa-var-paper-plane;
                    color: @txt-color;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
            }

<nav>
        <ul>
            <li><a href="#">Travel Guide</a></li>
            <li class="active"><a href="#">Service</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">The Tour</a></li>
            <li><a href="#">How to</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS-Less class extend class with pseudo class - 这个来源似乎在我的情况下解决了，但代码不起作用，有什么不对？

如果我的英语很糟糕，如果我没有清楚地解释我的问题，我非常抱歉。