Nativescript-Vue passing lenght of an array to SCSS variable

Question

I want to know if is it possible to use an array.lenght value in my SCSS code:

export default {
    return {
    data: ['One', 'Two', 'Three']
}

In this example my this.data.lenght will be equal to 3.

I want to assing to a variable in SCSS ($lenght) the lenght of my data array:

// SCSS variable
$lenght: this.data.lenght;

And use it later in a for loop :

@for $n from 1 through $lenght {  
 //Some stuff
}

score 2 · Accepted Answer · answered Apr 10 '20 at 17:19

Sadly I don't think this is possible. SASS is compiled to regular CSS before your JavaScript would run. It doesn't look like you're able to use vanilla CSS variables either for this since SASS doesn't except them (see here: Using css variables in sass functions - node-sass)

If you can refactor your SASS function to a javaScript function you can use vanilla CSS variables and change properties like so: root.style.setProperty('--some-variable', someValue);

Nativescript-Vue passing lenght of an array to SCSS variable

1 Answers1