Неожиданная компиляция с запросами СМИ SASS в mixin

В настоящее время я работаю над некоторым интерфейсом для проекта Vaadin. Я пытаюсь привнести какой-то отзывчивый стиль. К сожалению, Vaadin построил в ответном дополнении does not have support for IE11.Неожиданная компиляция с запросами СМИ SASS в mixin

Поэтому я хочу использовать медиа-запросы, чтобы сделать отзывчивый дизайн. У меня есть два файла SASS: commontheme.scss - это общий стиль, а mymixin.scss содержит весь стиль для рабочего стола.

Так вот мой код:

@import "../commontheme/commontheme.scss"; //the common them. The common theme 

@mixin mymixin 
{ 
    @include commontheme; //Including the stuff from the common theme. 

    $small-size: 100px; 
    $med-size: 200px; 

    @media (max-width:500px) 
    { 
     .my-image 
     { 
      width: $small-size; 
     } 
    } 

    @media (min-width:501px) 
    { 
     .my-image 
     { 
      width: $med-size; 
     } 
    } 
}

компилируется к следующему CSS:

.mymixin 
{ 
    @media (max-width:500px) 
    { 
     .my-image 
     { 
      width: 100px; 
     } 
    } 

    @media (min-width:501px) 
    { 
     .my-image 
     { 
      width: 200px; 
     } 
    } 
}

Принимая во внимание то, что мне нужно, это следующий код, который отлично работает, если я живу редактировать вне обижая строки в начале и конце блока в скомпилированном CSS.

@media (max-width:500px) 
{ 
    .my-image 
    { 
     width: 100px; 
    } 
} 

@media (min-width:501px) 
{ 
    .my-image 
    { 
     width: 200px; 
    } 
}

Я новичок во всем стеке разработки. Поэтому я предполагаю, что я что-то делаю неправильно, но мне не удавалось это исправить. Если кто-то здесь может предложить какое-то понимание или направление для изучения, я бы очень признателен.

Для справки, я использую Vaadin 7.2.3, который должен включать полную поддержку SASS.

источник

2014-10-18 leonvn

Нет ничего плохого в вашем Sass (см .: http://sassmeister.com/gist/fa94eb844ee63e2c3a7b). В будущем, пожалуйста, убедитесь, что ваш код может компилироваться как есть (неопределенные миксы, недоступный импорт и т. Д.). – cimmanon

Чувствительный аддон действительно работает в IE11, как шарм. Используйте его, потому что я думаю, что обычные запросы в формате CSS не так, как вы хотите. С помощью CSS вы не можете объявить точку останова, когда, например, родительский компонент вашего реагирующего компонента становится слишком малым/широким. – agassner

Вам нужно просто поставить @media теги из mymixin вроде этого:

$myVar: 100px; 
@mixin mymixin 
{ 
    @include commontheme; //Including the stuff from the common theme. 
    .my-image 
    { 
     width: $myVar; 
    } 
} 

$myVar: 50px; 
@media (max-width:500px) 
{ 
    .mymixin 
    { 
     .my-image 
     { 
      width: $myVar; 
     } 
    } 
}

Вы, вероятно, добавить @media Mixins в отдельный файл .scss и включить его в основной myTheme.scss, но структура файла concpet является а не часть этого вопроса.

источник

2014-10-18 17:29:44 Zigac

Неожиданная компиляция с запросами СМИ SASS в mixin

ответ

Смежные вопросы