Above

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

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

Notes

At

Description: An at mixin can be created in a medias Object with an Object key that matches <query:helper>.

Edit
ctr('.test', {
width: 200px
medias: {
'sm': {
width: 100px
}
'lg': {
width: 300px
}
}
})
.test:
width: 200px
medias:
sm:
width: 100px
lg:
width: 300px
.test {
width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
.test {
width: 100px;
}
}
@media (min-width: 800px) and (max-width: 1050px) {
.test {
width: 300px;
}
}
ctr('.test', {
  width: 200px
  medias: {
    'sm': {
      width: 100px
    }
    'lg': {
      width: 300px
    }
  }
})
.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test {
    width: 300px;
  }
}
.test:
  width: 200px
  medias:
    sm:
      width: 100px
    lg:
      width: 300px

Notes

Below

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

Edit
ctr('.test', {
height: 200px
medias: {
'-sm': {
width: 100px
}
'-1050px': {
width: 300px
}