нотатки верстальника

При вивченні Susy одним з питань, яке завжди стояв переді мною, полягав в наступному: "Як видалити padding або margin у першого і останнього стовпця column в розмітці Susy без застосування CSS-властивостей first-child і last-child? ".

Це питання є один з найголовніших для всіх, хто тільки починає вивчення Susy. Якщо подивитися в корінь даного питання, то його основну суть можна звести до наступного (якщо судити за численними постам в Інтернет): необхідно використовувати значення inside замість значення after. Для того, щоб точно відповісти на це питання, необхідно добре розуміти, яким чином положення відступів gutter в цілому впливає на всю розмітку, створену в Susy.

Що таке - розташування відступів gutter

Розташування відступу gutter дозволяє повністю змінювати всю розмітку сторінки, створену в Susy. Даний параметр визначає, де повинні знаходитися відступи gutter щодо стовпців columns. Також це налаштування будуть чи відступи gutter бути CSS-властивість padding або margin.

Ця параметр перебувати серед загальних параметрів змінної $ susy. Як варіант, даний параметр можна використовувати локально, всередині міксина span. Давайте почнемо з розгляду випадку, коли розташування відступу gutter управляється з глобальної змінної $ susy.

За замовчуванням, розташування відступів в Susy визначено ключовим словом after. Крім цього, існують ще варіанти: before. split. inside і inside-static. Нижче представлений повний варіант синтаксису параметра gutter-position в глобальній змінній $ susy:

Ключові слова в круглих дужках є можливими варіантами значення параметра gutter-position.

Для ясності розуміння тонкощів розмітки в Susy при використанні параметра gutter-position необхідно створити просту структуру:

Gutter-position: after

За замовчуванням параметра gutter-position є ключове слово after. Дане значення змушує Susy розташовувати відступи gutters після кожного стовпчика розмітки. В цьому режимі необхідно видалити відступ у останнього стовпця в розмітці. В цьому випадку відступи gutters є CSS-властивість margin і розміщуються в розмітці наступним чином:

При використанні значення за замовчуванням для параметра gutter-position миксин span створює три CSS-правила - width. margin-right і float: left:

У цьому коді властивість margin-right - це відступ gutter. створений Susy в даній розмітці.

Можна використовувати ключове слово last для видалення крайньої margin у стовпці:

В результаті отримаємо результат у вигляді margin-right: 0:

У розглянутій нами розмітці область контенту займає 3 стовпці з 4. При цьому область бічній панелі розміщується в одному стовпці з 4-х. Крім того, бічна панель є останнім елементом розмітки, тому код для подібного випадку буде таким:

Короткий висновок: значення after параметра gutter-position є найбільш інтуїтивно зрозумілим випадком створення розмітки в Susy. При використанні значення за замовчуванням єдиний момент, про який слід пам'ятати - це прибрати відступ у останнього стовпчика розмітки за допомогою ключового слова last.

Gutter-position: before

Значення before є одним з варіантів попереднього значення - after. Суть цього значення також проста. Замість розміщення відступів gutter після стовпців (як у випадку з after), при значенні before відступи gutters розміщуються перед стовпцями. В цьому випадку необхідно видалити відступ у першого стовпчика в розмітці. Відступи gutter також є в даному випадку CSS-властивість margin:

При використанні значення before для параметра gutter-position миксин span генерує три CSS-правила: width. margin-left і float: left за допомогою коду:

Результуючий CSS-код буде виглядати таким чином:

Так як значення before є прямою протилежністю значення after. то його дуже легко зрозуміти, якщо до цього ви добре розібралися з after. Замість використання ключового слова last для видалення відступу у останнього стовпчика розмітки, в даному випадку потрібно використовувати ключове слово first для видалення відступу у першого шпальти розмітки:

В результаті отримаємо таку саму розмітку, що і в попередньому випадку.

Короткий висновок: при використанні значення before розмітка виходить точно такий же, як і в попередньому випадку. Єдина відмінність полягає в застосуванні ключового слова first для першого стовпця розмітки.

Gutter-position: split

Значення split параметра gutter-position кардинально відрізняється від двох попередніх значень before і after. Якщо встановлено значення split. то ширина відступу gutter ділитися навпіл (надвоє) і обидві половинки відступу розташовуються по обидва боки одного стовпчика. В цьому режимі відступи gutters генеруються в CSS-коді у вигляді CSS-властивості margin. У цьому випадку немає необхідності видаляти відступи для крайніх стовпців розмітки:

