page split width variables

style/_mask_project.scss

@@ -1,18 +1,22 @@
+//Feed width
+$feed-width: "30% - 1rem";
+$feed-width-max: "400px + 3rem";
+
+//Feed colors
 $post-input-bg: #d9deff;
 $post-color: #323268;
 $post-bg: #B4BDFF;
 $message-color: #326526;
 $message-bg: #6DFF58;
 $picture-color: #635C28;
-$picture-bg: #F3EC9F;	
+$picture-bg: #F3EC9F;
+
+//Legend colors	
 $track-main-color: #00ff78;
 $track-off-track-color: #0000ff;
 $track-hitchhiking-color: #FF7814;
 $legend-color: #222;
 
-$feed-width: calc(30% - 1rem);
-$feed-width-min: calc(400px + 3rem);
-
 #messages {
 
 	#submap {
@@ -23,8 +27,8 @@ $feed-width-min: calc(400px + 3rem);
 		width: 100%;
 		
 		&.with_feed {
-			width: calc(70% + 1rem);
-			min-width: calc(100% - 400px - 4rem);
+			width: calc(100% - #{$feed-width});
+			min-width: calc(100% - #{$feed-width-max});
 		}
 		
 		.loader {
@@ -100,8 +104,8 @@ $feed-width-min: calc(400px + 3rem);
 
 	/* Pull right controls by $feed-width % */
 	.leaflet-right {
-		width: $feed-width;
-		max-width: $feed-width-min;
+		width: calc(#{$feed-width});
+		max-width: calc(#{$feed-width-max});
 		
 		.leaflet-control {
 			left: -100%;
@@ -150,8 +154,8 @@ $feed-width-min: calc(400px + 3rem);
 		right: 0;
 		top: 0;
 		bottom: 0;
-		width: $feed-width;
-		max-width: $feed-width-min;
+		width: calc(#{$feed-width});
+		max-width: calc(#{$feed-width-max});
 		z-index: 999;
 		
 		#posts {

style/scss.bat

@@ -1 +1 @@
-sass --unix-newline -l --style=compressed spot.scss spot.css
+sass --unix-newline -l --style=compressed --watch spot.scss:spot.css