SASS: Оптимизируем media screen

Я не знаком с PostCSS, но похоже что он работает только с CSS. У меня же миксин написан на Scss (Sass) и предназначен для работы в scss файлах. В целом, синтаксис PostCSS конечно выглядит очень не плохо, но смысл похож на тот что и у меня. Миксин занимает немного больше места в файлах. Но у моего миксина есть возможно прописывать диапазоны ширины экранов. Например 480 — 640 будет означать @media screen (min-width: 480px) and (max-width: 640px). А так же в случае необходимости можно указать динамически min или max width например max-480 — выдаст @media screen(max-width: 480px), а min-880 выдаст, соответственно @media screen(min-width: 880px). Во всем остальном не увидел разницы.

SASS: Оптимизируем media screen

Ваш миксин, по сути похож на мой первый вариант https://m.habrahabr.ru/post/350466/, только с названиями экранов. Можете почитать отзывы, и сделать выводы

SASS: Оптимизируем media screen

У mobile first есть свои плюсы и недостатки, но я макет для мобильных экранов получаю максимум в 20% случаев, а вот десктопные постоянно. Еще часто бывает, что по дизайну необходимо экранов достаточно много. Если 5 экранов, 5 раз дублировать код. всегда проще поменять в одном месте, согласитесь. Так что с «экономия на спичках», не согласен абсолютно. Вы можете со мной соглашаться или нет, дело ваше, но я опробовал вариант из первой статьи на не большом сайте, с большим количеством экранов, и реально править было легко и быстро. Да, код слабо читаемый, но для этого и был написан миксин который представлен в данной статье.

SASS: Оптимизируем media screen

вот и мне так кажется, но немного расширенный… там есть возможность задавать минимальный и максимальный размер экрана. И кажется еще что-то с вариациями экранов

SASS: Оптимизируем media screen

Я немного не правильно написал, чем завел в заблуждение и Вас и себя… max-height — я имел ввиду описание экрана по высоте, а не как свойство. Прошу прощения. В статье отредактировал этот пункт

SASS: Оптимизируем media screen

Спасибо за ссылку, раньше не натыкался на него. Бегло пробежался, и если я правильно понял, bootstrap миксин не избавляет от дублирования свойств, по сути у нас похожи, но все же разные подходы. Но как альтернатива, то конечно…

SASS: Оптимизируем media screen

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

SASS: Оптимизируем media screen

По поводу миксинов внутри… я честно потратил пару дней на поиски возможности реализовать, но столкнулся с тем что в sass невозможно динамически вызывать миксины. Т.е.

@include $mixin-name()

— не прокатит ни в каком виде

SASS: Оптимизируем media screen

можно использовать абсолютно любые свойства все те что и в css, даже с использованием переменных. Т.е. можно написать font-weight: (sm: $font-weight-bold). Дефис работает как минус только в случае описания экрана вроде 480-320 (т.е. два числа)… Если написать sm-880, тогда получим строку которая разобьется на два экрана sm и 880px

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

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

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

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

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

Спасибо за сильные аргументы. С ними сложно спорить. Замечание по поводу порядка, очень кстати, я не обратил внимание, но это чудит gulp-minify-css, нужно полазить по настройкам

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

!!!

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

Конечно я в курсе что можно писать вот так. А еще можно вот так:

.class{
     width: 100%;
     height: 100%;
     font-size: 12px;
     color: black;
     .class-inner{
          display: inline-block;
          height: 500px;
          background: red;
          font-size: 14px;
               a{
                       text-decoration: none;
                 }
     }
     @media screen only (max-width: 1024px){
          width: 50%;
          height: 300px;
          font-size: 10px;
          .class-inner{
               height: 300px;
               background: black;
               font-size: 18px;
                    a{
                           text-decoration: underline;
                      }
           }
      }
     @media screen only (max-width: 880px){
          width: 25%;
          height: 200px;
          font-size: 14px;
          color: gray;
          .class-inner{
               height: 200px;
               background: yelllow;
               font-size: 20px;
               a{
                      text-decoration: none;
                 }
           }
      }
      @media screen only (max-width: 640px){
          width: 20%;
          height: 100px;
          font-size: 12px;
          color: white;
          .class-inner{
               display: none;
           }
      }
}

