Susy: создание сетки для заданной ширины экрана (значения точек останова px) и отсутствие знания ширины одного столбца (подход, не основанный на контенте)
м используюСюзи.
Мне не удалось использовать подход «контент в первую очередь» и я решил перейти на «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" макет и переопределите его с другими макетами, поскольку экран становится шире.
После долгих раздумий мой подход перешел к следующему коду(Этот код является синтетическим примером. Я взял выдержки из моего реального кода и внес некоторые изменения, поэтому он может что-то упустить или иметь несоответствия.)
...
...
...
...
/////////////
// 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 является моим осознанным решением и дано для следующих вопросов. Я ценю ваши аргументы в пользу содержания в первую очередь, но, пожалуйста, не ограничивайтесь утверждением, что яm неправильно, пожалуйста, ответьте на следующие вопросы, относящиеся к window-px-widths-first.
Является ли мой подход элегантным способом сделать window-px-widths-first с помощью Susy илиуродливый кусок кода?
Как я могу сделать мой код более изящным?
Я неМне нравятся те многочисленные объявления в точке останова, которые я должен повторять для каждого контейнера и каждого столбца. Я мог только думать об использовании плохо документированной возможности указания нескольких макетов для+container
, Но пока+set-container-width
это не единственный код, который я делаю в каждом медиа-запросе, даже эта идея не вариант. :(
Каков рекомендуемый способ использовать window-px-widths-first с помощью Susy (и выполнить требования, которые я описал выше)?
Пожалуйста, выявите любые недостатки моего кода, которые вы найдете. Я'я новичок в SASS и яЯ уверен, что вы можете предложить более эффективные способы сделать то же самое.