Sass 'if' - Anweisung basierend auf bestehenden Klasse

Ich bin neu und Sass möchte die 'if' - Anweisung zum erkennen einer vorhandenen Klasse auf ein element, um zu erzeugen können Sie die entsprechende css.

Mein setup hat eine große Anzahl von Javascript-generierte Bilder, die eine eindeutige ID zugewiesen, sowie eine Klasse von "Bild" und zufällig zugewiesene Klasse entweder oben, rechts, unten oder Links.

Ich bin auch mit einem random-Funktion für Sass (gefunden hier: https://gist.github.com/chriseppstein/1561650), und würde gerne einen anderen Wert zugewiesen jede ID, so dass jedes element nach dem Zufallsprinzip.

Meine SCSS hat die folgenden, die Positionen der Bilder auf, welcher Klasse es zugeordnet wurde:

@for $i from 0 through $number-of-pictures {
  #picture-#{$i}{

    &.top {
      left: random($stage-width);
    }

    &.right {
      top: random($stage-height);
    }

    &.bottom {
      left: random($stage-width);
    }

    &.left {
      top: random($stage-height);
    }
  }
}

Dies funktioniert gut, aber erstellt eine Tonne von ungenutzten Erklärung blockiert. Zum Beispiel, die #Bild-38 zugewiesen wurde, die die Klasse ".top", also alles, was ich brauche, ist die erste Erklärung blockieren, aber die CSS-exportiert alle Optionen:

#picture-38.top {
      left: 38px; //This is a random number that is different for each ID.
}
#picture-38.right {
      top: 28px;
}
#picture-38.bottom {
      left: 12px;
}
#picture-38.left {
      top: 47px;
}

Was ich brauche, ist eine wenn-Anweisung, die erkennt, wenn das element hat eine Klasse, bevor das Parsen von css. So etwas wie:

@if "#picture-#{$i} has class $class-top" {
    &.top {
        left: random($stage-width);
    }
}

Irgendwelche Ideen?

Ich glaube nicht, dass dies möglich ist mit SASS (oder andere preprocessor).
Verwandte: stackoverflow.com/questions/18851502/...

InformationsquelleAutor zoosrc | 2014-02-26

  1. 5

    Die Antwort ist, Sie können dies nicht mit SASS/SCSS.

    Sie versuchen zu erkennen, die Besitz/Zuordnung einer Klasse zu einem DOM-element.

    Den Weg, um die Interaktion mit DOM-Elemente ist JavaScript

    Was Sie tun müssen, ist, verwenden Sie JavaScript, um zu erkennen, wenn "Bild-x#" class "- Klasse-top" und dann eine zufällige top Wert entsprechend.

    E. g.

    var picture = document.GetElementById('picture-1');
var pic_class = picture.className
if(pic_class.indexOf('class-top') != -1)
{
    /*Returns a random number between 1 and 100*/
    picture.style.top = Math.floor((Math.random()*100)+1) + 'px';
}

    Sidenote: top erfordert eine Maßeinheit (z.B. px), daher der + 'px'

    Danke, ich dachte, das könnte der Fall sein. Ich war in der Hoffnung zu halten alle die Einordnung in Sass und Strecken Ihre Beine ein wenig, aber ich werde es verschieben in der Javascript-Funktion.

    InformationsquelleAutor Douglas Denhartog

  2. 0

    Bisschen alt, aber ich arbeitete auf etwas ähnliches vor kurzem - hier habe ich ein array verwenden, um eine Schleife durch die unterschiedlichen Klassen von Schaltflächen und fügen Sie Stile entsprechend.
    Bitte beachten Sie, dass es Variablen im code-snippet, die nicht deklariert sind.

    $buttonSizes: large-buttons, medium-buttons, small-buttons;
@each $buttonSizesItem in $buttonSizes {
  %#{nth($buttonSizesItem, 1)}{
    @if (nth($buttonSizesItem, 1))== large-buttons{
      @include font-size(2);
      @include rounded(6);
      padding: 8px 15px;      
    }
    @if (nth($buttonSizesItem, 1))== medium-buttons{
      @include font-size(1.8);
      @include rounded(5);
      padding: 4px 12px;
      &.button-loading {
        &:before{
          top: 2px;      
        }
      }
    }
    @if (nth($buttonSizesItem, 1)) == small-buttons{
      @include font-size(1.6);
      @include rounded(4);
      padding: 4px 10px;
      &.button-loading {
        &:before{
          top: 0;      
        }
      }
    }
  }
}

    InformationsquelleAutor Jamie Paterson

Schreibe einen Kommentar