Syntax

Description: A logical operator is defined as a logical query combinator.

ctr('<#selector>', {
media: {
query: {
<logical:operator>: {
<...>: <...>
}
}
<...>: <...>
}
})
<#selector>:
media:
query:
<logical:operator>:
<...>: <...>
<...>: <...>
@media (<...>: <...>) <logical:operator> (<...>: <...>) {
<#selector> {
<...>: <...>;
}
}

Notes

And

Description: An andCondition Object combines its key-value pairs with an and logical operator.

Edit
ctr('.test', {
background: teal
media: {
query: {
andCondition: {
min-width: 200px
max-width: 400px
}
}
background: red
}
})
.test:
background: teal
media:
query:
andCondition:
min-width: 200px
max-width: 400px
background: red
.test {
background: #008080;
}
@media (min-width: 200px) and (max-width: 400px) {
.test {
background: #f00;
}
}
ctr('.test', {
  background: teal
  media: {
    query: {
      andCondition: {
        min-width: 200px
        max-width: 400px
      }
    }
    background: red
  }
})
.test {
  background: #008080;
}
@media (min-width: 200px) and (max-width: 400px) {
  .test {
    background: #f00;
  }
}
.test:
  background: teal
  media:
    query:
      andCondition:
        min-width: 200px
        max-width: 400px
    background: red

Notes

Or

Description: An orCondition Object combines its key-value pairs with an , (or) logical operator.

Edit
ctr('.test', {
background: teal
media: {
query: {
orCondition: {
max-width: 400px 30vw
}
}
background: red
}
})
.test:
background: teal
media:
query:
orCondition:
max-width: [400px, 30vw]
background: red
.test {
background: #008080;
}
@media (max-width: 30vw), (max-width: 400px) {
.test {
background: #f00;
}
}
ctr('.test', {
  background: teal
  media: {
    query: {
      orCondition: {
        max-width: 400px 30vw
      }
    }
    background: red
  }
})
.test {
  background: #008080;
}
@media (max-width: 30vw), (max-width: 400px) {
  .test {
    background: #f00;
  }
}
.test:
  background: teal
  media:
    query:
      orCondition:
        max-width: [400px, 30vw]
    background: red

Notes

And With Or

Description: andCondition and orCondition can be used together.

Edit
ctr('.test', {
width: 200px
media: {
query: {
andCondition: {
min-width: 400px 40vw
}
orCondition: {
max-height: 400px 40vh
}
}
background: red
}
})
.test:
width: 200px
media:
query:
andCondition:
min-width: [400px, 40vw]
orCondition:
max-height: [400px, 40vh]
background: red
.test {
width: 200px;
}
@media (min-width: 40vw) and (min-width: 400px) and (max-height: 40vh), (max-height: 400px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 400px 40vw
      }
      orCondition: {
        max-height: 400px 40vh
      }
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (min-width: 40vw) and (min-width: 400px) and (max-height: 40vh), (max-height: 400px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: [400px, 40vw]
      orCondition:
        max-height: [400px, 40vh]
    background: red

Notes

And With Mixin

Description: An andCondition can be used in combination with a mixin.

Edit
ctr('.test', {
width: 200px
media: {
query: {
andCondition: {
above: 'sm'
min-height: 200px
}
}
background: red
}
})
.test:
width: 200px
media:
query:
andCondition:
above: sm
min-height: 200px
background: red
.test {
width: 200px;
}
@media (min-width: 600px) and (min-height: 200px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        above: 'sm'
        min-height: 200px
      }
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (min-width: 600px) and (min-height: 200px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      andCondition:
        above: sm
        min-height: 200px
    background: red

Notes

Or With Mixin

Description: An orCondition can be used in combination with a mixin.

Edit
ctr('.test', {
width: 200px
media: {
query: {
orCondition: {
above: 'sm'
min-height: 20vh
}
}
background: red
}
})
.test:
width: 200px
media:
query:
orCondition:
above: sm
min-height: 20vh
background: red
.test {
width: 200px;
}
@media (min-width: 600px), (min-height: 20vh) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      orCondition: {
        above: 'sm'
        min-height: 20vh
      }
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (min-width: 600px), (min-height: 20vh) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      orCondition:
        above: sm
        min-height: 20vh
    background: red

Notes