Адаптивная верстка с помощью SCSS и Gulp

Возможно, это будет лучше. А как должно это дело выглядеть, когда в базовой версии нет правила, но появляется на других ширинах экрана?

Скролл это тоже не проблема. Вы уже реализовали какой-нибудь проект с применением этого чтобы говорить о том что с этим работать проще чем со скроллом?

Много media в и исходниках это не проблема, с использованием вашего миксина у вас их получается даже больше чем без него (sic!). Как только число свойств, изменяющихся хотя бы один раз при изменении размера экрана становится больше количества брейкпойнтов в проекте (3-5, сколько их у вас?), то миксинов становится больше чем было бы обычных media. А ведь число media всегда меньше чем количество брейкпойнтов в рамках одного класса. Конечно с учетом тех же самых ограничений в их структуре что вы вносите миксином.

Зачем вам `screen only`? Задумывались зачем? Было это обдуманное решение добавить его или вы не знаете для чего он нужен и нужен ли вообще?

Как комбинировать это все с `media print`?

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

У вас еще есть проблема, с который вы вероятно сталкиваетесь и не осознаете, из-за чего пытаетесь решить в том числе и ее таким мягко говоря необычными способами. Разбивайте группы свойств внутри одного класса отступами, не бойтесь, от скролла еще никто не умирал. Порядок свойств у вас уже вроде как есть, что хорошо, теперь только еще группы свойств поразбивайте и пройдет желание улучшать читаемость ибо станет супер-читаемо.

width: 100px;
height: 200px;

background: red;
border: 2px solid green;

color: white;
font-size: 23px;

И еще насчет результирующего сss, gzip абсолютно неважно сколько у вас будет в нем повторений media, одно или в пятьдесят раз больше, заботясь о размере получающегося сss вы не просто экономите на спичках, а экономите на байтах, даже до килобайта не дойдет экономия. Задумайтесь на минутку зачем и кому это надо, придете к выводу что никому не надо о такой экономии заботиться.
blog.servergrove.com/2014/04/14/gzip-compression-works

Еще у вас порядок простановки media в первом примере кода нарушен, у вас сначала идет для самого маленького экрана, потом по брейкпойнту для самого большого, потом от него уже вниз по брейкпойнтам. Выберите один порядок и придерживайтесь его.

Еще ровные значения брейкпойнтов 640, 768, 1024 обычно означают начало диапазона размеров, а не конец, вот так например должно быть 320-639, 640-1023, 1024+
Именно так делают макеты дизайнеры, макет под ширину 640 будет показывать начальное состояние страницы и именно оно будет растягиваться до включительно 1023. А вот 1024 начнется уже условно десктопное отображение.
Может конечно попасться дизайнер наркоман и нарисовать как попало, но это уже другая история.

А еще не надо вкладывать классы друг в друга в общем случае, возьмите именование по БЭМ, SMACSS или еще чему такому и откажитесь от излишней вложенности уже сегодня бесплатно и без смс.

Скажете что нравится структура, которая получается при вложенности? Что она якобы повторяет html и помогает не глядя на html понять какой класс внутри другого окажется?
Ну так и используйте эту структуру, только без вложенности. Вот так:

$breakpoint--desktop: 1024px;
$breakpoint--tablet-wide: 880px;
$breakpoint--tablet: 640px;
$breakpoint--mobile: 320px;

.b-class {
    width: 100%;
    height: 100%;

    color: black;
    font-size: 12px;

    @media (max-width: $breakpoint--tablet - 1) {
        width: 20%;
        height: 100px;

        color: white;
        font-size: 12px;
        }

    @media (max-width: $breakpoint--tablet-wide - 1) {
        width: 25%;
        height: 200px;

        color: gray;
        font-size: 14px;
        }

    @media (max-width: $breakpoint--desktop - 1) {
        width: 50%;
        height: 300px;
        
        font-size: 10px;
        }
    }

    .b-class__inner  {
        display: inline-block;
        
        height: 500px;
        
        background: red;
        font-size: 14px;
`
        @media (max-width: $breakpoint--tablet - 1) {
            display: none;
            }
            
        @media (max-width: $breakpoint--tablet-wide - 1) {
            height: 200px;
            
            background: yelllow;
            
            font-size: 20px;
            }
        
        @media (max-width: $breakpoint--desktop - 1) {
            height: 300px;
            
            background: black;
            
            font-size: 18px;
            }
        }
        .b-class__link {
            text-decoration: none;

            @media (max-width: $breakpoint--tablet-wide - 1) {
                // Вот так вот в этой структуре сразу видно что здесь, например,
                // это свойство избыточное. Это к вопросу о группировке всех 
                // media, относящихся к конкретному классу, внутри этого класса
                text-decoration: none; 
            }
            
            @media (max-width: $breakpoint--desktop - 1) {
                text-decoration: underline;
            }
        }

Спасибо за ссылку!

Ув. читатель! Данная статья является именно доводом мысли, но никак не готовым кодом для использования, хотя по желанию его можно использовать, но по мнению многих не стоит. Если Вы внимательно читали, там написано что код сыроват, и вынесен не как урок по оптимизации, а для людей которым это может быть интересно, может кто-то подхватит мысль и напишет что-то подобное, но только с вау эффектом. А возможно укажет на что-то подобное но уже готовое. В общем… данная статья является просто примером как можно оптимизировать код, а не предметом для изучения