vendredi 25 septembre 2020

Pass Less variable in to attribute selector

I have a task to write 100 styles for every of 10 columns in Less. Code looks like this at the moment:

.loopingCellWidth (@index) when (@index > 0){
                    &[data-1-column-width="@{index}"] {
                        .exercise-table-row {
                            .exercise-table-row-part {
                                &:nth-child(1) {
                                    width: percentage(@index * 0.01) !important;
                                }
                            }
                        }

                    }
                    &[data-2-column-width="@{index}"] {
                        .exercise-table-row {
                            .exercise-table-row-part {
                                &:nth-child(2) {
                                    width: percentage(@index * 0.01) !important;
                                }
                            }
                        }

                    }
                     // ..... up to 10
                    .loopingCellWidth(@index - 1);
                }
                .loopingCellWidth(100);

I would like to create a variable @numberOfColumn and place it in the attribute selector, like this:

&[data-@{@numberOfColumn}-column-width="@{index}"] {

But this solution doesn't work. Any ideas how it should be done? Of course if it's even possible.




Aucun commentaire:

Enregistrer un commentaire