diff --git a/web/app/components/comment/__avatar/comment__avatar.scss b/web/app/components/comment/__avatar/comment__avatar.scss
index a3ee721d..44e08462 100644
--- a/web/app/components/comment/__avatar/comment__avatar.scss
+++ b/web/app/components/comment/__avatar/comment__avatar.scss
@@ -1,10 +1,12 @@
+@import '../comment.vars';
+
 .comment__avatar {
   flex-shrink: 0;
   flex-grow: 0;
   display: inline-block;
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
+  width: $avatarSize;
+  height: $avatarSize;
+  margin-right: $avatarOffset;
   border-radius: 4px;
   background: #eee;
 }
diff --git a/web/app/components/comment/_level/comment_level.scss b/web/app/components/comment/_level/comment_level.scss
index 0062a3e5..b9a86082 100644
--- a/web/app/components/comment/_level/comment_level.scss
+++ b/web/app/components/comment/_level/comment_level.scss
@@ -1,9 +1,9 @@
-@import 'common/variables';
+@import '../comment.vars';
 
 .comment_level {
   @for $i from 1 through 5 {
     &_#{$i} {
-      margin-left: $i * $offset / 2;
+      margin-left: $i * ($avatarSize + $avatarOffset);
     }
   }
 }
diff --git a/web/app/components/comment/comment.vars.scss b/web/app/components/comment/comment.vars.scss
new file mode 100644
index 00000000..e7310866
--- /dev/null
+++ b/web/app/components/comment/comment.vars.scss
@@ -0,0 +1,2 @@
+$avatarSize: 24px;
+$avatarOffset: 8px;