Якщо, як в нашому випадку, є тільки два блоки (з класом .content і .sidebar), то створення такої розмітки виконується просто. Для цього достатньо скористатися функцією span. як зазвичай:

Однак, ситуація ставати не такий ясною, якщо блок .content або блок .sidebar міститимуть в собі блоки-нащадки.

Давайте додамо два блоку div з класом .child-one і класом .child-two всередину блоку .content для того, щоб проілюструвати цю ситуацію:

Для обох новостворених блоку застосуємо той же підхід, що й раніше. Блок з класом .child-one матиме ширину 2-х стовпців з 3-х; блок з класом .child-two матиме ширину 1-го стовпчика з 3-х.

Зверніть увагу на той факт, що кордони обох блоків .child-one і .child-two не збігаються з межами фонової сітки!

Це відбувається тому, що при завданні для параметра gutter-position значення split потрібно враховувати взаємозв'язок між блоками-батьками і блоками-нащадками. В даному конкретному випадку блоком-батьком є ​​.content. а блоками-нащадками є .child-one і .child-two.

Для створення правильної розмітки в даному випадку необхідно додати для блоку-батька ключове слово nest для того, щоб показати, що цей блок якраз і є блоком-батьком:

Тепер подивіться, як точно обидва блоки .child-one і .child-two` вписалися в межі сітки, "намальованої" фоновим зображенням!

На перший погляд, ситуація є трохи заплутаною. Для того, щоб не плутатися, потрібно завжди пам'ятати, що в разі необхідності вписати блоки-нащадки точно в межі сітки, потрібно використовувати ключове слово для їх блоку-батька.

Якщо "копнути" глибше і проаналізувати згенерований CSS-код, то можна помітити, що для блоків .child-one і .child-two він абсолютно різний:

Блок-батько має плавання вліво float: left і ширину, яка вказана у відсотках; при цьому ширина відступів gutters цього блоку не враховується (75% одно 3/4).

Блоки-нащадки мають всі ті ж властивості, що і блок-батько. Але при цьому відступи gutters мають місце бути для цих блоків.

Короткий висновок: значення split кардинально відрізняється від двох розглянутих раніше значень before і after. При використанні значення split необхідно додавати ключове слово nest до блоку-батькові і використовувати миксин span для всіх блоків-нащадків.

Gutter-position: inside / inside-static

Обидва значення inside і inside-static дуже схожі на попереднє значення split. Відступи gutters також діляться навпіл (надвоє) і обидві половинки розташовуються по обидва боки кожного стовпчика. Однак, в цьому випадку в CSS-виведення відступи є властивістю padding. а не margin. Також в цьому випадку немає необхідності видаляти відступи у крайніх стовпців в розмітці:

Відступи gutters в разі gutter-position: inside мають той же принцип, що і при значенні split. Якщо для блоку-батьків не буде вказано ключове слово nest. то блоки-нащадки вийдуть за межі розмітки.

Якщо просто додати ключове слово nest для блоку-батька .content. то в результаті отримаємо наступне:

Значення inside-static працює точно також, як і значення inside. Єдиний виняток полягає в тому, що відступи gutters виходять в фіксованих одиницях виміру, а не у відсотках. Крім цього, в глобальній змінній $ susy необхідно задати параметр column-width із зазначенням ширини шпальти column.

Короткий висновок: значення inside працює точно також, як і значення split. При використанні значення inside необхідно додавати ключове слово nest до блоку-батькові і використовувати миксин span для всіх блоків-нащадків.

Значення inside і split мають однаковий згенерований CSS-код, тому можна з легкістю міняти між собою ці значення в глобальній змінній $ susy для параметра gutter-position.

висновок

Різні типи розмітки в Susy створюються за допомогою вибору розташування відступів gutters. Різне розташування відступів gutters в кожному випадку має свої тонкощі і вимагає розуміння процесу, якщо ви хочете ефективно їх використовувати.

Існує два основні способи створення розмітки за сприяння відступів gutters:

значення before і after мають створюють відступи gutters з одного боку кожного стовпця column; для крайнього стовпця необхідно видалити відступ gutter за допомогою ключового слова first або last.

значення inside. inside-static. split поділяють кожен відступ gutter на дві рівні половини, які розташовуються по обидва боки кожного стовпця column. Такі відступи не потребують видаленні.