Это далеко не самый длинный код который может быть, и тут все дублируется, как ты его не напиши, будет или много @media screen или повторных элементов, или правил. просто для сравнения тот же код:

.class{
     @include media(width, (100%, 50%, 25%, 20%));
     @include media(height, (100%, 300px, 200px, 100px));
     @include media(font-size, (12px, 10px, 14px, 12px));
     @include media(color, (black, '', gray, white));
     .class-inner{
          @include media(display, (inline-block, '', '', none));
          @include media(height, (500px, 300px, 200px));
          @include media(background, (red , black , yellow));
          @include media(font-size, (14px, 18px , 20px));
               a{
                      @include media(text-decoration, (none, underline, none));
                 }
     }

Соглашусь что читать сразу такой код не привычно, но править проще не скролля по всему файлу в поисках. Я очень часто сталкиваюсь с новыми непонятными на первый взгляд миксинами, но разбираюсь в них и подстраиваюсь. Миксины для этого и созданы. Повторюсь, код сыроват, именно поэтому он в этой статье, на данном этапе важна даже не реализация и вид, а сама мысль. Уверен что сделать данный метод понятным и читабельным не такая уж и большая проблема. Конечно может я и ошибаюсь. Спасибо за Ваше мнение!

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

Спасибо за Ваш комментарий!

Если разбивать scss на компоненты, получаем много файлов, а в этих файлах получаем еще больше дублирования кода. Я проверил в проекте, и скажу что результат меня порадовал. У меня была подробная адаптация, т.е. 5 экранов, и таким миксином я написал файл в 5 раз меньше. Соответственно когда мне нужно было что-то поменять, мне не нужно было искать @media screen с нужным разрешением, а когда 5 разных разрешений, поиски затягиваются, и ошибки с нужным экраном не редкость. Тут так же легко ошибиться, но для исправления ошибки нужно приложить минимум усилий. Это ответ насчет смысла данного метода.

Второй момент по поводу понимания кода посторонним разработчиком, полностью
соглашусь… Но давайте на чистоту, сейчас постоянно появляются новые фишки, и всегда находится человек который никогда не слышал о чем либо. Люди пишут свои варианты миксинов постоянно. Любой кодер который работает с Sass и знает что-такое миксины, сможет разобраться. В конце концов всегда можно написать комментарий для таких случаев, даже с ссылкой например на данную статью.

Автоматизация ради автоматизации) Интересная фраза, не лишена смысла. Если так подумать, когда не было никаких подобных фишек, работа продвигалась куда быстрей и проще. Мы долго ждали когда браузеры начнут поддерживать CSS3 чтобы облегчить себе жизнь, и сразу же придумали партию чего-то нового, что создает еще больше геморроя. Но заложниками мы стали настолько давно, что уже и не помним что было по-другому. Информационный поток растет в геометрической прогрессии, и единственный способ бороться с такими потоками данных — это автоматизация и оптимизация.

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

На данный момент вот так:
include media(display, (‘’, none, block)) т.е. Просто пропускаем экран который не нужен, в том числе и базовое значение.

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

Пересчёт делается для того, чтобы если клиент посмотрит в масштабе и скажет что ему понравился вид сайта на 90%, можно было одним махом все уменьшить/увеличить, это как один из вариантов. Когда-то реально помогло

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

Спасибо за комментарий! Я думал над тем, чтобы сделать возможность прописывать нужный экран, типа width, (desktop: 100%, tablet: 50% и тд. При необходимости. Но в таком случае кода будет больше. Хотя выглядеть должно понятно

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

em указаны просто как для примера, в данной статье не ведется речь о величинах, что лучше px, em, rem и т.д.