SASS ile Rastgele Renk Oluşturmak

Sass'da bulunan random() fonksiyonu ile bu işlemi şu şekilde yapabiliriz;

.box {
    background-color: rgb(random(255), random(255), random(255));
}

opacity'si düşük değer oluşturmak isterseniz rgba() kullanabilirsiniz.

.box {
    background-color: rgba(random(255), random(255), random(255), .3);
}

Örneğin şöyle bir html yapımız olsaydı;

<ul>
    <li>1. box</li>
    <li>2. box</li>
    <li>3. box</li>
    <li>4. box</li>
</ul>

css de şu şekilde olsaydı;

ul {
    display: flex;
    width: 600px;
    margin: 0 -10px;
    li {
        flex: 1;
        margin: 0 10px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

sass ile bir for döngüsü kurup her birisine şu şekilde arkaplan verebilirdik;

@for $i from 1 through 4 {
    ul li:nth-child(#{$i}) {
        background-color: rgba(random(255), random(255), random(255), .3);
    }
}

Sonuç;

• 1. box
• 2. box
• 3. box
• 4. box