Less and Sass

css/styles.css

@@ -1,65 +1,54 @@
-.row-header{
+.row-header {
   margin: 0px auto;
-    padding: 0px auto;
+  padding: 0px 0px; }
-}
+
 .row-content {
   margin: 0px auto;
-    padding: 50px 0px 50px 0px;
+  padding: 50px 0px;
   border-bottom: 1px ridge;
-    min-height: 400px;
+  min-height: 400px; }
-}
+
 .footer {
   background-color: #D1C4E9;
-    margin:0px auto;
+  margin: 0px auto;
-    padding: 20px 0px 20px 0px;
+  padding: 20px 0px; }
-}
+
-.jumbotron{
+.jumbotron {
-    padding: 70px 30px 70px 30px;
+  margin: 0px auto;
-    margin: 0px;
+  padding: 70px 30px;
   background: #9575CD;
-    color:floralwhite;
+  color: floralwhite; }
-}
+
-.address{
+address {
   font-size: 80%;
-    margin:0px;
+  margin: 0px;
-    color: #0f0f0f;
+  color: #0f0f0f; }
-}
+
-body{
+body {
-    padding:50px 0px 0px 0px;
+  padding: 50px 0px 0px 0px;
-    z-index:0;
+  z-index: 0; }
-}
 
 .navbar-dark {
-     background-color: #512DA8;
+  background-color: #512DA8; }
-}
 
-.reserve-table{
-    background-color: yellow;
-    color: black;
-}
 .tab-content {
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
-    padding: 10px;
+  padding: 10px; }
-}
+
 .carousel {
-    background:#512DA8;
+  background: #512DA8; }
-}
+  .carousel .carousel-item {
-
+    height: 300px; }
-.carousel-item {
+    .carousel .carousel-item img {
-  height: 300px;
-}
-
-.carousel-item img {
       position: absolute;
       top: 0;
       left: 0;
-    min-height: 300px;
+      min-height: 300px; }
-}
+
 #carouselButton {
-    right:0px;
+  right: 0px;
   position: absolute;
   bottom: 0px;
-    z-index: 1;
+  z-index: 1; }
-}

css/styles.less

@@ -0,0 +1,73 @@
+@lt-gray: #ddd;
+@background-dark: #512DA8;
+@background-light: #9575CD;
+@background-pale: #D1C4E9;
+
+// Height variables
+@carousel-item-height: 300px;
+.zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) {
+	margin:0px auto;
+	padding: @pad-up-dn @pad-left-right;
+}
+.row-header{
+    .zero-margin();
+}
+
+.row-content {
+    .zero-margin(50px,0px);
+    border-bottom: 1px ridge;
+    min-height:400px;
+}
+
+.footer{
+    background-color: @background-pale;
+    .zero-margin(20px, 0px);
+}
+
+.jumbotron {
+    .zero-margin(70px,30px);
+    background: @background-light ;
+    color:floralwhite;
+}
+
+address{
+    font-size:80%;
+    margin:0px;
+    color:#0f0f0f;
+}
+
+body{
+    padding:50px 0px 0px 0px;
+    z-index:0;
+}
+
+.navbar-dark {
+     background-color: @background-dark;
+}
+
+.tab-content {
+    border-left: 1px solid @lt-gray;
+    border-right: 1px solid @lt-gray;
+    border-bottom: 1px solid @lt-gray;
+    padding: 10px;
+}
+.carousel {
+    background:@background-dark;
+
+    .carousel-item {
+        height: @carousel-item-height;
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            min-height: 300px;
+        }
+    }
+}
+
+#carouselButton {
+    right:0px;
+    position: absolute;
+    bottom: 0px;
+    z-index: 1;
+}

css/styles.scss

@@ -0,0 +1,73 @@
+$lt-gray: #ddd;
+$background-dark: #512DA8;
+$background-light: #9575CD;
+$background-pale: #D1C4E9;
+
+// Height variables
+$carousel-item-height: 300px;
+@mixin zero-margin($pad-up-dn, $pad-left-right) {
+	margin:0px auto;
+	padding: $pad-up-dn $pad-left-right;
+}
+.row-header{
+    @include zero-margin(0px,0px);
+}
+
+.row-content {
+    @include zero-margin(50px,0px);
+    border-bottom: 1px ridge;
+    min-height:400px;
+}
+
+.footer{
+    background-color: $background-pale;
+    @include zero-margin(20px, 0px);
+}
+
+.jumbotron {
+    @include zero-margin(70px,30px);
+    background: $background-light ;
+    color:floralwhite;
+}
+
+address{
+    font-size:80%;
+    margin:0px;
+    color:#0f0f0f;
+}
+
+body{
+    padding:50px 0px 0px 0px;
+    z-index:0;
+}
+
+.navbar-dark {
+     background-color: $background-dark;
+}
+
+.tab-content {
+    border-left: 1px solid $lt-gray;
+    border-right: 1px solid $lt-gray;
+    border-bottom: 1px solid $lt-gray;
+    padding: 10px;
+}
+.carousel {
+    background:$background-dark;
+
+    .carousel-item {
+        height: $carousel-item-height;
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            min-height: 300px;
+        }
+    }
+}
+
+#carouselButton {
+    right:0px;
+    position: absolute;
+    bottom: 0px;
+    z-index: 1;
+}

package.json

@@ -6,12 +6,14 @@
   "scripts": {
     "start": "npm run lite",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lite": "lite-server"
+    "lite": "lite-server",
+    "scss": "node-sass -o css/ css/"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "lite-server": "^2.3.0"
+    "lite-server": "^2.3.0",
+    "node-sass": "^7.0.3"
   },
   "dependencies": {
     "bootstrap": "^4.0.0",