Umschreiben von SASS / SCSS in CSS Code

PaulRohr · 1. April 2020

Hallo, ich bin bei einem Code Snippet gestolpert den ich gern nutzen möchte. Leider funktioniert er nicht wie ich möchte. Nach einigen Suchen konnte ich die Lösung dazu nicht finden. Was ich rausbekommen habe ist, dass es sich dabei nicht um CSS Code handelt sondern um SASS / SCSS. Alle Versuche den Code umzuschreiben sind leider gescheitert. Vielleicht kann mir hier unter den Profis einer weiterhlefen.

Code

.glitch {
  font-size: 130px;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #fff;
  &:before,
  &:after{
    display: block;
    content: '17';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8;
  }
  &:after {
    color: #f0f;
    z-index: -2;
  }
  &:before {
    color: #0ff;
    z-index: -1;
  }
  &:hover {
    &:before {
      animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite
    }
    &:after {
      animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite
    }
  }
}
@keyframes glitch {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    20% {
        -webkit-transform: translate(-5px, 5px);
        transform: translate(-5px, 5px)
    }
    40% {
        -webkit-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px)
    }
    60% {
        -webkit-transform: translate(5px, 5px);
        transform: translate(5px, 5px)
    }
    80% {
        -webkit-transform: translate(5px, -5px);
        transform: translate(5px, -5px)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

<a href="#" class="glitch">17</a>

Alles anzeigen

Vielen Dank im voraus und LG Paul. Bleibt alle gesund!

Sempervivum · 1. April 2020

Glücklicher Weise brauchst Du dieses CSS nicht von Hand umzuschreiben, sondern es gibt Compiler dafür, die das automatisch tun. Einfacher als solch einen Compiler zu installieren, ist für dich wahrscheinlich, einfach Codepen zu verwenden: CSS im CSS-Fenster eintragen, links beim Zahnradsymbol den Präprozessor auswählen, in diesem Fall offenbar LESS, rechts unter dem Pfeil nach unten "View compiled CSS" auswählen, dann wird das CSS kompiliert und heraus kommt dieses:

Code

.glitch {
  font-size: 130px;
  line-height: 1;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #fff;
}
.glitch:before,
.glitch:after {
  display: block;
  content: "17";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
}
.glitch:after {
  color: #f0f;
  z-index: -2;
}
.glitch:before {
  color: #0ff;
  z-index: -1;
}
.glitch:hover:before {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

Alles anzeigen

PaulRohr · 1. April 2020

Hallo Danke für die Hilfe und den Tipp. Das habe ich nicht gewusst mit dem Compiller bei codepen. Vielen Dank und liebe Grüße

Lupus_III · 2. April 2020

Wenn Du dich tiefer in die Materie einarbeiten willst, dann schau Dir mal diese Serie aus 3 Videos an. -

Externer Inhalt youtu.be

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Umschreiben von SASS / SCSS in CSS Code

Jetzt mitmachen!

Teilen

Tags