Syntax

Description: type is defined as a query utility that defines specific query type conditions.

ctr('<#selector>', {
media: {
query: {
type: {
media: '<media>'
condition: '<only>' | '<not>'
}
}
<...>: <...>
}
})
<#selector>:
media:
query:
type:
media: <media>
condition: <only> | <not>
<...>: <...>
@media <type:condition> <type:media> {
<#selector> {
<...>: <...>;
}
}

Notes

Media

Description: A value for the media property defines a specific target media type.

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

Notes

Condition

Description: The logical operator values of 'not' or 'only' for the condition property specify a condition for the target media type.

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

Notes

Query

Description: Key-value query conditions can be defined alongside the type Object.

Edit
ctr('.test', {
width: 200px
media: {
query: {
max-width: 300px
type: {
media: 'screen'
condition: 'not'
}
}
background: red
}
})
.test:
width: 200px
media:
query:
max-width: 300px
type:
media: screen
condition: not
background: red
.test {
width: 200px;
}
@media not screen and (max-width: 300px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 300px
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media not screen and (max-width: 300px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      max-width: 300px
      type:
        media: screen
        condition: not
    background: red

Notes

Multiple

Description: A List value for the media property targets multiple media types.

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

Notes

And Condition

Description: The type Object can be used in an andCondition.

Edit
ctr('.test', {
width: 200px
media: {
query: {
andCondition: {
min-width: 200px
min-height: 200px
type: {
media: 'screen'
condition: 'not'
}
}
}
background: red
}
})
.test:
width: 200px
media:
query:
andCondition:
min-width: 200px
min-height: 200px
type:
media: screen
condition: not
background: red
.test {
width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 200px
        min-height: 200px
        type: {
          media: 'screen'
          condition: 'not'
        }
      }
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: 200px
        min-height: 200px
        type:
          media: screen
          condition: not
    background: red

Notes

Or Condition

Description: The type Object can be used in an orCondition.

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

Notes

And with Or Condition

Description: The type Object can be used with both andCondition and orCondition.

Edit
ctr('.test', {
width: 200px
media: {
query: {
andCondition: {
min-width: 200px
min-height: 200px
}
orCondition: {
max-width: 800px
max-height: 800px
}
type: {
media: 'screen'
condition: 'not'
}
}
background: red
}
})
.test:
width: 200px
media:
query:
andCondition:
min-width: 200px
min-height: 200px
orCondition:
max-width: 800px
max-height: 800px
type:
media: screen
condition: not
background: red
.test {
width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) and (max-width: 800px), (max-height: 800px) {
.test {
background: #f00;
}
}
ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 200px
        min-height: 200px
      }
      orCondition: {
        max-width: 800px
        max-height: 800px
      }
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})
.test {
  width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) and (max-width: 800px), (max-height: 800px) {
  .test {
    background: #f00;
  }
}
.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: 200px
        min-height: 200px
      orCondition:
        max-width: 800px
        max-height: 800px
      type:
        media: screen
        condition: not
    background: red

Notes