Above¶
Description: An above
mixin can be created in a medias
Object with an Object key that matches +<query:helper | raw:value>
.
Edit
ctr('.test', {
width: 200px
medias: {
// query:helper
'+sm': {
width: 100px
}
// raw:value
'+1050px': {
width: 300px
}
}
})
.test:
width: 200px
medias:
# query:helper
+sm:
width: 100px
# raw:value
+1050px:
width: 300px
.test {
width: 200px;
}
@media (min-width: 600px) {
.test {
width: 100px;
}
}
@media (min-width: 1050px) {
.test {
width: 300px;
}
}
ctr('.test', {
width: 200px
medias: {
// query:helper
'+sm': {
width: 100px
}
// raw:value
'+1050px': {
width: 300px
}
}
})
.test {
width: 200px;
}
@media (min-width: 600px) {
.test {
width: 100px;
}
}
@media (min-width: 1050px) {
.test {
width: 300px;
}
}
.test:
width: 200px
medias:
# query:helper
+sm:
width: 100px
# raw:value
+1050px:
width: 300px
Notes
- Key must be a String
+<raw:value>
===(min-width: <raw:value>)
)+<query:helper>
===(min-width: <query:helper>)
)
At¶
Description: An at
mixin can be created in a medias
Object with an Object key that matches <query:helper>
.
Edit
ctr('.test', {
width: 200px
medias: {
'sm': {
width: 100px
}
'lg': {
width: 300px
}
}
})
.test:
width: 200px
medias:
sm:
width: 100px
lg:
width: 300px
.test {
width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
.test {
width: 100px;
}
}
@media (min-width: 800px) and (max-width: 1050px) {
.test {
width: 300px;
}
}
ctr('.test', {
width: 200px
medias: {
'sm': {
width: 100px
}
'lg': {
width: 300px
}
}
})
.test {
width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
.test {
width: 100px;
}
}
@media (min-width: 800px) and (max-width: 1050px) {
.test {
width: 300px;
}
}
.test:
width: 200px
medias:
sm:
width: 100px
lg:
width: 300px
Notes
- Key does not have to be a String, but it should be
<query:helper>
===(min-width: <query:helper-prv>) and (max-width: <query:helper>)
Below¶
Description: A below
mixin can be created in a medias
Object with an Object key that matches -<query:helper | raw:value>
.
Edit
ctr('.test', {
height: 200px
medias: {
'-sm': {
width: 100px
}
'-1050px': {
width: 300px
}
}
})
.test:
height: 200px
medias:
-sm:
width: 100px
-1050px:
width: 300px
.test {
height: 200px;
}
@media (max-width: 600px) {
.test {
width: 100px;
}
}
@media (max-width: 1050px) {
.test {
width: 300px;
}
}
ctr('.test', {
height: 200px
medias: {
'-sm': {
width: 100px
}
'-1050px': {
width: 300px
}
}
})
.test {
height: 200px;
}
@media (max-width: 600px) {
.test {
width: 100px;
}
}
@media (max-width: 1050px) {
.test {
width: 300px;
}
}
.test:
height: 200px
medias:
-sm:
width: 100px
-1050px:
width: 300px
Notes
- Key must be a String
-<raw:value>
===(max-width: <raw:value>)
-<query:helper>
===(max-width: <query:helper>)
Between¶
Description: A between
mixin can be created in a medias
Object with an Object key that matches <query:helper:min | raw:value:min>-<query:helper:max | raw:value:max>
.
Edit
ctr('.test', {
height: 200px
medias: {
// query:helper
'xs-md': {
width: 100px
}
// raw:value
'1050px-1800px': {
width: 300px
}
}
})
.test:
height: 200px
medias:
# query:helper
xs-md:
width: 100px
# raw:value
1050px-1800px:
width: 300px
.test {
height: 200px;
}
@media (min-width: 400px) and (max-width: 800px) {
.test {
width: 100px;
}
}
@media (min-width: 1050px) and (max-width: 1800px) {
.test {
width: 300px;
}
}
ctr('.test', {
height: 200px
medias: {
// query:helper
'xs-md': {
width: 100px
}
// raw:value
'1050px-1800px': {
width: 300px
}
}
})
.test {
height: 200px;
}
@media (min-width: 400px) and (max-width: 800px) {
.test {
width: 100px;
}
}
@media (min-width: 1050px) and (max-width: 1800px) {
.test {
width: 300px;
}
}
.test:
height: 200px
medias:
# query:helper
xs-md:
width: 100px
# raw:value
1050px-1800px:
width: 300px
Notes
- Key does not have to be a String, but it should be
<raw:value:min>-<raw:value:max>
===(min-width: <raw:value:min>) and (max-width: <raw:value:max>)
<query:helper:min>-<query:helper:max>
===(min-width: <query:helper:min>) and (max-width: <query:helper:max>)
Query¶
Description: Additional media
query
conditions can be created in a mixin Object through the query
Object.
Edit
ctr('.test', {
width: 200px
medias: {
// query:helper
'-md': {
query: {
max-height: 'md'
}
width: 300px
}
// raw:value
'+800px': {
query: {
min-height: '800px'
}
width: 400px
}
}
})
.test:
width: 200px
medias:
# query:helper
-md:
query:
max-height: md
width: 300px
# raw:value
+800px:
query:
min-height: 800px
width: 400px
.test {
width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
.test {
width: 300px;
}
}
@media (min-width: 800px) and (min-height: 800px) {
.test {
width: 400px;
}
}
ctr('.test', {
width: 200px
medias: {
// query:helper
'-md': {
query: {
max-height: 'md'
}
width: 300px
}
// raw:value
'+800px': {
query: {
min-height: '800px'
}
width: 400px
}
}
})
.test {
width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
.test {
width: 300px;
}
}
@media (min-width: 800px) and (min-height: 800px) {
.test {
width: 400px;
}
}
.test:
width: 200px
medias:
# query:helper
-md:
query:
max-height: md
width: 300px
# raw:value
+800px:
query:
min-height: 800px
width: 400px