apply SASS division

assets/monitoringItemsTableCommon.sass

@@ -0,0 +1,15 @@
+/* Error: Undefined variable.
+ *   ,
+ * 9 |   color: $green-1;
+ *   |          ^^^^^^^^
+ *   '
+ *   assets\monitoringItemsTableCommon.scss 9:10  root stylesheet */
+
+body::before
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace
+  white-space: pre
+  display: block
+  padding: 1em
+  margin-bottom: 1em
+  border-bottom: 2px solid black
+  content: "Error: Undefined variable.\a   \2577 \a 9 \2502    color: $green-1;\d\a   \2502           ^^^^^^^^\a   \2575 \a   assets\\monitoringItemsTableCommon.scss 9:10  root stylesheet"

assets/variables.sass

@@ -0,0 +1,127 @@
+// ==================
+// color
+$green-1: #008830
+$green-2: #00b849
+$green-3: #00d154
+$green-4: #00eb5e
+$gray-1: #333
+$gray-2: #4d4d4d
+$gray-3: #707070
+$gray-4: #d9d9d9
+$gray-5: #f8f9fa
+$white: #fff
+$link: #006ca8
+$emergency: #FFE200
+$alert: #AD2121
+// ==================
+// shadow
+$shadow: 0 0 2px rgba(0, 0, 0, 0.15)
+// ==================
+// break-points
+$huge: 1440
+$large: 1170
+$medium: 768
+$small: 600
+$tiny: 320
+// ==================
+// z-index
+$z-index-map: (opened-side-navigation: 101, sp-navigation: 100)
+
+@function z-index-of($key)
+  @return map-get($z-index-map, $key)
+// ================== 
+// media-query @mixin largerThan($width) {
+@mixin largerThan($width)
+  @media screen and (min-width: $width + 1 + px)
+    @content 
+// =================== 
+// button 
+@mixin text-link 
+    color: $link !important 
+    text-decoration: none 
+    &::hover 
+      text-decoration: underline
+
+@mixin lessThan($width) 
+  @media screen and (max-width: $width + px) 
+    @content
+// =================== 
+// 
+@mixin card-container($withDivider: false)
+  background-color: $white
+  box-shadow: $shadow
+  border: 0.5px solid $gray-4 !important
+  border-radius: 4px
+
+  @if ($withDivider) 
+    &::before 
+      content: ''
+      position: absolute
+      left: 50%
+      top: 0
+      width: 1px
+      height: 100%
+      background-color: $gray-4
+
+@mixin visually-hidden() 
+    position: fixed !important 
+    top: 0 !important 
+    left: 0 !important 
+    width: 4px !important 
+    height: 4px !important 
+    opacity: 0 !important 
+    overflow: hidden !important 
+    border: none !important 
+    margin: 0 !important 
+    padding: 0 !important 
+    display: block !important 
+    visibility: visible !important 
+
+// ==================
+// font-family
+$western: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue"
+$japanese: "Hiragino Sans", "Meiryo", "Source Han Sans", "Noto Sans CJK JP", "Yu Gothic"
+$korean: "Apple SD Gothic Neo", "Malgun Gothic", "Source Han Sans K", "Noto Sans CJK KR"
+$chinese-hans: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC"
+$chinese-hant: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", "Noto Sans CJK TC"
+// ==================
+// font-size
+@mixin font-size($size, $important: false) 
+    font-size: div($size, 10) + rem #{if($important, "!important", "")} 
+
+@mixin 	card-h1()
+    color: $gray-2 
+    font-weight: 600 
+
+@mixin 	card-h2() 
+    color: $gray-2 
+    font-weight: 600 
+
+@mixin 	card-h3() 
+    color: $gray-2 
+    font-weight: 600 
+
+@mixin 	body-text() 
+    color: $gray-1 
+    line-height: 160% 
+    font-weight: normal 
+
+@mixin button-text($size: 'md', $font-size: 14) 
+    @if ($size == 'sm') 
+        padding: 4px 8px 
+    @else 
+        padding: 24px 36px 
+
+    @include font-size($font-size) 
+
+    display: inline-block border-radius 4px 
+    background-color 
+        $white: border 1px solid 
+        $green-1: color 
+        $green-1: cursor 
+        &::pointer 
+            &::hover 
+                background-color: $green-1 
+                color: $white 
+            > i 
+                color: $white !important