Verwendung von Mixins in SASS

Nachdem wir ein Mixin deklariert haben, rufen wir es mit der Direktive @include auf, die unbedingt den Namen des Mixins enthalten muss. Optional können dort auch Parameter und Styles stehen. Betrachten wir ein Beispiel:

styles.scss@mixin mix{
  width: 100px;
  height: 100px;
}
div {
  @include mix;
  padding: 4px;
  margin-top: 10px;
}

Ergebnis der Kompilation:

styles.cssdiv {
  width: 100px;
  height: 100px;
  padding: 4px;
  margin-top: 10px;
}

Mixins können auch im Dokumentstamm aufgerufen werden, aber nur in dem Fall, wenn sie keine Regeln beschreiben und keinen Verweis auf das Elternelement enthalten. Sehen Sie sich das folgende Beispiel an:

styles.scss@mixin active {
  p {
    color: #161618;
    background-color: red;
  }
}
@include active;

Nach der Kompilation sehen wir:

styles.cssp {
  color: #161618;
  background-color: red;
}

Задание 1

Erklären Sie, wie das Ergebnis der Kompilation des folgenden Codes aussehen wird:

styles.scss@mixin font {
  font-family:'Courier New', Courier, monospace;
  font-size: 12px;
}

#product-card {
  @include font;
  color: #090957;
  font-weight: 600px;
}

Задание 2

Erklären Sie, wie das Ergebnis der Kompilation des folgenden Codes aussehen wird:

styles.scss@mixin style {
  color:#090957;
}

button, link {
  @include style;
  font-size: 10px;
  padding: 4px;
}

Задание 3

Erklären Sie, wie das Ergebnis der Kompilation des folgenden Codes aussehen wird:

styles.scss@mixin active-text {
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  color: blue;
}

#product-card, .active, .content {
  @include active-text;
  padding: 4px;
}

Задание 4

Erklären Sie, wie das Ergebnis der Kompilation des folgenden Codes aussehen wird:

styles.scss@mixin size {
  font-size: 14px;
  padding: 10px;
  margin: 4px;
}

@mixin color {
  color: #580909;
  background-color: #e9e5ab;
}

#product-card {
  @include size;
  @include color;
  width: 600px;
}