Как правильно написать точки останова в сингулярности gs?

Question

Я сомневаюсь, поэтому я хочу знать, лучше ли сделать что-то вроде:

.class {

    @include breakpoint($desk) {

    }
}

или наоборот:

@include breakpoint($desk) {

.class {

    }
}

Я использую второй, потому что я думаю, что таким образом я группирую весь класс или ID в точку останова, но я не уверен.

Answer 1

В Sass медиазапросы всплывают наверху вложенности, поэтому оба примера выдают идентичный CSS.

Второй подход позволяет группировать несколько объявлений в одном медиа-запросе, но вы должны использовать его только тогда, когда эти объявления будут отображаться рядом друг с другом. Существует мнение, что вы не должны структурировать свой код так, чтобы он генерировал меньше медиа-запросов. Вместо этого вы должны структурировать свой код по функциям, т.е. по тем элементам страницы, которые описывает код. Медиа-запросы должны применяться как можно более узко. Сжатие gzip сервера будет иметь дело с дублированным кодом.

Но это вопрос личных предпочтений, и оба примера верны и приемлемы.