Why is this scss code to select a random color from a list raising an error?

54 Views Asked by At

I am creating a web application using flask and am using flask_assets and pyscss to compile my scss. I am trying to give each section in the HTML a random color from a list using scss and this is what I have so far. The following scss code generates a 500 Internal Server Error. I know the scss compiles correctly as the error is generated only when this code is added to the file. The file already has an @import which works fine. Why is this error generated? Does it have something to do with pyscss? I've been debating accomplishing this using JavaScript if it cannot be done using scss.

app.py

from flask import Flask
from flask_assets import Environment, Bundle

app = Flask(__name__)
assets = Environment(app)

def generate_scss_bundles() -> dict:
    scss_dir = 'static/scss'
    return {
        f'{filename}_style': Bundle(
            f'scss/{filename}.scss',
            filters='pyscss',
            depends='**/*.scss',
            output=f'gen/{filename}.css'
        )
        for filename in [os.path.splitext(f)[0] for f in os.listdir(scss_dir) if f[0] != '_']
    }

assets.register(generate_scss_bundles())

SCSS

@use 'sass:math';

$colors: $color1-purple, $color1-pink, $color1-orange, $color1-yellow, $color1-green, $color1-blue;

@for $i from 1 through length($colors) {
    section:nth-child(#{length($colors)}n+#{$i}) {
        background-color: nth($colors, math.random(length($colors)));
    }
}

Error message

scss.errors.SassSyntaxError: Syntax error after 'nth($colors, math': Found '.random(le' but expected one of ",", ":", ADD, ALPHA_FUNCTION, AND, BANG_IMPORTANT, BAREWORD, COLOR, DIV, DOUBLE_QUOTE, END, EQ, FNCT, GE, GT, IF_FUNCTION, INTERP_END, INTERP_START, LE, LITERAL_FUNCTION, LPAR, LT, MOD, MUL, NE, NOT, NUM, OR, RPAR, SIGN, SINGLE_QUOTE, SPACE, SUB, URL_FUNCTION, VAR

I tried removing the math module as suggessted in the error message but this raises a new error.

SCSS

$colors: $color1-purple, $color1-pink, $color1-orange, $color1-yellow, $color1-green, $color1-blue;

@for $i from 1 through length($colors) {
    section:nth-child(#{length($colors)}n+#{$i}) {
        background-color: nth($colors, random(length($colors)));
    }
}

Error message

ValueError: Invalid index <String 'random(6)'>

0

There are 0 best solutions below