Pentru bucla în SCSS cu o combinație de variabile [duplicat] (Programare, Html, Css, Sass)

tobyn a intrebat.

Am o grămadă de elemente: (#cp1, #cp2, #cp3, #cp4)

la care vreau să adaug o culoare de fundal folosind SCSS.

Codul meu este:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@for $i from 1 through 4 {
    #cp#{i} {
        background-color: rgba($(colour#{i}), 0.6);

        &:hover {
            background-color: rgba($(colour#{i}), 1);
            cursor: pointer;
        }
    }
}

Comentarii

  • și ce este greșit în acest cod? –  > Por pawel-kuznik.
  • @neosatan culoarea este scrisă greșit… 😉 –  > Por Sten Muchow.
  • @StenMuchow grammarist.com/spelling/color-colour nu m-am putut abține –  > Por pawel-kuznik.
3 răspunsuri
Xabriel

În loc să generezi numele variabilelor folosind interpolarea poți crea o listă și să folosești nth metoda pentru a obține valorile. Pentru ca interpolarea să funcționeze, sintaxa ar trebui să fie #{$i}, , așa cum este menționat de hopper.

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

$colors: $colour1, $colour2, $colour3, $colour4;

@for $i from 1 through length($colors) {
    #cp#{$i} {
        background-color: rgba(nth($colors, $i), 0.6);

        &:hover {
            background-color: rgba(nth($colors, $i), 1);
            cursor: pointer;
        }
    }
}

Comentarii

    15

  • Probabil că ar fi mai bine să se extragă lungimea listei decât să fie codificată: @for $i from 1 through length($colors) {... –  > Por steveax.
  • Cu siguranță este mai bine să nu se codifice în mod automat lungimea. Am aplicat modificarea. Mulțumesc, Steveax. –  > Por Xabriel.
  • Acest răspuns ar trebui să fie validat. –  > Por Sarcadass.
Alex Guerrero

După cum a spus @hopper, principala problemă este că nu ați prefixat variabilele interpolate cu un semn de dolar, așa că răspunsul său ar trebui să fie marcat ca fiind cel corect, dar vreau să adaug un sfat.

Utilizați @each rule în loc de @for loop pentru acest caz specific. Motivele:

  • Nu trebuie să cunoașteți lungimea listei.
  • Nu este nevoie să folosiți length() pentru a calcula lungimea listei
  • Nu este necesar să folosiți funcția nth().
  • @each regula este mai semantică decât @for directiva

Codul:

$colours: rgb(255,255,255), // white
          rgb(255,0,0),     // red
          rgb(135,206,250), // sky blue
          rgb(255,255,0);   // yellow

@each $colour in $colours {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Sau, dacă preferați, puteți include fiecare $colour în directiva @each în loc să declarați variabila $colors:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0);     // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@each $colour in $colour1, $colour2, $colour3, $colour4 {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Sass Reference for @each directivă

hopper

Variabilele SASS trebuie în continuare să fie prefixate cu un semn de dolar în interiorul interpolărilor, astfel încât în fiecare loc în care aveți #{i}, , ar trebui să fie de fapt #{$i}. Puteți vedea alte exemple în referința SASS de pe interpolări.

Tags:, ,