CSS/SCSS Schnipsel, die brauche, aber immer wieder vergesse..

Screenshot SCSS Stylesheet in PHPStorm

Kräftig genestet? Aber andere eine Klasse gehört vor die genestete?

    &--footer {
      @at-root p#{&} {
        text-transform: uppercase;
      }
    }

Der Designer liebt Überschriften, die in jeder Zeile eine an den Content angepasste Zeilenlänge haben? Span for the win, aber Vorsicht, mobil ein Graus und am besten in ganz kleinen Viewports überschreiben.

Die Deklaration width: max-content sorgt übrigens dafür, dass Chrome mitspielt.

    &-headline {
      color: $font-highlight-color;
      display: flex;
      flex-direction: column;
      font-family: 'Roboto', sans-serif;
      font-size: 3rem;
      font-weight: bold;
      line-height: 1.25;
      max-width: 30rem;

      @media screen and (max-width: 320px) {
        max-width: 28rem;
        word-break: break-word;
        hyphens: auto;
        font-size: 2.7rem;
      }

      span {
        display: table;
        background: $white;
        padding: 0 1.2rem;
        width: max-content;
      }
    }

 

Neuen Kommentar hinzufügen

Eingeschränktes HTML

  • Erlaubte HTML-Tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Zeilenumbrüche und Absätze werden automatisch erzeugt.
  • Website- und E-Mail-Adressen werden automatisch in Links umgewandelt.