Sass ist @content-Richtlinie Anwendungsfälle

hey Leute ich habe eine kleine Frage über @Inhalt in sass

Ich noch nicht gut verstehen, wie es zu benutzen, wie ich Inhalte Lesen, wenn Sie möchten, verwenden Sie ein mixin und legen noch etwas anderes gibt.

meine Frage ist: warum muss ich mit @Inhalten, wenn arbeiten ohne .

mein Beispiel:

@mixin context--alternate-template {
    margin: 0;
    font-size: 14px;
}

.content-sample {
  @import context--alternate-template;
  background-color: black;
}

Ausgabe css:

.content-sample {
  margin: 0;
  font-size: 14px;
  background-color: black;
}

Probe, die ich sah auf web:

@mixin context--alternate-template {
    margin: 0;
    font-size: 14px;
    @content
}



.content-sample {
  @import context--alternate-template;
  background-color: black;
}

Ausgabe css:

   .content-sample {
      margin: 0;
      font-size: 14px;
      background-color: black;
    }

also ja, warum muss ich einfügen @Inhalt in der mixin, wenn Werke ohne.

InformationsquelleAutor raduken | 2016-05-13



One Reply
  1. 3

    @content ist nützlich für die Spritzen eine Kopie der Regeln in Ihrem mixin. Die korrekte syntax Ihrer Probe im Internet gesehen wird:

    SCSS:

    @mixin context--alternate-template {
      margin: 0;
      font-size: 14px;
      @content
    }
    
    .content-sample {
      @include context--alternate-template {
        background-color: black;
      }
    }

    Hinweis: die Klammern nach der @include nennen. Nun, Sie haben die Regel background-color: black; injiziert, nachdem font-size: 14px;.

    CSS-Ausgang:

    .content-sample {
      margin: 0;
      font-size: 14px;
      background-color: black;
    }

    In diesem Fall @content ist nutzlos. In der Tat, die interessantesten Nutzung mit @content ist zu injizieren verschachtelte Selektoren:

    SCSS:

    @mixin context--alternate-template {
      margin: 0;
      font-size: 14px;
      @content
    }
    
    .content-sample {
      @include context--alternate-template {
        .important-thing {
          color: red;
        }
        &.is-italic {
          font-family: 'my-webfont-italic';
        }
      }
    
      //outside mixin call
      background-color: black;
    }

    CSS-Ausgabe:

    .content-sample {
      margin: 0;
      font-size: 14px;
      background-color: black;
    }
    .content-sample .important-thing {
      color: red;
    }
    .content-sample.is-italic {
      font-family: 'my-webfont-italic';
    }
    • vielen Dank, diese Klarheit mich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.