Syntax

Description: media is defined as an @media at-rule.

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

Notes

Basic

Description: A media Object creates an @media at-rule whose media query condition is defined by the query Object key-value pairs for the properties in the media Object at the scope level it is defined.

Edit
ctr('.test', {
width: 200px
media: {
query: {
'max-width': 800px
}
background: red
}
})
.test:
width: 200px
media:
query:
max-width: 800px
background: red
.test {
width: 200px;
}
@media (max-width: 800px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      max-width: 800px
    background: red

Notes

Multiple

Description: Multiple key-value pairs specified in the query Object create conditional group rules. Additionally, a value can be a List to create a property with multiple conditions.

Edit
ctr('.test', {
width: 200px
media: {
query: {
'max-width': 800px
'max-height': 800px
}
background: red
}
})
.test:
width: 200px
media:
query:
max-width: 800px
max-height: 800px
background: red
.test {
width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px
      'max-height': 800px
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      max-width: 800px
      max-height: 800px
    background: red
Edit
ctr('.test', {
width: 200px
media: {
query: {
'max-width': 800px 50vw
}
background: red
}
})
.test:
width: 200px
media:
query:
max-width: [800px, 50vw]
background: red
.test {
width: 200px;
}
@media (max-width: 50vw) and (max-width: 800px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px 50vw
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (max-width: 50vw) and (max-width: 800px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      max-width: [800px, 50vw]
    background: red

Notes

Query Type

Description: A type property defined in the query Object defines a specific target media type.

Edit
ctr('.test', {
width: 200px
media: {
query: {
type: 'screen'
}
background: red
}
})
.test:
width: 200px
media:
query:
type: screen
background: red
.test {
width: 200px;
}
@media only screen {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      type: 'screen'
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      type: screen
    background: red

Notes

Query Helpers

Description: Predefined media query values defined in the global options can be used as variable values in the query Object.

Edit
ctr('.test', {
width: 200px
media: {
query: {
max-width: 'md'
}
background: red
}
})
.test:
width: 200px
media:
query:
max-width: md
background: red
.test {
width: 200px;
}
@media (max-width: 800px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 'md'
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      max-width: md
    background: red
Edit
ctr('.test', {
width: 200px
media: {
query: {
max-width: 'hd'
}
background: red
}
})
.test:
width: 200px
media:
query:
max-width: hd
background: red
.test {
width: 200px;
}
@media (max-width: 1800px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 'hd'
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media (max-width: 1800px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      max-width: hd
    background: red

Notes