3

Есть 4 медиа-запроса для ширины экранов. Допустим я хочу применить к определенному размеру экрана определенное свойство SASS к определенному селектору. Как сделать так, чтобы в конечном CSS оставалось 4 медиа-запроса, а не "спагетти" из медиа-запросов?

SASS файл:

@mixin xs-width($num){
    @media screen and ( min-width: 320px) {
        width: calc(100%*($num/12));
    }
}

@mixin sm-width($num){
    @media screen and ( min-width: 480px) {
        width: calc(100%*($num/12));
    }
}

@mixin md-width($num){
    @media screen and ( min-width: 768px) {
        width: calc(100%*($num/12));
    }
}

@mixin lg-width($num){
    @media screen and ( min-width: 1024px) {
        width: calc(100%*($num/12));
    }
}

.test {
    @include xs-width (12);
    @include sm-width (6);
    @include md-width (4);
    @include lg-width (3);
}

.test-2 {
    @include xs-width (12);
    @include sm-width (6);
    @include md-width (4);
    @include lg-width (3);
}

Конечный CSS:

@media screen and (min-width: 320px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 480px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 768px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 1024px) {
  .test {
    width: calc(100%*($num/12));
  }
}

@media screen and (min-width: 320px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 480px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 768px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 1024px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}

А надо вот так (под каждый экран):

@media screen and (min-width: 320px) {
      .test {
        width: calc(100%*($num/12));
      }
      .test-2 {
        width: calc(100%*($num/12));
      }
}
3
  • 2
    npmjs.com/package/css-mqpacker
    – YozhEzhi
    Commented 19 апр. 2017 в 21:04
  • @yozhezhi, я через ruby делаю. Спасибо за инфу :)
    – bytesmite
    Commented 19 апр. 2017 в 21:13
  • Советую использовать css-mqpacker Commented 24 апр. 2018 в 9:28

1 ответ 1

2

Нашел решение от aaronjensen. Библиотека собирает кучу медиа-запросов в один при компиляции.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.