Variables

Author: Pickra

scss/main.scss

@@ -1 +1,2 @@
-@import "nesting/nesting";
+@import "variables/variables";
+@import "variables/vary";

scss/variables/_variables.scss

@@ -0,0 +1,25 @@
+$color-text-default:      #424954;
+$color-text-light:        #EBEBEB;
+$color-text-muted:        #989898;
+
+$color-primary:           #8465D9;
+$color-danger:            #E83043;
+$color-success:           #3DC123;
+$color-info:              #CFFF32;
+$color-warning:           #FFB62F;
+
+$font-family-primary:     Roboto, 'Open Sans', Helvetica Neue, sans-serif;
+$font-family-secondary:   Georgia, Times New Roman, serif;
+$font-family-monospace:   Menlo, Monaco, Consolas, monospace;
+$font-family:             $font-family-primary;
+
+$font-size-base:          14px;
+$font-size-large:         18px;
+$font-size-small:         12px;
+
+$font-size-h1:            36px;
+$font-size-h2:            30px;
+$font-size-h3:            24px;
+$font-size-h4:            $font-size-large;
+$font-size-h5:            $font-size-base;
+$font-size-h6:            $font-size-small;

scss/variables/_vary.scss

@@ -0,0 +1,19 @@
+$captain-marvel: green;
+$wom: women-of-the-marvel-universe;
+
+.#{$wom} { content: "#{$wom}"; }
+
+.#{$wom}-text { color: $color-text-muted; }
+.#{$wom}-cape { background-color: $color-primary; }
+img { border: 1px dotted $captain-marvel; }
+
+.elektra {
+  $elektra: purple;
+  $captain-marvel: blue;
+
+  color: $captain-marvel;
+  border: 1px solid $elektra;
+  font-size: $font-size-h1;
+}
+
+.fancy { color: $captain-marvel; }