Есть 4 медиа-запроса для ширины экранов. Допустим я хочу применить к определенному размеру экрана определенное свойство SASS к определенному селектору. Как сделать так, чтобы в конечном CSS оставалось 4 медиа-запроса, а не "спагетти" из медиа-запросов?
SASS файл:
@mixin xs-width($num){
@media screen and ( min-width: 320px) {
width: calc(100%*($num/12));
}
}
@mixin sm-width($num){
@media screen and ( min-width: 480px) {
width: calc(100%*($num/12));
}
}
@mixin md-width($num){
@media screen and ( min-width: 768px) {
width: calc(100%*($num/12));
}
}
@mixin lg-width($num){
@media screen and ( min-width: 1024px) {
width: calc(100%*($num/12));
}
}
.test {
@include xs-width (12);
@include sm-width (6);
@include md-width (4);
@include lg-width (3);
}
.test-2 {
@include xs-width (12);
@include sm-width (6);
@include md-width (4);
@include lg-width (3);
}
Конечный CSS:
@media screen and (min-width: 320px) {
.test {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 480px) {
.test {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 768px) {
.test {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 1024px) {
.test {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 320px) {
.test-2 {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 480px) {
.test-2 {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 768px) {
.test-2 {
width: calc(100%*($num/12));
}
}
@media screen and (min-width: 1024px) {
.test-2 {
width: calc(100%*($num/12));
}
}
А надо вот так (под каждый экран):
@media screen and (min-width: 320px) {
.test {
width: calc(100%*($num/12));
}
.test-2 {
width: calc(100%*($num/12));
}
}
Ответ
Нашел решение от aaronjensen. Библиотека собирает кучу медиа-запросов в один при компиляции.
Комментариев нет:
Отправить комментарий