Basic

Description: The medias Object groups media instances together in which each child Object is treated as a separate media instance. If a query Object or property is not defined in the media instance, its Object key is used to create a mixin Object.

Edit
ctr('.test', {
width: 200px
medias: {
'-sm': {
width: 300px
}
md: {
width: 400px
}
custom: {
query: {
above: 'md'
density: 2
}
width: 500px
}
}
})
.test:
width: 200px
medias:
-sm:
width: 300px
md:
width: 400px
custom:
width: 500px
query:
above: md
density: 2
.test {
width: 200px;
}
@media (max-width: 600px) {
.test {
width: 300px;
}
}
@media (min-width: 600px) and (max-width: 800px) {
.test {
width: 400px;
}
}
@media (min-width: 800px) and (min-resolution: 2dppx) {
.test {
width: 500px;
}
}
ctr('.test', {
  width: 200px
  medias: {
    '-sm': {
      width: 300px
    }
    md: {
      width: 400px
    }
    custom: {
      query: {
        above: 'md'
        density: 2
      }
      width: 500px
    }
  }
})
.test {
  width: 200px;
}
@media (max-width: 600px) {
  .test {
    width: 300px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 800px) and (min-resolution: 2dppx) {
  .test {
    width: 500px;
  }
}
.test:
  width: 200px
  medias:
    -sm:
      width: 300px
    md:
      width: 400px
    custom:
      width: 500px
      query:
        above: md
        density: 2

Notes

Common Key

Description: A common Object can be defined in the medias Object to specify common values used by all media instances.

Edit
ctr('.test', {
width: 200px
medias: {
// merged into each media
common: {
query: {
type: 'screen'
}
font-size: 1em
}
'-sm': {
width: 300px
}
md: {
width: 400px
}
custom: {
query: {
above: 'md'
density: 2
}
width: 500px
}
}
})
.test:
width: 200px
medias:
-sm:
width: 300px
md:
width: 400px
custom:
width: 500px
query:
above: md
density: 2
# added to all
common:
font-size: 1em
query:
type: screen
.test {
width: 200px;
}
@media only screen and (max-width: 600px) {
.test {
width: 300px;
font-size: 1em;
}
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
.test {
width: 400px;
font-size: 1em;
}
}
@media only screen and (min-width: 800px) and (min-resolution: 2dppx) {
.test {
width: 500px;
font-size: 1em;
}
}
ctr('.test', {
  width: 200px
  medias: {
    // merged into each media
    common: {
      query: {
        type: 'screen'
      }
      font-size: 1em
    }
    '-sm': {
      width: 300px
    }
    md: {
      width: 400px
    }
    custom: {
      query: {
        above: 'md'
        density: 2
      }
      width: 500px
    }
  }
})
.test {
  width: 200px;
}
@media only screen and (max-width: 600px) {
  .test {
    width: 300px;
    font-size: 1em;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    font-size: 1em;
  }
}
@media only screen and (min-width: 800px) and (min-resolution: 2dppx) {
  .test {
    width: 500px;
    font-size: 1em;
  }
}
.test:
  width: 200px
  medias:
    -sm:
      width: 300px
    md:
      width: 400px
    custom:
      width: 500px
      query:
        above: md
        density: 2
    # added to all
    common:
      font-size: 1em
      query:
        type: screen

Notes

Omit

Description: A List value for the omit option property in an Object media instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
medias: {
common: {
query: {
type: 'screen'
'max-height': 400px
}
height: 222px
}
sm: {
width: 300px
}
md: {
option: {
// omits type
omit: 'query.type'
}
width: 400px
}
}
})
.test:
width: 200px
medias:
common:
query:
type: screen
max-height: 400px
height: 222px
sm:
width: 300px
md:
option:
# omits type
omit: query.type
width: 400px
.test {
width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
.test {
width: 300px;
height: 222px;
}
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
.test {
width: 400px;
height: 222px;
}
}
ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      option: {
        // omits type
        omit: 'query.type'
      }
      width: 400px
    }
  }
})
.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}
.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      option:
        # omits type
        omit: query.type
      width: 400px

Notes

Pick

Description: A List value for the pick option property in an Object media instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
medias: {
common: {
query: {
type: 'screen'
'max-height': 400px
}
height: 222px
}
sm: {
width: 300px
}
md: {
option: {
// picks type height + max-height
pick: 'height' 'query.max-height'
}
width: 400px
}
}
})
.test:
width: 200px
medias:
common:
query:
type: screen
max-height: 400px
height: 222px
sm:
width: 300px
md:
option:
# picks type height + max-height
pick: [height, query.max-height]
width: 400px
.test {
width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
.test {
width: 300px;
height: 222px;
}
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
.test {
width: 400px;
height: 222px;
}
}
ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      option: {
        // picks type height + max-height
        pick: 'height' 'query.max-height'
      }
      width: 400px
    }
  }
})
.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}
.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      option:
        # picks type height + max-height
        pick: [height, query.max-height]
      width: 400px

Notes

Target

Description: A List value for the target option property in the common Object specifies specific media instances to merge with.

Edit
ctr('.test', {
width: 200px
medias: {
common: {
option: {
// only merges with "md"
target: 'md'
}
query: {
type: 'screen'
'max-height': 400px
}
height: 222px
}
sm: {
width: 300px
}
md: {
width: 400px
}
}
})
.test:
width: 200px
medias:
common:
option:
# only merges with "md"
target: md
query:
type: screen
max-height: 400px
height: 222px
sm:
width: 300px
md:
width: 400px
.test {
width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
.test {
width: 300px;
}
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
.test {
width: 400px;
height: 222px;
}
}
ctr('.test', {
  width: 200px
  medias: {
    common: {
      option: {
        // only merges with "md"
        target: 'md'
      }
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      width: 400px
    }
  }
})
.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    width: 300px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}
.test:
  width: 200px
  medias:
    common:
      option:
        # only merges with "md"
        target: md
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      width: 400px

Notes

True Value

Description: A true Boolean value for an Object media instance inherits the common Object value.

Edit
ctr('.test', {
width: 200px
medias: {
common: {
query: {
type: 'screen'
'max-height': 400px
}
height: 222px
}
sm: {
width: 300px
}
// inherits common
md: true
}
})
.test:
width: 200px
medias:
common:
query:
type: screen
max-height: 400px
height: 222px
sm:
width: 300px
# inherits common
md: true
.test {
width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
.test {
width: 300px;
height: 222px;
}
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
.test {
height: 222px;
}
}
ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    // inherits common
    md: true
  }
})
.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    height: 222px;
  }
}
.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    # inherits common
    md: true