Above¶

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

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

• Regex match: /^media-+/i
• Key must be a String
• media-+<raw:value> === (min-width: <raw:value>)
• media-+<query:helper> === (min-width: <query:helper>)

At¶

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

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

• Regex match: /^media-/i
• Key does not have to be a String, but it should be
• This match is run last, so you do not need to worry about conflicts with the other mixin keys
• media-<query:helper> === (min-width: <query:helper-prv>) and (max-width: <query:helper>)

Below¶

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

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

• Regex match: /^media--/i
• Keys must be a String
• below: <raw:value> === (max-width: <raw:value>)
• below: <query:helper> === (max-width: <query:helper>)

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>.

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

• Regex match: /^media-|/i
• Key does not have to be in String format, but it should be
• media-|<raw:value:min>-<raw:value:max> === (min-width: <raw:value:min>) and (max-width: <raw:value:max>)
• media-|<query:helper:min>-<query:helper:max> === (min-width: <query:helper:min>) and (max-width: <query:helper:max>)