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.

Although looking at your code you seem to style everything the same - is there any point in doing all the children, can you not just do a generic class and style the after for that instead of doing nth-child — Pete, Apr 16 '18 at 10:40
For your particular case [`extend`](http://lesscss.org/less-preview/#%7B%22less%22%3A%22%5Cn%3Anth-child(1)%20%7B%5Cn%20%20%20%20property%3A%20whatever%3B%5Cn%7D%5Cn%5Cn%5Cn2%2C%203%2C%204%2C%205%20%7B%5Cn%20%20%20%20%3Anth-child(%26)%3Aextend(%3Anth-child(1))%20%7B%7D%5Cn%7D%22%7D) would fit better. — seven-phases-max, Apr 16 '18 at 10:44
As for code like `&:nth-child(2) {&:nth-child(1);}` it won't work of course since `:nth-child(1)` is *not* a mixin of any kind. — seven-phases-max, Apr 16 '18 at 10:49
@Pete your solution does not work. Could you show me how you would do this? — Maxim Gordiyenko, Apr 16 '18 at 12:41
I don't understand what you are trying to do or why, you never answered my second comment so I'm out — Pete, Apr 16 '18 at 12:42
@Pete, I have tried use your code for my problem but something wrong, perhaps i incorrectly used your code that because i ask you about help, about how use your code in my case. Many thanks for help)))) — Maxim Gordiyenko, Apr 16 '18 at 13:37
@Pete meant that you don't have to use any `:nth-child(*)` because what you really do is just styling the `

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

0 Answers0