Рефакторинг: переменная для верт. отступа

src/blocks/alert/alert.scss

@@ -5,8 +5,8 @@
 .alert {
   position: relative;
   padding: 0.7em 1.5em 0.7em 1.4em;
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   border-radius: $border-radius;
   color: $text-color;
   background-color: $gray-lightest;
@@ -17,7 +17,7 @@
   }
 
   & > * + * {
-    margin-top: 1em;
+    margin-top: $typo-margin-vertical;
   }
 
   &__header {

src/blocks/breadcrumbs/breadcrumbs.scss

@@ -5,8 +5,8 @@
 .breadcrumbs {
   padding: 0;
   list-style: none;
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   color: $text-color;
 
   a {

src/blocks/code/code.scss

@@ -6,8 +6,9 @@
   display: block;
   width: 100%;
   max-height: rem(500px);
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   padding: 0.5rem 1rem;
-  margin-bottom: 1rem;
   overflow-x: auto;
   background-color: $gray-lightest;
   border-radius: $border-radius;

src/blocks/comment/comment.scss

@@ -3,8 +3,8 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .comment {
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
 
   @media (min-width: $screen-md) {
 

src/blocks/embed-responsive/embed-responsive.scss

@@ -6,8 +6,8 @@
   position: relative;
   display: block;
   width: 100%;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   padding: 0;
   overflow: hidden;
 

src/blocks/field-actions/field-actions.scss

@@ -4,13 +4,13 @@
 
 .field-actions {
   display: block;
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
 
   &__text {
     display: block;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: $typo-margin-vertical;
+    margin-bottom: $typo-margin-vertical;
     font-size: $font-size--small;
     color: $text-color--muted;
     line-height: 1.2em;

src/blocks/field-checkbox/field-checkbox.scss

@@ -7,7 +7,7 @@
   $block-name:                &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 
   &__title {
     display: block;
@@ -19,7 +19,7 @@
   &__input-wrap {
 
     & + & {
-      margin-top: 1em;
+      margin-top: $typo-margin-vertical;
     }
 
     &--error {

src/blocks/field-file/field-file.scss

@@ -7,7 +7,7 @@
   $block-name:                &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 
   &__name {
     @include field-name;

src/blocks/field-radio/field-radio.scss

@@ -7,7 +7,7 @@
   $block-name:                &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 
   &__title {
     display: block;
@@ -19,7 +19,7 @@
   &__input-wrap {
 
     & + & {
-      margin-top: 1em;
+      margin-top: $typo-margin-vertical;
     }
 
     &--error {

src/blocks/field-range/field-range.scss

@@ -4,7 +4,7 @@
 
 .field-range {
   display: block;
-  margin-bottom: 1rem;
+  margin-bottom: $typo-margin-vertical;
 
   &__name {
     @include field-name;

src/blocks/field-select/field-select.scss

@@ -7,7 +7,7 @@
   $block-name:                &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 
   &__name {
     @include field-name;

src/blocks/field-text/field-text.scss

@@ -7,7 +7,7 @@
   $block-name:                &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 
   &__name {
     @include field-name;

src/blocks/field-toggler/field-toggler.scss

@@ -7,7 +7,7 @@
   $block-name:                &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 
   &__title {
     @include field-name;
@@ -16,7 +16,7 @@
   &__input-wrap {
 
     & + & {
-      margin-top: 1em;
+      margin-top: $typo-margin-vertical;
     }
 
     &--error {

src/blocks/form/form.scss

@@ -11,7 +11,7 @@
     border: 0;
 
     &:not(:last-child) {
-      margin-bottom: 1em;
+      margin-bottom: $typo-margin-vertical;
     }
   }
 
@@ -20,7 +20,7 @@
     width: 100%;
     max-width: 100%; // Привет IE
     margin-top: 0;
-    margin-bottom: 1em;
+    margin-bottom: $typo-margin-vertical;
     font-size: $font-size--h3;
     font-family: $font-family;
     font-weight: 700;

src/blocks/or/or.scss

@@ -3,9 +3,6 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .or {
-
-  $block-name:                &; // #{$block-name}__element
-
   display: flex;
   align-items: center;
 

src/blocks/page/page.scss

@@ -182,8 +182,8 @@ hr {
   box-sizing: content-box; // Проблема Firefox
   height: 0;               // Проблема Firefox
   overflow: visible;       // Проблема Edge и IE
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: $typo-margin-vertical * 2;
+  margin-bottom: $typo-margin-vertical * 2;
   border: 0;
   border-top: 1px solid $border-color;
 }
@@ -219,7 +219,7 @@ pre,
 address,
 figure {
   margin-top: 0;
-  margin-bottom: 1em;
+  margin-bottom: $typo-margin-vertical;
 }
 
 address {
@@ -228,6 +228,7 @@ address {
 
 ul,
 ol {
+  margin-bottom: $typo-margin-vertical;
   padding-left: 1.5em;
 
   ul,
@@ -316,6 +317,7 @@ kbd {
 pre {
   display: block;
   width: 100%;
+  margin-bottom: $typo-margin-vertical;
   overflow-x: auto;
   tab-size: 2;
   background-color: rgba(#000, 0.08);

src/blocks/pagination/pagination.scss

@@ -5,8 +5,8 @@
 .pagination {
   display: flex;
   flex-wrap: wrap;
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
 
   &__item {
     display: block;

src/blocks/progress/progress.scss

@@ -3,8 +3,8 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .progress {
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   border: 1px solid $border-color;
   border-radius: $border-radius;
   text-align: center;

src/blocks/social/social.scss

@@ -6,7 +6,8 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   padding: 0;
   list-style: none;
 

src/blocks/table-responsive/table-responsive.scss

@@ -3,7 +3,8 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .table-responsive {
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   border-collapse: collapse;
   border: 1px solid $border-color;
   width: 100%;

src/blocks/table/table.scss

@@ -5,7 +5,8 @@
 .table {
   display: table;
   width: 100%;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
   border: 1px solid $border-color;
   border-collapse: collapse;
 

src/blocks/tabs/tabs.scss

@@ -6,8 +6,8 @@
 
   $block-name:                &; // #{$block-name}__element
 
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: $typo-margin-vertical;
+  margin-bottom: $typo-margin-vertical;
 
   &__links {
     margin: 0;

src/scss/variables.scss

@@ -47,6 +47,8 @@ $font-size--small:            80%;
 
 $line-height:                 1.5;
 
+$typo-margin-vertical:          1em;
+
 $font-family:                 -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 $font-family--monospace:     SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 // Georgia, Times New Roman, Times, serif