css - Less extend with pseudo-class and pseudo-elements

Question

I have list element with link inside, used font-awesome for Less. How to keep code in first pseudo-element and repeat in second, third. Is there any shorthand notation?

My goal is not to repeat the same properties for different elements. If &:nth-child(1), &:nth-child(2), etc. have same property, but with different in top: ...; and left: ...; in each class.

I read many topics on the stackoverflow and came to the conclusion that a best solution it to use mixins but it doesn't work. Example with explain this: 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 - This source very seems to solution in my case but code doesn't work, what wrong?

I very much apologize if my English is terrible, if i don't clearly explain my problem.