Как создать псевдонимы Sass mixin с поддержкой блоков контента? - PullRequest
Новая
       3

Как создать псевдонимы Sass mixin с поддержкой блоков контента?

0 голосов
/ 26 апреля 2018

Как определить несколько имен для одного и того же миксина с поддержкой блоков контента?

Определение 

@mixin desktop-breakpoint {
   @media only screen and (min-width: 769px) {
      @content;
   }
}

@mixin large-breakpoint {
   @include desktop-breakpoint;
}

Использование 

.my-class {
   font-size: small;

   @include desktop-breakpoint {
      font-size: big;
   }
}

.my-other-class {
   color: red;

   @include large-breakpoint {
      color: blue;
   }
}

Сообщение об ошибке

Миксин "large-breakpoint" не принимает блок контента.

1 Ответ

0 голосов
/ 26 апреля 2018

Вы не передаете @content при использовании @include desktop-breakpoint в своем large-breakpoint миксине. Это исправит ошибку вашей компиляции: 

@mixin large-breakpoint {
   // Remember to pass content received by mixin to @include
   @include desktop-breakpoint {
     @content;
   }
}

Тогда ваш CSS будет правильно скомпилирован, как и предполагалось: 

.my-class {
  font-size: small;
}
@media only screen and (min-width: 769px) {
  .my-class {
    font-size: big;
  }
}

.my-other-class {
  color: red;
}
@media only screen and (min-width: 769px) {
  .my-other-class {
    color: blue;
  }
}

См. Пример проверки концепции на основе вашего измененного кода: https://www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527

...