Syntax¶

Description: A logical operator is defined as a logical query combinator.

ctr('<#selector>', {
  media: {
    query: {
      <logical:operator>: {
        <...>: <...>
      }
    }
    <...>: <...>
  }
})

<#selector>:
  media:
    query:
      <logical:operator>:
        <...>: <...>
    <...>: <...>

@media (<...>: <...>) <logical:operator> (<...>: <...>) {
  <#selector> {
    <...>: <...>;
  }
}

Notes

• MDN Logical operators

And¶

Description: An andCondition Object combines its key-value pairs with an and logical operator.

ctr('.test', {
  background: teal
  media: {
    query: {
      andCondition: {
        min-width: 200px
        max-width: 400px
      }
    }
    background: red
  }
})

.test:
  background: teal
  media:
    query:
      andCondition:
        min-width: 200px
        max-width: 400px
    background: red

.test {
  background: #008080;
}
@media (min-width: 200px) and (max-width: 400px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  background: teal
  media: {
    query: {
      andCondition: {
        min-width: 200px
        max-width: 400px
      }
    }
    background: red
  }
})

.test {
  background: #008080;
}
@media (min-width: 200px) and (max-width: 400px) {
  .test {
    background: #f00;
  }
}

.test:
  background: teal
  media:
    query:
      andCondition:
        min-width: 200px
        max-width: 400px
    background: red

Notes

• andCondition alias: andCond
• The default logical operator if no condition is specified
• Condition: If the window width is greater than 200px and less than 400px, then the background of .test is red

Or¶

Description: An orCondition Object combines its key-value pairs with an , (or) logical operator.

ctr('.test', {
  background: teal
  media: {
    query: {
      orCondition: {
        max-width: 400px 30vw
      }
    }
    background: red
  }
})

.test:
  background: teal
  media:
    query:
      orCondition:
        max-width: [400px, 30vw]
    background: red

.test {
  background: #008080;
}
@media (max-width: 30vw), (max-width: 400px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  background: teal
  media: {
    query: {
      orCondition: {
        max-width: 400px 30vw
      }
    }
    background: red
  }
})

.test {
  background: #008080;
}
@media (max-width: 30vw), (max-width: 400px) {
  .test {
    background: #f00;
  }
}

.test:
  background: teal
  media:
    query:
      orCondition:
        max-width: [400px, 30vw]
    background: red

Notes

• orCondition alias: orCond
• Condition: If the window width is less than 30vw or 400px, then the background of .test is red

And With Or¶

Description: andCondition and orCondition can be used together.

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 400px 40vw
      }
      orCondition: {
        max-height: 400px 40vh
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: [400px, 40vw]
      orCondition:
        max-height: [400px, 40vh]
    background: red

.test {
  width: 200px;
}
@media (min-width: 40vw) and (min-width: 400px) and (max-height: 40vh), (max-height: 400px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 400px 40vw
      }
      orCondition: {
        max-height: 400px 40vh
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (min-width: 40vw) and (min-width: 400px) and (max-height: 40vh), (max-height: 400px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: [400px, 40vw]
      orCondition:
        max-height: [400px, 40vh]
    background: red

Notes

• Condition: If the window width is greater than 40vw and 400px and the height is less than 40vh or 400px, then the background of .test is red

And With Mixin¶

Description: An andCondition can be used in combination with a mixin.

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        above: 'sm'
        min-height: 200px
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      andCondition:
        above: sm
        min-height: 200px
    background: red

.test {
  width: 200px;
}
@media (min-width: 600px) and (min-height: 200px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        above: 'sm'
        min-height: 200px
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (min-height: 200px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      andCondition:
        above: sm
        min-height: 200px
    background: red

Notes

• Condition: If the window width is above <sm>:600px and the height is greater than 200pxls
• then the background of .test is red

Or With Mixin¶

Description: An orCondition can be used in combination with a mixin.

ctr('.test', {
  width: 200px
  media: {
    query: {
      orCondition: {
        above: 'sm'
        min-height: 20vh
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      orCondition:
        above: sm
        min-height: 20vh
    background: red

.test {
  width: 200px;
}
@media (min-width: 600px), (min-height: 20vh) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      orCondition: {
        above: 'sm'
        min-height: 20vh
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px), (min-height: 20vh) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      orCondition:
        above: sm
        min-height: 20vh
    background: red

Notes

• Condition: If the window width is above <sm>:600px or the height is greater than 200px, then the background of .test is red