From d5f90d651a5d93864b947ec166fb98c088377df3 Mon Sep 17 00:00:00 2001
From: Darren Burns <darrenb900@gmail.com>
Date: Thu, 3 Feb 2022 11:00:08 +0000
Subject: [PATCH] Better error message for undefined variables

---
 examples/dev_sandbox.css  | 49 ---------------------------------
 examples/dev_sandbox.py   |  2 +-
 examples/dev_sandbox.scss | 58 +++++++++++++++++++++++++++++++++++++++
 src/textual/css/parse.py  |  3 +-
 4 files changed, 61 insertions(+), 51 deletions(-)
 delete mode 100644 examples/dev_sandbox.css
 create mode 100644 examples/dev_sandbox.scss

diff --git a/examples/dev_sandbox.css b/examples/dev_sandbox.css
deleted file mode 100644
index 2e348e134..000000000
--- a/examples/dev_sandbox.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/* CSS file for dev_sandbox.py */
-
-App > View {
-  docks: side=left/1;
-  text: on #20639b;
-}
-
-Widget:hover {
-  outline: heavy;
-  text: bold !important;
-}
-
-#sidebar {
-  text: #09312e on #3caea3;
-  dock: side;
-  width: 30;
-  offset-x: -100%;
-  transition: offset 500ms in_out_cubic;
-  border-right: outer #09312e;
-}
-
-#sidebar.-active {
-  offset-x: 0;
-}
-
-#header {
-  text: white on #173f5f;
-  height: 3;
-  border: hkey;
-}
-
-#header.-visible {
-  visibility: hidden;
-}
-
-#content {
-  text: white on #20639b;
-  border-bottom: hkey #0f2b41;
-  offset-y: -3;
-}
-
-#content.-content-visible {
-  visibility: hidden;
-}
-
-#footer {
-  text: #3a3009 on #f6d55c;
-  height: 3;
-}
diff --git a/examples/dev_sandbox.py b/examples/dev_sandbox.py
index d53946fb3..146a5c842 100644
--- a/examples/dev_sandbox.py
+++ b/examples/dev_sandbox.py
@@ -29,4 +29,4 @@ class BasicApp(App):
         )
 
 
-BasicApp.run(css_file="test_app.css", watch_css=True, log="textual.log")
+BasicApp.run(css_file="dev_sandbox.scss", watch_css=True, log="textual.log")
diff --git a/examples/dev_sandbox.scss b/examples/dev_sandbox.scss
new file mode 100644
index 000000000..4b18a120b
--- /dev/null
+++ b/examples/dev_sandbox.scss
@@ -0,0 +1,58 @@
+/* CSS file for dev_sandbox.py */
+
+$text: #f0f0f0;
+$primary: #021720;
+$secondary:#95d52a;
+$background: #262626;
+
+$primary-style: $text on $background;
+$animation-speed: 500ms;
+$animation: offset $animation-speed in_out_cubic;
+
+App > View {
+  docks: side=left/1;
+  text: on $foo;
+}
+
+Widget:hover {
+  outline: heavy;
+  text: bold !important;
+}
+
+#sidebar {
+  text: $primary-style;
+  dock: side;
+  width: 30;
+  offset-x: -100%;
+  transition: $animation;
+  border-right: outer $secondary;
+}
+
+#sidebar.-active {
+  offset-x: 0;
+}
+
+#header {
+  text: $text on $primary;
+  height: 3;
+  border-bottom: hkey $secondary;
+}
+
+#header.-visible {
+  visibility: hidden;
+}
+
+#content {
+  text: $text on $background;
+  offset-y: -3;
+}
+
+#content.-content-visible {
+  visibility: hidden;
+}
+
+#footer {
+  text: $text on $primary;
+  height: 3;
+  border-top: hkey $secondary;
+}
diff --git a/src/textual/css/parse.py b/src/textual/css/parse.py
index d5c4fffc8..e68f45a24 100644
--- a/src/textual/css/parse.py
+++ b/src/textual/css/parse.py
@@ -211,9 +211,10 @@ def _is_whitespace(token: Token) -> bool:
 def _unresolved(
     variable_name: str, location: tuple[int, int]
 ) -> UnresolvedVariableError:
+    line_no, col = location
     return UnresolvedVariableError(
         f"variable ${variable_name} is not defined. "
-        f"attempted reference at location {location!r}"
+        f"attempted reference at location on line {line_no}, column {col}."
     )