Merge branch 'replace-all-snake-case-in-scss-variables' into 'master'

Replace snake case in SCSS variables

See merge request gitlab-org/gitlab-ce!20799

23 files changed, 163 insertions, 164 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index c1ec11e434a..94fa7993133 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -7,7 +7,7 @@
 .avatar-circle {
   float: left;
   margin-right: 15px;
-  border-radius: $avatar_radius;
+  border-radius: $avatar-radius;
   border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s18 { @include avatar-size(18px, 6px); }
@@ -110,7 +110,7 @@
   color: $white-light;
   border: 1px solid $avatar-border;
   border-radius: 1em;
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: 9px;
   line-height: 16px;
   text-align: center;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index a10ff3eecb3..d7149d93622 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -80,7 +80,7 @@ label {
   .form-control {
     height: 29px;
     background: $white-light;
-    font-family: $monospace_font;
+    font-family: $monospace-font;
   }
 
   .input-group-prepend .btn,
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 813a1711ea2..452e946f95f 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -9,8 +9,8 @@
     padding: 10px 0;
     border: 0;
     border-radius: 0;
-    font-family: $monospace_font;
-    font-size: $code_font_size;
+    font-family: $monospace-font;
+    font-size: $code-font-size;
     line-height: 19px;
     margin: 0;
     overflow: auto;
@@ -22,7 +22,7 @@
     code {
       display: inline-block;
       min-width: 100%;
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       white-space: normal;
       word-wrap: normal;
       padding: 0;
@@ -44,7 +44,7 @@
     float: left;
 
     a {
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       display: block;
       font-size: $code_font_size !important;
       min-height: 19px;
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index 300ba4f2de6..d1360a0c0eb 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -1,5 +1,5 @@
 .ui-widget {
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: $font-size-base;
 
   .ui-state-default {
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 76ebfc22ef7..11d332be1be 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -3,13 +3,13 @@
  * Mixins with fixed values
  */
 
-@mixin str-truncated($max_width: 82%) {
+@mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
-  max-width: $max_width;
+  max-width: $max-width;
 }
 
 /*
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 8c716400913..c4dbcf2ddc9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -33,11 +33,11 @@
 
   @include media-breakpoint-up(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
-      padding-right: $gutter_collapsed_width;
+      padding-right: $gutter-collapsed-width;
     }
 
     .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
+      right: $gutter-collapsed-width;
     }
   }
 
@@ -67,21 +67,21 @@
 
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
-      padding-right: $gutter_collapsed_width;
+      padding-right: $gutter-collapsed-width;
     }
   }
 
   @include media-breakpoint-up(md) {
     .content-wrapper {
-      padding-right: $gutter_width;
+      padding-right: $gutter-width;
     }
 
     &:not(.with-overlay) .merge-request-tabs-holder.affix {
-      right: $gutter_width;
+      right: $gutter-width;
     }
 
     &.with-overlay .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
+      right: $gutter-collapsed-width;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 9874c928604..56307777a72 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -44,7 +44,7 @@
 
   // Single code lines should wrap
   code {
-    font-family: $monospace_font;
+    font-family: $monospace-font;
     white-space: pre-wrap;
     word-wrap: normal;
   }
@@ -321,7 +321,7 @@ h6 {
 
 /** CODE **/
 pre {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   display: block;
   padding: $gl-padding-8;
   margin: 0 0 $gl-padding-8;
@@ -342,7 +342,7 @@ code {
 }
 
 .monospace {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
 }
 
 .weight-normal {
@@ -381,7 +381,7 @@ code {
  *
  */
 textarea.js-gfm-input {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   font-size: 13px;
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 6c2fdbe0608..efc54196b75 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,9 +2,9 @@
  * Layout
  */
 $grid-size: 8px;
-$gutter_collapsed_width: 62px;
-$gutter_width: 290px;
-$gutter_inner_width: 250px;
+$gutter-collapsed-width: 62px;
+$gutter-width: 290px;
+$gutter-inner-width: 250px;
 $sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
@@ -233,8 +233,8 @@ $md-area-border: #ddd;
 /*
  * Code
  */
-$code_font_size: 90%;
-$code_line_height: 1.6;
+$code-font-size: 90%;
+$code-line-height: 1.6;
 
 /*
  * Tooltips
@@ -371,9 +371,9 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
+$monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
   'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+$regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
   'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 /*
@@ -526,7 +526,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards
 /*
 * Avatar
 */
-$avatar_radius: 50%;
+$avatar-radius: 50%;
 $avatar-border: $gray-normal;
 $avatar-border-hover: $gray-darker;
 $avatar-background: $gray-lightest;
@@ -830,8 +830,8 @@ $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
 $input-border-color: $theme-gray-200;
 $input-color: $gl-text-color;
-$font-family-sans-serif: $regular_font;
-$font-family-monospace: $monospace_font;
+$font-family-sans-serif: $regular-font;
+$font-family-monospace: $monospace-font;
 $input-line-height: 20px;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 1835c4364d3..8b234a5a656 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -77,13 +77,13 @@ $highlighted-gc-bg: #eaf2f5;
 .code {
   background-color: $white-light;
   font-family: monospace;
-  font-size: $code_font_size;
+  font-size: $code-font-size;
   -premailer-cellpadding: 0;
   -premailer-cellspacing: 0;
   -premailer-width: 100%;
 
   > tr {
-    line-height: $code_line_height;
+    line-height: $code-line-height;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 5de53892fac..7347da2ae61 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -63,7 +63,7 @@
     width: 100%;
 
     &.is-compact {
-      width: calc(100% - #{$gutter_width});
+      width: calc(100% - #{$gutter-width});
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 63585e26022..9b51c54a0fc 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -79,7 +79,7 @@
 .commit-message-container {
   background-color: $body-bg;
   position: relative;
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   $left: 12px;
   overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
   .max-width-marker {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index a22c666a525..e2c0a7a6225 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -368,7 +368,7 @@
 
       .fa {
         color: $gl-text-color-secondary;
-        font-size: $code_font_size;
+        font-size: $code-font-size;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5e39bbb9890..b616357bb8d 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -56,7 +56,7 @@
 
     table {
       width: 100%;
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       border: 0;
       border-collapse: separate;
       margin: 0;
@@ -73,8 +73,8 @@
       }
 
       .line_holder td {
-        line-height: $code_line_height;
-        font-size: $code_font_size;
+        line-height: $code-line-height;
+        font-size: $code-font-size;
 
         &.noteable_line {
           position: relative;
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 437621299e0..ddd1f8cc98a 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -84,7 +84,7 @@
   .soft-wrap-toggle {
     display: inline-block;
     vertical-align: top;
-    font-family: $regular_font;
+    font-family: $regular-font;
   }
 
   .soft-wrap-toggle {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 8915b323b3c..8a074017344 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -478,7 +478,7 @@
     }
 
     .deploy-info-text-link {
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       fill: $gl-link-color;
 
       &:hover {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e6aa41d5201..797b106de23 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -166,7 +166,7 @@
     border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
-    width: $gutter_inner_width;
+    width: $gutter-inner-width;
     // --
 
     &.issuable-sidebar-header {
@@ -290,7 +290,7 @@
   }
 
   &.right-sidebar-expanded {
-    width: $gutter_width;
+    width: $gutter-width;
 
     .value {
       line-height: 1;
@@ -377,11 +377,11 @@
       display: block;
     }
 
-    width: $gutter_collapsed_width;
+    width: $gutter-collapsed-width;
     padding: 0;
 
     .block {
-      width: $gutter_collapsed_width - 2px;
+      width: $gutter-collapsed-width - 2px;
       padding: 15px 0 0;
       border-bottom: 0;
       overflow: hidden;
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index e76525fdbf6..d26659701e1 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -1,167 +1,162 @@
 // Disabled to use the color map for creating color schemes
 // scss-lint:disable ColorVariable
 $colors: (
-  white_header_head_neutral   : #e1fad7,
-  white_line_head_neutral     : #effdec,
-  white_button_head_neutral   : #9adb84,
+  white-header-head-neutral   : #e1fad7,
+  white-line-head-neutral     : #effdec,
+  white-button-head-neutral   : #9adb84,
 
-  white_header_head_chosen    : #baf0a8,
-  white_line_head_chosen      : #e1fad7,
-  white_button_head_chosen    : #52c22d,
+  white-header-head-chosen    : #baf0a8,
+  white-line-head-chosen      : #e1fad7,
+  white-button-head-chosen    : #52c22d,
 
-  white_header_origin_neutral : #e0f0ff,
-  white_line_origin_neutral   : #f2f9ff,
-  white_button_origin_neutral : #87c2fa,
+  white-header-origin-neutral : #e0f0ff,
+  white-line-origin-neutral   : #f2f9ff,
+  white-button-origin-neutral : #87c2fa,
 
-  white_header_origin_chosen  : #add8ff,
-  white_line_origin_chosen    : #e0f0ff,
-  white_button_origin_chosen  : #268ced,
+  white-header-origin-chosen  : #add8ff,
+  white-line-origin-chosen    : #e0f0ff,
+  white-button-origin-chosen  : #268ced,
 
-  white_header_not_chosen     : #f0f0f0,
-  white_line_not_chosen       : $gray-light,
+  white-header-not-chosen     : #f0f0f0,
+  white-line-not-chosen       : $gray-light,
 
+  dark-header-head-neutral   : rgba(#3f3, .2),
+  dark-line-head-neutral     : rgba(#3f3, .1),
+  dark-button-head-neutral   : #40874f,
 
-  dark_header_head_neutral   : rgba(#3f3, .2),
-  dark_line_head_neutral     : rgba(#3f3, .1),
-  dark_button_head_neutral   : #40874f,
+  dark-header-head-chosen    : rgba(#3f3, .33),
+  dark-line-head-chosen      : rgba(#3f3, .2),
+  dark-button-head-chosen    : #258537,
 
-  dark_header_head_chosen    : rgba(#3f3, .33),
-  dark_line_head_chosen      : rgba(#3f3, .2),
-  dark_button_head_chosen    : #258537,
+  dark-header-origin-neutral : rgba(#2878c9, .4),
+  dark-line-origin-neutral   : rgba(#2878c9, .3),
+  dark-button-origin-neutral : #2a5c8c,
 
-  dark_header_origin_neutral : rgba(#2878c9, .4),
-  dark_line_origin_neutral   : rgba(#2878c9, .3),
-  dark_button_origin_neutral : #2a5c8c,
+  dark-header-origin-chosen  : rgba(#2878c9, .6),
+  dark-line-origin-chosen    : rgba(#2878c9, .4),
+  dark-button-origin-chosen  : #1d6cbf,
 
-  dark_header_origin_chosen  : rgba(#2878c9, .6),
-  dark_line_origin_chosen    : rgba(#2878c9, .4),
-  dark_button_origin_chosen  : #1d6cbf,
+  dark-header-not-chosen     : rgba(#fff, .25),
+  dark-line-not-chosen       : rgba(#fff, .1),
 
-  dark_header_not_chosen     : rgba(#fff, .25),
-  dark_line_not_chosen       : rgba(#fff, .1),
+  monokai-header-head-neutral   : rgba(#a6e22e, .25),
+  monokai-line-head-neutral     : rgba(#a6e22e, .1),
+  monokai-button-head-neutral   : #376b20,
 
+  monokai-header-head-chosen    : rgba(#a6e22e, .4),
+  monokai-line-head-chosen      : rgba(#a6e22e, .25),
+  monokai-button-head-chosen    : #39800d,
 
-  monokai_header_head_neutral   : rgba(#a6e22e, .25),
-  monokai_line_head_neutral     : rgba(#a6e22e, .1),
-  monokai_button_head_neutral   : #376b20,
+  monokai-header-origin-neutral : rgba(#60d9f1, .35),
+  monokai-line-origin-neutral   : rgba(#60d9f1, .15),
+  monokai-button-origin-neutral : #38848c,
 
-  monokai_header_head_chosen    : rgba(#a6e22e, .4),
-  monokai_line_head_chosen      : rgba(#a6e22e, .25),
-  monokai_button_head_chosen    : #39800d,
+  monokai-header-origin-chosen  : rgba(#60d9f1, .5),
+  monokai-line-origin-chosen    : rgba(#60d9f1, .35),
+  monokai-button-origin-chosen  : #3ea4b2,
 
-  monokai_header_origin_neutral : rgba(#60d9f1, .35),
-  monokai_line_origin_neutral   : rgba(#60d9f1, .15),
-  monokai_button_origin_neutral : #38848c,
+  monokai-header-not-chosen     : rgba(#76715d, .24),
+  monokai-line-not-chosen       : rgba(#76715d, .1),
 
-  monokai_header_origin_chosen  : rgba(#60d9f1, .5),
-  monokai_line_origin_chosen    : rgba(#60d9f1, .35),
-  monokai_button_origin_chosen  : #3ea4b2,
+  solarized-light-header-head-neutral   : rgba(#859900, .37),
+  solarized-light-line-head-neutral     : rgba(#859900, .2),
+  solarized-light-button-head-neutral   : #afb262,
 
-  monokai_header_not_chosen     : rgba(#76715d, .24),
-  monokai_line_not_chosen       : rgba(#76715d, .1),
+  solarized-light-header-head-chosen    : rgba(#859900, .5),
+  solarized-light-line-head-chosen      : rgba(#859900, .37),
+  solarized-light-button-head-chosen    : #94993d,
 
+  solarized-light-header-origin-neutral : rgba(#2878c9, .37),
+  solarized-light-line-origin-neutral   : rgba(#2878c9, .15),
+  solarized-light-button-origin-neutral : #60a1bf,
 
-  solarized_light_header_head_neutral   : rgba(#859900, .37),
-  solarized_light_line_head_neutral     : rgba(#859900, .2),
-  solarized_light_button_head_neutral   : #afb262,
+  solarized-light-header-origin-chosen  : rgba(#2878c9, .6),
+  solarized-light-line-origin-chosen    : rgba(#2878c9, .37),
+  solarized-light-button-origin-chosen  : #2482b2,
 
-  solarized_light_header_head_chosen    : rgba(#859900, .5),
-  solarized_light_line_head_chosen      : rgba(#859900, .37),
-  solarized_light_button_head_chosen    : #94993d,
+  solarized-light-header-not-chosen     : rgba(#839496, .37),
+  solarized-light-line-not-chosen       : rgba(#839496, .2),
 
-  solarized_light_header_origin_neutral : rgba(#2878c9, .37),
-  solarized_light_line_origin_neutral   : rgba(#2878c9, .15),
-  solarized_light_button_origin_neutral : #60a1bf,
+  solarized-dark-header-head-neutral   : rgba(#859900, .35),
+  solarized-dark-line-head-neutral     : rgba(#859900, .15),
+  solarized-dark-button-head-neutral   : #376b20,
 
-  solarized_light_header_origin_chosen  : rgba(#2878c9, .6),
-  solarized_light_line_origin_chosen    : rgba(#2878c9, .37),
-  solarized_light_button_origin_chosen  : #2482b2,
+  solarized-dark-header-head-chosen    : rgba(#859900, .5),
+  solarized-dark-line-head-chosen      : rgba(#859900, .35),
+  solarized-dark-button-head-chosen    : #39800d,
 
-  solarized_light_header_not_chosen     : rgba(#839496, .37),
-  solarized_light_line_not_chosen       : rgba(#839496, .2),
+  solarized-dark-header-origin-neutral : rgba(#2878c9, .35),
+  solarized-dark-line-origin-neutral   : rgba(#2878c9, .15),
+  solarized-dark-button-origin-neutral : #086799,
 
+  solarized-dark-header-origin-chosen  : rgba(#2878c9, .6),
+  solarized-dark-line-origin-chosen    : rgba(#2878c9, .35),
+  solarized-dark-button-origin-chosen  : #0082cc,
 
-  solarized_dark_header_head_neutral   : rgba(#859900, .35),
-  solarized_dark_line_head_neutral     : rgba(#859900, .15),
-  solarized_dark_button_head_neutral   : #376b20,
-
-  solarized_dark_header_head_chosen    : rgba(#859900, .5),
-  solarized_dark_line_head_chosen      : rgba(#859900, .35),
-  solarized_dark_button_head_chosen    : #39800d,
-
-  solarized_dark_header_origin_neutral : rgba(#2878c9, .35),
-  solarized_dark_line_origin_neutral   : rgba(#2878c9, .15),
-  solarized_dark_button_origin_neutral : #086799,
-
-  solarized_dark_header_origin_chosen  : rgba(#2878c9, .6),
-  solarized_dark_line_origin_chosen    : rgba(#2878c9, .35),
-  solarized_dark_button_origin_chosen  : #0082cc,
-
-  solarized_dark_header_not_chosen     : rgba(#839496, .25),
-  solarized_dark_line_not_chosen       : rgba(#839496, .15)
+  solarized-dark-header-not-chosen     : rgba(#839496, .25),
+  solarized-dark-line-not-chosen       : rgba(#839496, .15)
 );
 // scss-lint:enable ColorVariable
 
-
 @mixin color-scheme($color) {
   .header.line_content,
   .diff-line-num {
     &.origin {
-      background-color: map-get($colors, #{$color}_header_origin_neutral);
-      border-color: map-get($colors, #{$color}_header_origin_neutral);
+      background-color: map-get($colors, #{$color}-header-origin-neutral);
+      border-color: map-get($colors, #{$color}-header-origin-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}_button_origin_neutral);
-        border-color: darken(map-get($colors, #{$color}_button_origin_neutral), 15);
+        background-color: map-get($colors, #{$color}-button-origin-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}_header_origin_chosen);
-        border-color: map-get($colors, #{$color}_header_origin_chosen);
+        background-color: map-get($colors, #{$color}-header-origin-chosen);
+        border-color: map-get($colors, #{$color}-header-origin-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}_button_origin_chosen);
-          border-color: darken(map-get($colors, #{$color}_button_origin_chosen), 15);
+          background-color: map-get($colors, #{$color}-button-origin-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_header_not_chosen);
-        border-color: map-get($colors, #{$color}_header_not_chosen);
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}_button_origin_neutral), 15);
-          border-color: map-get($colors, #{$color}_button_origin_neutral);
+          background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-origin-neutral);
         }
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}_header_head_neutral);
-      border-color: map-get($colors, #{$color}_header_head_neutral);
+      background-color: map-get($colors, #{$color}-header-head-neutral);
+      border-color: map-get($colors, #{$color}-header-head-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}_button_head_neutral);
-        border-color: darken(map-get($colors, #{$color}_button_head_neutral), 15);
+        background-color: map-get($colors, #{$color}-button-head-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}_header_head_chosen);
-        border-color: map-get($colors, #{$color}_header_head_chosen);
+        background-color: map-get($colors, #{$color}-header-head-chosen);
+        border-color: map-get($colors, #{$color}-header-head-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}_button_head_chosen);
-          border-color: darken(map-get($colors, #{$color}_button_head_chosen), 15);
+          background-color: map-get($colors, #{$color}-button-head-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_header_not_chosen);
-        border-color: map-get($colors, #{$color}_header_not_chosen);
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}_button_head_neutral), 15);
-          border-color: map-get($colors, #{$color}_button_head_neutral);
+          background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-head-neutral);
         }
       }
     }
@@ -169,32 +164,31 @@ $colors: (
 
   .line_content {
     &.origin {
-      background-color: map-get($colors, #{$color}_line_origin_neutral);
+      background-color: map-get($colors, #{$color}-line-origin-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}_line_origin_chosen);
+        background-color: map-get($colors, #{$color}-line-origin-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_line_not_chosen);
+        background-color: map-get($colors, #{$color}-line-not-chosen);
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}_line_head_neutral);
+      background-color: map-get($colors, #{$color}-line-head-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}_line_head_chosen);
+        background-color: map-get($colors, #{$color}-line-head-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_line_not_chosen);
+        background-color: map-get($colors, #{$color}-line-not-chosen);
       }
     }
   }
 }
 
-
 #conflicts {
 
   .white {
@@ -210,11 +204,11 @@ $colors: (
   }
 
   .solarized-light {
-    @include color-scheme('solarized_light')
+    @include color-scheme('solarized-light')
   }
 
   .solarized-dark {
-    @include color-scheme('solarized_dark')
+    @include color-scheme('solarized-dark')
   }
 
   .diff-wrap-lines .line_content {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c8349a4ef79..7bd0f0bf1e0 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -208,7 +208,7 @@
         position: absolute;
         content: '...';
         right: 0;
-        font-family: $regular_font;
+        font-family: $regular-font;
         background-color: $gray-light;
       }
     }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5e5696b1602..dcf590e7331 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -42,7 +42,7 @@
   display: block;
   padding: 10px 0;
   color: $gl-text-color;
-  font-family: $regular_font;
+  font-family: $regular-font;
   border: 0;
 
   &:focus {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index fc92a37fb96..7fc2936c5e6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -328,7 +328,7 @@ ul.notes {
   }
 
   .notes_holder {
-    font-family: $regular_font;
+    font-family: $regular-font;
 
     td {
       border: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 8b1227b9131..2d76f0ce004 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -961,7 +961,7 @@
   overflow: hidden;
 
   .note-textarea {
-    font-family: $monospace_font;
+    font-family: $monospace-font;
   }
 }
 
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index 0d6b0735f70..64110f9c3a0 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -6,9 +6,9 @@
 
   $border-style: 1px solid $border-color;
 
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: $gl-font-size;
-  line-height: $code_line_height;
+  line-height: $code-line-height;
   color: $gl-text-color;
   margin: 20px;
   font-weight: 200;
@@ -48,9 +48,9 @@
         padding: 10px;
         border: 0;
         border-radius: 0;
-        font-family: $monospace_font;
-        font-size: $code_font_size;
-        line-height: $code_line_height;
+        font-family: $monospace-font;
+        font-size: $code-font-size;
+        line-height: $code-line-height;
         margin: 0;
         overflow: auto;
         overflow-y: hidden;
@@ -66,10 +66,10 @@
       float: left;
 
       .diff-line-num {
-        font-family: $monospace_font;
+        font-family: $monospace-font;
         display: block;
-        font-size: $code_font_size;
-        min-height: $code_line_height;
+        font-size: $code-font-size;
+        min-height: $code-line-height;
         white-space: nowrap;
         color: $black-transparent;
         min-width: 30px;
diff --git a/changelogs/unreleased/replace-all-snake-case-in-scss-variables.yml b/changelogs/unreleased/replace-all-snake-case-in-scss-variables.yml
new file mode 100644
index 00000000000..8d5ecdfa57e
--- /dev/null
+++ b/changelogs/unreleased/replace-all-snake-case-in-scss-variables.yml
@@ -0,0 +1,5 @@
+---
+title: Replace snake case in SCSS variables
+merge_request: 20799
+author: George Tsiolis
+type: other