add layout-gutter variable

2 files changed, 8 insertions, 5 deletions

diff --git a/src/layout.less b/src/layout.less
index a8ce509..6a9a643 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -3,8 +3,8 @@
   margin-left: auto;
   margin-right: auto;
   overflow-x: hidden;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: @layout-gutter;
+  padding-right: @layout-gutter;
   width: 100%;
   &:extend(.clearfix all);
 }
@@ -26,12 +26,12 @@
 // Responsive grid system
 .columns {
   display: flex;
-  margin-left: -1rem;
-  margin-right: -1rem;
+  margin-left: -@layout-gutter;
+  margin-right: -@layout-gutter;
 }
 .column {
   flex: 1;
-  padding: 1rem;
+  padding: @layout-gutter;
 
   &.col-12,
   &.col-11,
diff --git a/src/variables.less b/src/variables.less
index 13f25e6..0b32da0 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,6 +6,9 @@
 @body-font-size: 1.4rem;
 @body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", sans-serif;
 
+// Sizes
+@layout-gutter: 1rem;
+
 // Colors
 @core-color: #5764c6;
 @core-text-color: #fff;