Блог

Я написал Sass mixin, который работает, как и ожидалось, за исключением одной проблемы: директива @content, похоже, включает родительский селектор, а не только содержимое, заключенное в круглые скобки к mixin.

Микширование:

 @mixin breakpoint($parameters){

    $query: 'screen and ';

    @each $variable, $value in $parameters {
        $query: $query   '('   $variable   ':'   $value   ') and ';
    };

    $query: str-slice($query, 0, -5);

    @media #{$query} { @content; };
}
  

Я пытаюсь использовать его следующим образом:

 #div {
    background-color: blue;

    @include breakpoint((max-width:500px)) {
        background-color: purple;
    };
}
  

Однако это компилируется до следующего, с повторением идентификатора #div:

 #div {
  background-color: blue; }
  @media screen and (max-width: 500px) {
    #div {
      background-color: purple; } }
  

Желаемый результат:

 #div {
  background-color: blue;
  @media screen and (max-width: 500px) {
      background-color: purple;}
}
  

Любая помощь в устранении этой проблемы очень ценится!