Above

Description: An above mixin can be created with an Object key that matches media-+<query:helper | raw:value>.

Edit
ctr('.test', {
width: 200px
// query:helper
'media-+sm': {
height: 100px
}
// raw:value
'media-+1050px': {
height: 300px
}
})
.test:
width: 200px
# query:helper
media-+sm:
height: 100px
# raw:value
media-+1050px:
height: 300px
.test {
width: 200px;
}
@media (min-width: 600px) {
.test {
height: 100px;
}
}
@media (min-width: 1050px) {
.test {
height: 300px;
}
}
ctr('.test', {
  width: 200px
  // query:helper
  'media-+sm': {
    height: 100px
  }
  // raw:value
  'media-+1050px': {
    height: 300px
  }
})
.test {
  width: 200px;
}
@media (min-width: 600px) {
  .test {
    height: 100px;
  }
}
@media (min-width: 1050px) {
  .test {
    height: 300px;
  }
}
.test:
  width: 200px
  # query:helper
  media-+sm:
    height: 100px
  # raw:value
  media-+1050px:
    height: 300px

Notes

At

Description: An at mixin can be created with an Object key that matches media-<query:helper>.

Edit
ctr('.test', {
height: 200px
'media-xs': {
query: {
max-height: 100px
}
width: 100px
}
'media-md': {
query: {
type: 'screen'
}
width: 200px
}
'media-hd': {
width: 300px
}
})
.test:
height: 200px
media-xs:
query:
max-height: 100px
width: 100px
media-md:
query:
type: screen
width: 200px
media-hd:
width: 300px
.test {
height: 200px;
}
@media (max-width: 400px) and (max-height: 100px) {
.test {
width: 100px;
}
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
.test {
width: 200px;
}
}
@media (min-width: 1050px) {
.test {
width: 300px;
}
}
ctr('.test', {
  height: 200px
  'media-xs': {
    query: {
      max-height: 100px
    }
    width: 100px
  }
  'media-md': {
    query: {
      type: 'screen'
    }
    width: 200px
  }
  'media-hd': {
    width: 300px
  }
})
.test {
  height: 200px;
}
@media (max-width: 400px) and (max-height: 100px) {
  .test {
    width: 100px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 200px;
  }
}
@media (min-width: 1050px) {
  .test {
    width: 300px;
  }
}
.test:
  height: 200px
  media-xs:
    query:
      max-height: 100px
    width: 100px
  media-md:
    query:
      type: screen
    width: 200px
  media-hd:
    width: 300px

Notes

Below

Description: A below mixin can be created with an Object key that matches media--<query:helper | raw:value>.

Edit
ctr('.test', {
width: 200px
// query:helper
'media--sm': {
height: 100px
}
// raw:value
'media--1050px': {
height: 300px
}
})
.test:
width: 200px
# query:helper
media--sm:
height: 100px
# raw:value
media--1050px:
height: 300px
.test {
width: 200px;
}
@media (max-width: 600px) {
.test {
height: 100px;
}
}
@media (max-width: 1050px) {
.test {
height: 300px;
}
}
ctr('.test', {
  width: 200px
  // query:helper
  'media--sm': {
    height: 100px
  }
  // raw:value
  'media--1050px': {
    height: 300px
  }
})
.test {
  width: 200px;
}
@media (max-width: 600px) {
  .test {
    height: 100px;
  }
}
@media (max-width: 1050px) {
  .test {
    height: 300px;
  }
}
.test:
  width: 200px
  # query:helper
  media--sm:
    height: 100px
  # raw:value
  media--1050px:
    height: 300px

Notes

Between

Description: A between mixin can be created with an Object key that matches media-|<query:helper:min | raw:value:min>-<query:helper:max | raw:value:max>.

Edit
ctr('.test', {
width: 200px
// query:helper
'media-|xs-md': {
height: 100px
}
// raw:value
'media-|1050px-1800px': {
height: 300px
}
})
.test:
width: 200px
# query:helper
media-|xs-md:
height: 100px
# raw:value
media-|1050px-1800px:
height: 300px
.test {
width: 200px;
}
@media (min-width: 400px) and (max-width: 800px) {
.test {
height: 100px;
}
}
@media (min-width: 1050px) and (max-width: 1800px) {
.test {
height: 300px;
}
}
ctr('.test', {
  width: 200px
  // query:helper
  'media-|xs-md': {
    height: 100px
  }
  // raw:value
  'media-|1050px-1800px': {
    height: 300px
  }
})
.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 800px) {
  .test {
    height: 100px;
  }
}
@media (min-width: 1050px) and (max-width: 1800px) {
  .test {
    height: 300px;
  }
}
.test:
  width: 200px
  # query:helper
  media-|xs-md:
    height: 100px
  # raw:value
  media-|1050px-1800px:
    height: 300px

Notes