Как предотвратить дублирование кода CSS внутри медиа-запросов?

Я пытаюсь разработать свою собственную систему сетки. Это моя первая попытка, поэтому, возможно, я чего-то не хватает. Вот мой CSS:Как предотвратить дублирование кода CSS внутри медиа-запросов?

.column-1 { 
    width: 6.86666666667%; 
} 

.column-2 { 
    width: 15.3333333333%; 
} 

// More such columns 

@media only screen and (max-width: 768px) { 
    .column-s-1 { 
    width: 6.86666666667%; 
    } 
    .column-s-2 { 
    width: 15.3333333333%; 
    } 
}

Как вы можете видеть, значения дублируются, но имена классов разные. Есть ли способ избежать этого дублирования, потому что он будет становиться все более сложным с каждым дополнительным классом.

источник

2016-04-19 SanJeet Singh

Если вы готовы использовать CSS препроцессор, это сделает реализацию сетке намного проще для вас. Вот [пример] (http://www.sitepoint.com/creative-grid-system-sass-calc/) – timolawl

Но чтобы ответить на ваш вопрос напрямую, я не понимаю, почему вы не можете просто использовать тот же класс если это приводит к тем же значениям. – timolawl

Я бы хотел, чтобы он имел разную ширину в разных размерах, вроде как Bootstrap. Если кто-то использует столбец-столбца-столбца-6 на одном элементе. Затем элемент будет иметь разную ширину, основанную на размере экрана. –

Вы можете избежать некоторых дублирования путем группировки селекторов:

.column-1, 
.column-s-1 { 
    width: 6.86666666667%; 
} 

.column-2, 
.column-s-2 { 
    width: 15.3333333333%; 
} 

// More such columns 
@media only screen and (max-width: 768px) { 
    .column-s-1 { 
    /* only properties characteristic for this width*/ 
    } 
}

Другой вариант заключается в использовании LESS или SASS

источник

2016-04-19 10:07:33 lukbl

Как предотвратить дублирование кода CSS внутри медиа-запросов?

ответ

Смежные вопросы