Syntax

Description: Mixin is defined as a set of media query helpers designed to be used with the predefined query helpers.

ctr('<#selector>', {
media: {
query: {
<mixin:property>: <mixin:value>
}
<...>: <...>
}
})
<#selector>:
media:
query:
<mixin:property>: <mixin:value>
<...>: <...>
@media (<mixin-condition>) {
<#selector> {
<...>: <...>;
}
}

Notes

Above

Description: The above property creates a media query condition above the specified value.

Edit
ctr('.test', {
width: 200px
media: {
query: {
above: 'md'
}
width: 100px
}
})
.test:
width: 200px
media:
query:
above: md
width: 100px
.test {
width: 200px;
}
@media (min-width: 800px) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      above: 'md'
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-width: 800px) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    query:
      above: md
    width: 100px

Notes

At

Description: The at property creates a media query condition that is applied when the screen is less than the at value and greater than the previous query helper.

Edit
ctr('.test', {
width: 200px
media: {
width: 100px
query: {
at: 'md'
}
}
})
.test:
width: 200px
media:
width: 100px
query:
at: md
.test {
width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    width: 100px
    query: {
      at: 'md'
    }
  }
})
.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    width: 100px
    query:
      at: md

Notes

At Shorthand

Description: A query helper value for the query property creates an at mixin.

Edit
ctr('.test', {
width: 200px
media: {
query: 'md'
width: 100px
}
})
.test:
width: 200px
media:
query: md
width: 100px
.test {
width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: 'md'
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    query: md
    width: 100px

Below

Description: The below property creates a media query condition below the specified value.

Edit
ctr('.test', {
width: 200px
media: {
query: {
below: 'lg'
}
width: 100px
}
})
.test:
width: 200px
media:
query:
below: lg
width: 100px
.test {
width: 200px;
}
@media (max-width: 1050px) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      below: 'lg'
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (max-width: 1050px) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    query:
      below: lg
    width: 100px

Notes

Between

Description: The between property creates a media query condition between the first and second List value.

Edit
ctr('.test', {
width: 200px
media: {
query: {
between: 'sm' 'lg'
}
width: 100px
}
})
.test:
width: 200px
media:
query:
between: [sm, lg]
width: 100px
.test {
width: 200px;
}
@media (min-width: 600px) and (max-width: 1050px) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      between: 'sm' 'lg'
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 1050px) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    query:
      between: [sm, lg]
    width: 100px

Notes

Density

Description: The density property creates a media query condition below the specified density value.

Edit
ctr('.test', {
width: 200px
media: {
query: {
density: 2
}
width: 100px
}
})
.test:
width: 200px
media:
width: 100px
query:
density: 2
.test {
width: 200px;
}
@media (min-resolution: 2dppx) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      density: 2
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-resolution: 2dppx) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    width: 100px
    query:
      density: 2
Edit
ctr('.test', {
width: 200px
media: {
query: {
density: '3dpi'
}
width: 100px
}
})
.test:
width: 200px
media:
query:
density: 3dpi
width: 100px
.test {
width: 200px;
}
@media (min-resolution: 3dpi) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      density: '3dpi'
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-resolution: 3dpi) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    query:
      density: 3dpi
    width: 100px

Notes

Device Width

Description: The value of true for the device property creates device-specific media query conditions.

Edit
ctr('.test', {
width: 200px
media: {
query: {
between: 'md' 'lg'
device: true
}
width: 100px
}
})
.test:
width: 200px
media:
query:
between: [md, lg]
device: true
width: 100px
.test {
width: 200px;
}
@media (min-device-width: 800px) and (max-device-width: 1050px) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      between: 'md' 'lg'
      device: true
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-device-width: 800px) and (max-device-width: 1050px) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    query:
      between: [md, lg]
      device: true
    width: 100px

Notes

Landscape

Description: The value of true for the landscape property creates a landscape-specific media query condition.

Edit
ctr('.test', {
width: 200px
media: {
query: {
landscape: true
}
height: 300px
}
})
.test:
width: 200px
media:
query:
landscape: true
height: 300px
.test {
width: 200px;
}
@media (orientation: landscape) {
.test {
height: 300px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      landscape: true
    }
    height: 300px
  }
})
.test {
  width: 200px;
}
@media (orientation: landscape) {
  .test {
    height: 300px;
  }
}
.test:
  width: 200px
  media:
    query:
      landscape: true
    height: 300px

Notes

Portrait

Description: The value of true for the portrait property creates a portrait-specific media query condition.

Edit
ctr('.test', {
width: 200px
media: {
query: {
portrait: true
}
height: 300px
}
})
.test:
width: 200px
media:
query:
portrait: true
height: 300px
.test {
width: 200px;
}
@media (orientation: portrait) {
.test {
height: 300px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      portrait: true
    }
    height: 300px
  }
})
.test {
  width: 200px;
}
@media (orientation: portrait) {
  .test {
    height: 300px;
  }
}
.test:
  width: 200px
  media:
    query:
      portrait: true
    height: 300px

Notes

Multiple

Description: Multiple mixins can be used together.

Edit
ctr('.test', {
width: 200px
media: {
query: {
density: 2
above: '300px'
}
width: 100px
}
})
.test:
width: 200px
media:
width: 100px
query:
density: 2
above: 300px
.test {
width: 200px;
}
@media (min-width: 300px) and (min-resolution: 2dppx) {
.test {
width: 100px;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      density: 2
      above: '300px'
    }
    width: 100px
  }
})
.test {
  width: 200px;
}
@media (min-width: 300px) and (min-resolution: 2dppx) {
  .test {
    width: 100px;
  }
}
.test:
  width: 200px
  media:
    width: 100px
    query:
      density: 2
      above: 300px