Die gebruik van mixins in SASS

Nadat ons 'n mixin verklaar het roep ons dit met die direktief @include, wat noodwendig die naam van die mixin moet insluit. Dit kan ook opsioneel parameters en style bevat. Kom ons kyk na 'n voorbeeld:

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

Die resultaat van kompilasie:

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

Mixin kan ook in die wortel van die dokument geroep word, maar slegs in die geval dat hulle nie reëls beskryf nie en daar is geen verwysing na die ouer nie. Kyk na die volgende voorbeeld:

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

Na kompilasie sal ons sien:

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

Задание 1

Vertel wat die resultaat van kompilasie sal wees van die volgende kode:

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

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

Задание 2

Vertel wat die resultaat van kompilasie sal wees van die volgende kode:

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

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

Задание 3

Vertel wat die resultaat van kompilasie sal wees van die volgende kode:

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

Vertel wat die resultaat van kompilasie sal wees van die volgende kode:

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;
}