Как расширить медиа запросы в sass - PullRequest
Новая
       11

Как расширить медиа запросы в sass

0 голосов
/ 14 ноября 2018

У меня есть медиа-запросы для расширения 

@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
margin: 14% auto;    
}

Я хочу расширить медиа-запрос. Я не нашел ничего близкого. Я знаю, что следующее неверно 

 @media (min-width: 576px)
   .modal-dialog
  {
    @extend @media (min-width: 576px)
       .modal-dialog{
        max-width:800px
       }
  }

Я понятия не имеюОб этом может узнать кто угодно.

Любая помощь оценена

Обновленный код 

 @mixin modal-dialog-mixin() {
max-width: 800px;  
 }

 @media ( min-width : 576px ){
@extend .modal-dialog;    //error here
@include modal-dialog-mixin();
 }

не работает в @extend .modal-dialog;

1 Ответ

0 голосов
/ 14 ноября 2018

Ответ, который мы ищем - @mixin. С @mixin мы можем легко импортировать все правила, которые хотим. Нам нужно поместить код из класса, который мы хотим расширить, внутри @mixin, а не внутри самого класса. Тогда и класс, и раздел внутри медиазапроса импортируют функциональность @mixin. 

@mixin modal-dialog-mixin() {
   max-width: 500px;
   margin: 14% auto;   
   }


 @media (max-width: 576px) {
   button {
     @include modal-dialog-mixin();
   }
 }

Вы также можете просмотреть эту ссылку для получения дополнительной информации.

...