Scss basics

WebDevelopment/03-SassBasics/Source/Sass/Base/_base.fonts.scss

@@ -0,0 +1,6 @@
+//
+//   Quicksand Font :)
+//
+@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700');
+
+body { font-family: 'Quicksand', sans-serif; }

WebDevelopment/03-SassBasics/Source/Sass/Base/_base.mixins.scss

@@ -0,0 +1,15 @@
+@mixin vendor($property, $value...)
+{
+    -webkit-#{$property}: $value;
+    -moz-#{$property}: $value;
+    -ms-#{$property}: $value;
+    #{$property}: $value;
+}
+
+@mixin hocus()
+{
+    &:hover, &:focus
+    {
+        @content;
+    }
+}

WebDevelopment/03-SassBasics/Source/Sass/Base/_base.palette.scss

@@ -0,0 +1,5 @@
+$color1: rgba(43, 37, 42, 1);
+$color2: rgba(255, 71, 227, 1);
+$color3: rgba(56, 178, 255, 1);
+$color4: rgba(237, 241, 255, 1);
+$color5: rgba(106, 13, 173, 1);

WebDevelopment/03-SassBasics/Source/Sass/Base/_base.scss

@@ -0,0 +1,28 @@
+@import "base.settings";
+@import "base.fonts";
+@import "base.palette";
+@import "base.theme";
+@import "base.mixins";
+
+body
+{
+    // Set line heights
+    line-height: $base-line-height;
+
+    // Set default font weights
+    font-weight: $font-weight-normal;
+}
+
+h1,h2,h3,h4,h5,h6
+{
+    // Set heading font weights
+    font-weight: $font-weight-heading;
+}
+
+// Set heading sizes
+h1 { font-size: $header-size-1; }
+h2 { font-size: $header-size-2; }
+h3 { font-size: $header-size-3; }
+h4 { font-size: $header-size-4; }
+h5 { font-size: $header-size-5; }
+h6 { font-size: $header-size-6; }

WebDevelopment/03-SassBasics/Source/Sass/Base/_base.settings.scss

@@ -0,0 +1,42 @@
+//
+//   Base Settings
+//
+
+// High-level settings for the entire site
+// To create relational sizing and
+//  aesthetically pleasing design
+$base-spacing-unit: 24px;
+$base-font-size: 16px;
+$base-line-height: $base-spacing-unit;
+
+// Spacing sizes
+$spacing-smaller: $base-spacing-unit / 3;
+$spacing-small: $base-spacing-unit / 2;
+$spacing-normal: $base-spacing-unit;
+$spacing-large: $base-spacing-unit * 1.5;
+$spacing-larger: $base-spacing-unit * 2;
+$spacing-largest: $base-spacing-unit * 3;
+
+// Font sizes
+$font-xsmall: $base-font-size / 1.6;
+$font-small: $base-font-size / 1.3;
+$font-normal: $base-font-size;
+$font-large: $base-font-size * 1.5;
+$font-larger: $base-font-size * 2;
+$font-largest: $base-font-size * 3;
+
+// Font weights
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 500;
+$font-weight-black: 700;
+$font-weight-heading: $font-weight-bold;
+
+// Header sizes
+$header-size-1: $base-font-size * 2;
+$header-size-2: $base-font-size * 1.5;
+$header-size-3: $base-font-size * 1.35;
+$header-size-4: $base-font-size * 1.2;
+$header-size-5: $base-font-size;
+$header-size-6: $base-font-size * 0.9;
+

WebDevelopment/03-SassBasics/Source/Sass/Base/_base.theme.scss

@@ -0,0 +1,17 @@
+@import "base.mixins";
+
+html
+{
+    background: $color1;
+    color: $color4;
+}
+
+a
+{
+    color: $color3;
+
+    @include hocus()
+    {
+        color: $color2;
+    }
+}

WebDevelopment/03-SassBasics/Source/Sass/style.scss

@@ -0,0 +1,22 @@
+@import "Base/base";
+
+blockquote
+{
+    border-left: 2px solid $color2;
+    padding-left: $spacing-normal;
+}
+
+.box
+{
+    background: $color3;
+    padding: $spacing-normal;
+
+    > p { margin: 0; }
+}
+
+.rounded-box
+{
+    @extend .box;
+
+    @include vendor(border-radius, 20px);
+}