0

I have been working on a way to build a carousel purely with html and css. No Javascript. So far I have been liking what I found in the web and seen some tutorials.

Here is my issue though. I build a mixin loop with Less to build a bunch of css but for some reason it seems to be missing a closing brace ")" on line 4 (of the pasted code below).

What I tried:

  • Remove the block of Less code completely -> error dissapeared.
  • Removed all the code inside the .carousel-reviews -> error persists
  • removed the the .carousel-reviews around the child selector -> error persists
  • Changed the variable name from @i to @index -> error persists
  • Removed all the code from inside the &__activator:nth-of-type( @i ) selector -> error persists

Hope someone can see what I am doing wrong here.

.loop( @i ) when ( @i > 0 ) {

.carousel-reviews {
    &__activator:nth-of-type( @i ) {
        &:checked ~ .carousel_track {
            transform: translateX(calc(@i - 1) * 100%);
        }
        &:checked ~ .carousel__slide:nth-of-type(@i) {
            transition: opacity @slideTransition, transform @slideTransition;
            top: 0;
            left: 0;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
        &:checked ~ .carousel__controls:nth-of-type(@i) {
            display: block;
            opacity: 1;
        }
        &:checked ~ .carousel__indicators .carousel__indicator:nth-of-type(@i) {
            opacity: 1;
        }
    }
  }
.loop ( ( @i - 1 ) );
}

If I was not complete enough please let me know and I can add the info to the question.


EDIT 1
It seems that the compilers are stopping when they get to the first @i on line 4.
For some reason when I remove that first variable the error moves to line 8.
This suggests that for some reason the variable @i is not allowed inside the :nth-of-type().
Anyone know what is going on here?

I will keep searching and updating when I find new answers or questions

EDIT 2
Found the sollution. Check answer

Controvi
  • 487
  • 1
  • 6
  • 16

1 Answers1

0

So it seems that I found the issue.

It seems that the problem is with less itself regarding the use of variables inside the :nth-of-type().

When I was removing the variables from the nth-of-type I noticed the error moving to a new line that also included the nth-of-type.
When I went to look up the use of variables in less I couldn't find anything bu later I came across a post here in stack overflow

THIS ANSWER BY MARTIN TURJAK

I would advice to check it out. But in short, there seems to be an issue with the variable use and you have to use it as if you are using it inside a string like this :nth-of-type(@{i}).

Hope this helps others strugling with this same issue.
I currently don't have the time to find out why this happens an I haven't got a clue either but if there is someone that can explain this that would be awesome.

Anyways, thanks for your time and have a great day!

Controvi
  • 487
  • 1
  • 6
  • 16
  • Just for reference: *When I went to look up the use of variables in less I couldn't find anything* - it's [here](http://lesscss.org/features/#variables-feature-variable-interpolation). – seven-phases-max Jan 25 '19 at 14:52