я используюСюзи.

Мне не удалось использовать подход «контент в первую очередь» и я решил перейти на «window-px-widths-first»

Сначала я попробовалконтент-первый подход в сетку, но вскоре я обнаружил, что мой сайт ведет себя неожиданно на разных устройствах. Это будет отображать мобильную раскладку, где я хотел макет планшета и т. Д. В итоге я настроил значения em параметров Susy для них, чтобы они соответствовали определенной ширине экрана (значения px). Код стал уродливым, и я понял, что на самом деле я больше не использую подход, основанный на контенте.

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

Поэтому я решил полностью отказаться от подхода, основанного на контенте, и в первую очередь использовать значения px.

Перед написанием кода я сформулировал требования к моей сетке

Прежде всего я сгруппировал разные устройства по размеру экрана. Затем я придумал значения px для точек останова, которые наиболее подходят для этих групп устройств:

Break-    Layout   Number of            Common
points     name     columns             usage
(px)               (sample)

    0  ┬
       │
       │     S        1       Smartphones-portrait, old phones
       │
   400 ┼
       │     M        2       Smartphones-landscape
   600 ┼
       │     L        3       Tablets-portrait
   800 ┼
       │     XL       4       Tablets-landscape, netbooks
  1000 ┼
       │    XXL       5       Laptops, desktop computers
  1200 ┼
       ↓

Я предполагаю следующие предположения / требования:

Подход Window-px-widths-first (описанный выше).

$ контейнер-стиль является жидким. Когда ширина экрана находится где-то между двумя точками останова, ширина контейнеров автоматически регулируется в соответствии с большей точкой останова. Количество столбцов в макете не изменяется и соответствует нижней точке останова.

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

Мобильный-первых. Начните с макета «S» и переопределите его с другими макетами, поскольку экран становится шире.

После долгих раздумий мой подход перешел к следующему коду

(Этот код является синтетическим примером. Я взял выдержки из моего реального кода и внес некоторые изменения, поэтому он может что-то упустить или иметь несоответствия.)

<div id="header-wrapper">
  <header id="header">
    ...
  </header>
</div>

<div id="main-wrapper">
  <div id="main">

    <article id="content">...</article>
    <aside id="sidebar">...</aside>

  </div>
</div>

<div id="footer-wrapper">
  <footer id="footer">
    ...
  </footer>
</div>

/////////////
// Variables
/////////////

$development: true // This enables susy-grid-backgrounds and outlines

// Breakpoints
$bp-s-m:    400px
$bp-m-l:    600px
$bp-l-xl:   800px
$bp-xl-xxl: 1000px
$max-width: 1200px

// Columns
$cols-s:   1
$cols-m:   2
$cols-l:   3
$cols-xl:  4
$cols-xxl: 5

// Layouts
// $layout-s is not necessary due to a mobile-first approach
$layout-m:    $bp-s-m     $cols-m
$layout-l:    $bp-m-l     $cols-l
$layout-xl:   $bp-l-xl    $cols-xl
$layout-xxl:  $bp-xl-xxl  $cols-xxl

// Default grid settings
$total-columns:   $cols-s
$column-width:    85%
$gutter-width:    100% - $column-width
$grid-padding:    1em
$container-width: 100%
$container-style: fluid
+border-box-sizing


/////////////
// Mixins
/////////////

// A couple of mixins to open the developer's third eye
=dev-outline
  @if $development
    outline: 1px solid red
=dev-grid-bg
  +dev-outline
  @if $development
    +susy-grid-background

// A custom container declaration
=standard-container
  +container // ← An actual line of Susy code, yay! :D
             //  This whole post is actualy an attempt to make use of it.
  max-width: $max-width
  +dev-grid-bg

  +at-breakpoint($layout-m)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-l)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-xl)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-xxl)
    +set-container-width
    +dev-grid-bg


/////////////
// Backgrounds
/////////////

// The wrapper divs are necessary for screen-wide backgrounds
html
  background: url('../images/main-background.png') // also repeat, color, this kind of stuff

#header-wrapper
  background: url('../images/header-background.png') 

#footer-wrapper
  background: url('../images/footer-background.png')


/////////////
// Containers
/////////////

// Actually declared in separate SASS files
#header, #main, #footer
  +my-container


/////////////
// Columns
/////////////

// An example of declaring columns
$cols-sidebar: 1
#sidebar-first
  +dev-outline
  +at-breakpoint($layout-l)
    +span-columns($cols-sidebar, $cols-l)

  +at-breakpoint($layout-xl)
    +span-columns($cols-sidebar, $cols-xl)

  +at-breakpoint($layout-xxl)
    +span-columns($cols-sidebar, $cols-xxl)
#content
  +dev-outline
  +at-breakpoint($layout-l)
    +span-columns($cols-l - $cols-sidebar omega, $cols-l)

  +at-breakpoint($layout-xl)
    +span-columns($cols-xl - $cols-sidebar omega, $cols-xl)

  +at-breakpoint($layout-xxl)
    +span-columns($cols-xxl - $cols-sidebar omega, $cols-xxl)

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

Вопросов

Следование подходу window-px-widths-first является моим осознанным решением и дано для следующих вопросов. Я ценю ваши аргументы в пользу контента в первую очередь, но, пожалуйста, не ограничивайтесь утверждением, что я неправ, пожалуйста, ответьте на следующие вопросы, относящиеся к window-px-widths-first.

Является ли мой подход элегантным способом сделать window-px-widths-first с помощью Susy или это ужасный кусок кода?

Как я могу сделать мой код более изящным?

Мне не нравятся те многочисленные объявления в точке останова, которые я должен повторять для каждого контейнера и каждого столбца. Я мог только думать об использовании плохо документированной возможности указания нескольких макетов для+container, Но пока+set-container-width это не единственный код, который я делаю в каждом медиа-запросе, даже эта идея не вариант. :(

Каков рекомендуемый способ использовать window-px-widths-first с помощью Susy (и выполнить требования, которые я описал выше)?

Пожалуйста, выявите любые недостатки моего кода, которые вы найдете. Я новичок в SASS, и я уверен, что вы можете предложить более эффективные способы сделать то же самое.