SASS හි මික්සින් වල අන්තර්ගත බ්ලොක්

මික්සිනයක් තුළ ශෛලීන්ගේ බ්ලොක් එකක් යැවීම සඳහා අපි @content අණපත භාවිතා කරමු, එහි අවශ්‍ය ශෛලීන් පිහිටුවනු ඇත.

අපි උදාහරණයක් සලකා බලමු:

styles.scss@mixin active {
  * div {
    @content;
  }
}

@include active {
  #block {
    color: red;
  }
}

සංකලනයේ ප්‍රතිඵලය:

styles.css* div #block {
  color: red; 
}

මෙය දැනගත යුතුය: අපි @content අණපත වරකට වඩා හෝ ලූපයක් තුළ නම්, ශෛලීන්ගේ බ්ලොක් එක එම ගණනක් කැඳවනු ඇත.

styles.scss@mixin active {
  div {
    @content;
  }
navbar {
    @content;
  }
}
@include active {
  #block {
    color: red;
  }
  button {
    color:green;
  }
}

සංකලනයෙන් පසු අපට පෙනෙන්නේ:

styles.cssdiv #block {
  color: red; 
}
div button {
  color: green; 
}

navbar #block {
  color: red; 
}
navbar button {
  color: green; 
}

styles.scss@mixin super-link {
  a {
    @content;
  }
}
@include super-link {
  color: blue;
  text-decoration: underline;
}

styles.scss@mixin super-link {
  a {
    @content;
  }
  a .primary-link{
    @content;
    font-weight: bold;
  }
}
@include super-link {
  color: blue;
  text-decoration: underline;
}

styles.scss@mixin colors {
  ...
}