Nativescript-Vue passing lenght of an array to SCSS variable

user_10985142 0
Viewed 98

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
}
nativescript-vue sass android ios
1 Answers

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);

user_132808470
Related