Объедините несколько медиа-запросов с классами внутри - PullRequest
Новая
       13

Объедините несколько медиа-запросов с классами внутри

0 голосов
/ 10 января 2020

Я хочу создать миксин, который добавляет несколько медиазапросов к классу.

Можно ли как-нибудь комбинировать медиазапросы с классами, которые находятся внутри миксина, но совместно используют один и тот же контент?

Моя цель - максимально сократить количество дублирующихся кодов. 

=constructor()
    @content

    @media (min-width: $tablet)

        &-tablet
            @content

    @media (min-width: $tabletAndPC)

        &-tablet-pc
            @content

    @media (min-width: $tabletAndPC) and ($touchDevice)

        &-tablet-pc
            @content

    @media (min-width: $pc)

        &-pc
            @content

    @media (min-aspect-ratio: $ultrawideRatio) and (min-width: $ultrawide)

        &-ultrawide
            @content

    @media (min-aspect-ratio: $superUltrawideRatio) and (min-width: $ultrawide)

        &-super-ultrawide
            @content

Я использую этот миксин для каждого класса, в котором я хочу получить адаптивный класс.

Примерно так: class = "element element-lg-p c"

Элемент, который меняет свой размер по заданному c медиазапросу. 

.element
     +constructor()
          // basic class code

     &-lg
         +constructor()
             // basic class code + size specific code
...