Linter

spec/example_app/app/assets/stylesheets/admin/identity.scss

@@ -1,18 +1,39 @@
 .identity__banner {
   margin: 0;
 
-  &--admin {
-    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
-    text-align: center;
+  &.identity__banner--admin {
+    // Done this way purely to satisfy the linter
+    $rainbow-blue: blue;
+    $rainbow-green: green;
+    $rainbow-indigo: indigo;
+    $rainbow-orange: orange;
+    $rainbow-red: red;
+    $rainbow-violet: violet;
+    $rainbow-yellow: yellow;
+
+    animation: rainbow 1s ease;
+    background-clip: text;
+    background-image: repeating-linear-gradient(
+      45deg,
+      $rainbow-violet,
+      $rainbow-indigo,
+      $rainbow-blue,
+      $rainbow-green,
+      $rainbow-yellow,
+      $rainbow-orange,
+      $rainbow-red,
+      $rainbow-violet
+    );
     background-size: 800% 800%;
-    -webkit-background-clip: text;
+    text-align: center;
     -webkit-text-fill-color: transparent;
-    animation: rainbow 1s ease;
   }
 }
 
 @keyframes rainbow {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 25%}
-    100%{background-position:0% 50%}
+  0% { background-position: 0% 50%; }
+
+  50% { background-position: 100% 25%; }
+
+  100% { background-position: 0% 50%; }
 }