diff --git a/src/textual/css/_styles_builder.py b/src/textual/css/_styles_builder.py
index 79e478f23..c3ea4661d 100644
--- a/src/textual/css/_styles_builder.py
+++ b/src/textual/css/_styles_builder.py
@@ -67,7 +67,7 @@ class StylesBuilder:
 
     def process_display(self, name: str, tokens: list[Token], important: bool) -> None:
         for token in tokens:
-            name, value, _, _, location = token
+            name, value, _, _, location, _ = token
 
             if name == "token":
                 value = value.lower()
@@ -110,7 +110,7 @@ class StylesBuilder:
         self, name: str, tokens: list[Token], important: bool
     ) -> None:
         for token in tokens:
-            name, value, _, _, location = token
+            name, value, _, _, location, _ = token
             if name == "token":
                 value = value.lower()
                 if value in VALID_VISIBILITY:
@@ -128,7 +128,7 @@ class StylesBuilder:
         space: list[int] = []
         append = space.append
         for token in tokens:
-            (token_name, value, _, _, location) = token
+            token_name, value, _, _, location, _ = token
             if token_name in ("number", "scalar"):
                 try:
                     append(int(value))
@@ -158,7 +158,7 @@ class StylesBuilder:
         style_tokens: list[str] = []
         append = style_tokens.append
         for token in tokens:
-            token_name, value, _, _, _ = token
+            token_name, value, _, _, _, _ = token
             if token_name == "token":
                 if value in VALID_BORDER:
                     border_type = value
diff --git a/src/textual/css/parse.py b/src/textual/css/parse.py
index 59e5668e5..0429b7953 100644
--- a/src/textual/css/parse.py
+++ b/src/textual/css/parse.py
@@ -260,8 +260,13 @@ def substitute_references(tokens: Iterator[Token]) -> Iterable[Token]:
                         reference_tokens = variables[ref_name]
                         variable_tokens.extend(reference_tokens)
                         ref_location = token.location
+                        ref_length = token.length
                         for token in reference_tokens:
-                            yield token.with_location(location=ref_location)
+
+                            yield token.as_reference(
+                                location=ref_location,
+                                length=ref_length,
+                            )
                     else:
                         raise _unresolved(
                             variable_name=ref_name, location=token.location
@@ -274,8 +279,12 @@ def substitute_references(tokens: Iterator[Token]) -> Iterable[Token]:
             if variable_name in variables:
                 variable_tokens = variables[variable_name]
                 ref_location = token.location
+                ref_length = token.length
                 for token in variable_tokens:
-                    yield token.with_location(ref_location)
+                    yield token.as_reference(
+                        location=ref_location,
+                        length=ref_length,
+                    )
             else:
                 raise _unresolved(variable_name=variable_name, location=token.location)
         else:
diff --git a/src/textual/css/stylesheet.py b/src/textual/css/stylesheet.py
index 8c6075011..c53745d39 100644
--- a/src/textual/css/stylesheet.py
+++ b/src/textual/css/stylesheet.py
@@ -47,11 +47,8 @@ class StylesheetErrors:
         for rule in self.stylesheet.rules:
             for token, message in rule.errors:
                 line_no, col_no = token.location
-
                 append(highlighter(f"{token.path or '<unknown>'}:{line_no}"))
-                append(
-                    self._get_snippet(token.code, line_no, col_no, len(token.value) + 1)
-                )
+                append(self._get_snippet(token.code, line_no, col_no, token.length + 1))
                 append(highlighter(Text(message, "red")))
                 append("")
         return Group(*errors)
diff --git a/src/textual/css/tokenizer.py b/src/textual/css/tokenizer.py
index e9a85f443..ffba26e4b 100644
--- a/src/textual/css/tokenizer.py
+++ b/src/textual/css/tokenizer.py
@@ -4,6 +4,7 @@ import re
 from typing import NamedTuple
 
 import rich.repr
+from rich.cells import cell_len
 
 
 class EOFError(Exception):
@@ -45,9 +46,17 @@ class Token(NamedTuple):
     path: str
     code: str
     location: tuple[int, int]
+    length: int
 
-    def with_location(self, location: tuple[int, int]) -> "Token":
-        return Token(**self, location=location)
+    def as_reference(self, location: tuple[int, int], length: int) -> "Token":
+        return Token(
+            name=self.name,
+            value=self.value,
+            path=self.path,
+            code=self.code,
+            location=location,
+            length=length,
+        )
 
     def __str__(self) -> str:
         return self.value
@@ -57,6 +66,7 @@ class Token(NamedTuple):
         yield "value", self.value
         yield "path", self.path
         yield "location", self.location
+        yield "length", self.length
 
 
 class Tokenizer:
@@ -72,7 +82,9 @@ class Tokenizer:
         col_no = self.col_no
         if line_no >= len(self.lines):
             if expect._expect_eof:
-                return Token("eof", "", self.path, self.code, (line_no, col_no))
+                return Token(
+                    "eof", "", self.path, self.code, (line_no, col_no), length=0
+                )
             else:
                 raise EOFError()
         line = self.lines[line_no]
@@ -90,7 +102,9 @@ class Tokenizer:
             if value is not None:
                 break
 
-        token = Token(name, value, self.path, self.code, (line_no, col_no))
+        token = Token(
+            name, value, self.path, self.code, (line_no, col_no), length=cell_len(value)
+        )
         col_no += len(value)
         if col_no >= len(line):
             line_no += 1
diff --git a/tests/css/test_parse.py b/tests/css/test_parse.py
index 01a78cc0b..02cf9a8f4 100644
--- a/tests/css/test_parse.py
+++ b/tests/css/test_parse.py
@@ -16,35 +16,35 @@ class TestVariableReferenceSubstitution:
         css = "$x: 1; #some-widget{border: $x;}"
         variables = substitute_references(tokenize(css, ""))
         assert list(variables) == [
-            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-            Token(name='number', value='1', path='', code=css, location=(0, 4)),
-            Token(name='variable_value_end', value=';', path='', code=css, location=(0, 5)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 6)),
-            Token(name='selector_start_id', value='#some-widget', path='', code=css, location=(0, 7)),
-            Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 19)),
-            Token(name='declaration_name', value='border:', path='', code=css, location=(0, 20)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 27)),
-            Token(name='number', value='1', path='', code=css, location=(0, 4)),
-            Token(name='declaration_end', value=';', path='', code=css, location=(0, 30)),
-            Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 31))
+            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+            Token(name='number', value='1', path='', code=css, location=(0, 4), length=1),
+            Token(name='variable_value_end', value=';', path='', code=css, location=(0, 5), length=1),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 6), length=1),
+            Token(name='selector_start_id', value='#some-widget', path='', code=css, location=(0, 7), length=12),
+            Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 19), length=1),
+            Token(name='declaration_name', value='border:', path='', code=css, location=(0, 20), length=7),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 27), length=1),
+            Token(name='number', value='1', path='', code=css, location=(0, 28), length=2),
+            Token(name='declaration_end', value=';', path='', code=css, location=(0, 30), length=1),
+            Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 31), length=1)
         ]
 
     def test_simple_reference_no_whitespace(self):
         css = "$x:1; #some-widget{border: $x;}"
         variables = substitute_references(tokenize(css, ""))
         assert list(variables) == [
-            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-            Token(name='number', value='1', path='', code=css, location=(0, 3)),
-            Token(name='variable_value_end', value=';', path='', code=css, location=(0, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 5)),
-            Token(name='selector_start_id', value='#some-widget', path='', code=css, location=(0, 6)),
-            Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 18)),
-            Token(name='declaration_name', value='border:', path='', code=css, location=(0, 19)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 26)),
-            Token(name='number', value='1', path='', code=css, location=(0, 3)),
-            Token(name='declaration_end', value=';', path='', code=css, location=(0, 29)),
-            Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 30))
+            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+            Token(name='number', value='1', path='', code=css, location=(0, 3), length=1),
+            Token(name='variable_value_end', value=';', path='', code=css, location=(0, 4), length=1),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 5), length=1),
+            Token(name='selector_start_id', value='#some-widget', path='', code=css, location=(0, 6), length=12),
+            Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 18), length=1),
+            Token(name='declaration_name', value='border:', path='', code=css, location=(0, 19), length=7),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 26), length=1),
+            Token(name='number', value='1', path='', code=css, location=(0, 27), length=2),
+            Token(name='declaration_end', value=';', path='', code=css, location=(0, 29), length=1),
+            Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 30), length=1)
         ]
 
     def test_undefined_variable(self):
@@ -55,59 +55,59 @@ class TestVariableReferenceSubstitution:
     def test_transitive_reference(self):
         css = "$x: 1\n$y: $x\n.thing { border: $y }"
         assert list(substitute_references(tokenize(css, ""))) == [
-            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-            Token(name='number', value='1', path='', code=css, location=(0, 4)),
-            Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 5)),
-            Token(name='variable_name', value='$y:', path='', code=css, location=(1, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(1, 3)),
-            Token(name='number', value='1', path='', code=css, location=(0, 4)),
-            Token(name='variable_value_end', value='\n', path='', code=css, location=(1, 6)),
-            Token(name='selector_start_class', value='.thing', path='', code=css, location=(2, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 6)),
-            Token(name='declaration_set_start', value='{', path='', code=css, location=(2, 7)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 8)),
-            Token(name='declaration_name', value='border:', path='', code=css, location=(2, 9)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 16)),
-            Token(name='number', value='1', path='', code=css, location=(0, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 19)),
-            Token(name='declaration_set_end', value='}', path='', code=css, location=(2, 20))
+            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+            Token(name='number', value='1', path='', code=css, location=(0, 4), length=1),
+            Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 5), length=1),
+            Token(name='variable_name', value='$y:', path='', code=css, location=(1, 0), length=3),
+            Token(name='whitespace', value=' ', path='', code=css, location=(1, 3), length=1),
+            Token(name='number', value='1', path='', code=css, location=(1, 4), length=2),
+            Token(name='variable_value_end', value='\n', path='', code=css, location=(1, 6), length=1),
+            Token(name='selector_start_class', value='.thing', path='', code=css, location=(2, 0), length=6),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 6), length=1),
+            Token(name='declaration_set_start', value='{', path='', code=css, location=(2, 7), length=1),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 8), length=1),
+            Token(name='declaration_name', value='border:', path='', code=css, location=(2, 9), length=7),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 16), length=1),
+            Token(name='number', value='1', path='', code=css, location=(2, 17), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 19), length=1),
+            Token(name='declaration_set_end', value='}', path='', code=css, location=(2, 20), length=1)
         ]
 
     def test_multi_value_variable(self):
         css = "$x: 2 4\n$y: 6 $x 2\n.thing { border: $y }"
         assert list(substitute_references(tokenize(css, ""))) == [
-            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-            Token(name='number', value='2', path='', code=css, location=(0, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 5)),
-            Token(name='number', value='4', path='', code=css, location=(0, 6)),
-            Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 7)),
-            Token(name='variable_name', value='$y:', path='', code=css, location=(1, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(1, 3)),
-            Token(name='number', value='6', path='', code=css, location=(1, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(1, 5)),
-            Token(name='number', value='2', path='', code=css, location=(0, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 5)),
-            Token(name='number', value='4', path='', code=css, location=(0, 6)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(1, 8)),
-            Token(name='number', value='2', path='', code=css, location=(1, 9)),
-            Token(name='variable_value_end', value='\n', path='', code=css, location=(1, 10)),
-            Token(name='selector_start_class', value='.thing', path='', code=css, location=(2, 0)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 6)),
-            Token(name='declaration_set_start', value='{', path='', code=css, location=(2, 7)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 8)),
-            Token(name='declaration_name', value='border:', path='', code=css, location=(2, 9)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 16)),
-            Token(name='number', value='6', path='', code=css, location=(1, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(1, 5)),
-            Token(name='number', value='2', path='', code=css, location=(0, 4)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(0, 5)),
-            Token(name='number', value='4', path='', code=css, location=(0, 6)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(1, 8)),
-            Token(name='number', value='2', path='', code=css, location=(1, 9)),
-            Token(name='whitespace', value=' ', path='', code=css, location=(2, 19)),
-            Token(name='declaration_set_end', value='}', path='', code=css, location=(2, 20))
+            Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+            Token(name='number', value='2', path='', code=css, location=(0, 4), length=1),
+            Token(name='whitespace', value=' ', path='', code=css, location=(0, 5), length=1),
+            Token(name='number', value='4', path='', code=css, location=(0, 6), length=1),
+            Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 7), length=1),
+            Token(name='variable_name', value='$y:', path='', code=css, location=(1, 0), length=3),
+            Token(name='whitespace', value=' ', path='', code=css, location=(1, 3), length=1),
+            Token(name='number', value='6', path='', code=css, location=(1, 4), length=1),
+            Token(name='whitespace', value=' ', path='', code=css, location=(1, 5), length=1),
+            Token(name='number', value='2', path='', code=css, location=(1, 6), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(1, 6), length=2),
+            Token(name='number', value='4', path='', code=css, location=(1, 6), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(1, 8), length=1),
+            Token(name='number', value='2', path='', code=css, location=(1, 9), length=1),
+            Token(name='variable_value_end', value='\n', path='', code=css, location=(1, 10), length=1),
+            Token(name='selector_start_class', value='.thing', path='', code=css, location=(2, 0), length=6),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 6), length=1),
+            Token(name='declaration_set_start', value='{', path='', code=css, location=(2, 7), length=1),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 8), length=1),
+            Token(name='declaration_name', value='border:', path='', code=css, location=(2, 9), length=7),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 16), length=1),
+            Token(name='number', value='6', path='', code=css, location=(2, 17), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 17), length=2),
+            Token(name='number', value='2', path='', code=css, location=(2, 17), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 17), length=2),
+            Token(name='number', value='4', path='', code=css, location=(2, 17), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 17), length=2),
+            Token(name='number', value='2', path='', code=css, location=(2, 17), length=2),
+            Token(name='whitespace', value=' ', path='', code=css, location=(2, 19), length=1),
+            Token(name='declaration_set_end', value='}', path='', code=css, location=(2, 20), length=1)
         ]
 
 
diff --git a/tests/css/test_tokenize.py b/tests/css/test_tokenize.py
index 65b2823e3..0b9c5fbf6 100644
--- a/tests/css/test_tokenize.py
+++ b/tests/css/test_tokenize.py
@@ -20,67 +20,65 @@ VALID_VARIABLE_NAMES = [
 def test_variable_declaration_valid_names(name):
     css = f"${name}: black on red;"
     assert list(tokenize(css, "")) == [
-        Token(
-            name="variable_name", value=f"${name}:", path="", code=css, location=(0, 0)
-        ),
-        Token(name="whitespace", value=" ", path="", code=css, location=(0, 14)),
-        Token(name="token", value="black", path="", code=css, location=(0, 15)),
-        Token(name="whitespace", value=" ", path="", code=css, location=(0, 20)),
-        Token(name="token", value="on", path="", code=css, location=(0, 21)),
-        Token(name="whitespace", value=" ", path="", code=css, location=(0, 23)),
-        Token(name="token", value="red", path="", code=css, location=(0, 24)),
-        Token(name="variable_value_end", value=";", path="", code=css, location=(0, 27)),
+        Token(name='variable_name', value=f'${name}:', path='', code=css, location=(0, 0), length=14),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 14), length=1),
+        Token(name='token', value='black', path='', code=css, location=(0, 15), length=5),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 20), length=1),
+        Token(name='token', value='on', path='', code=css, location=(0, 21), length=2),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 23), length=1),
+        Token(name='token', value='red', path='', code=css, location=(0, 24), length=3),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 27), length=1),
     ]
 
 
 def test_variable_declaration_multiple_values():
     css = "$x: 2vw\t4% 6s  red;"
     assert list(tokenize(css, "")) == [
-        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-        Token(name='scalar', value='2vw', path='', code=css, location=(0, 4)),
-        Token(name='whitespace', value='\t', path='', code=css, location=(0, 7)),
-        Token(name='scalar', value='4%', path='', code=css, location=(0, 8)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 10)),
-        Token(name='duration', value='6s', path='', code=css, location=(0, 11)),
-        Token(name='whitespace', value='  ', path='', code=css, location=(0, 13)),
-        Token(name='token', value='red', path='', code=css, location=(0, 15)),
-        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 18))
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+        Token(name='scalar', value='2vw', path='', code=css, location=(0, 4), length=3),
+        Token(name='whitespace', value='\t', path='', code=css, location=(0, 7), length=0),
+        Token(name='scalar', value='4%', path='', code=css, location=(0, 8), length=2),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 10), length=1),
+        Token(name='duration', value='6s', path='', code=css, location=(0, 11), length=2),
+        Token(name='whitespace', value='  ', path='', code=css, location=(0, 13), length=2),
+        Token(name='token', value='red', path='', code=css, location=(0, 15), length=3),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 18), length=1),
     ]
 
 
 def test_variable_declaration_comment_ignored():
     css = "$x: red; /* comment */"
     assert list(tokenize(css, "")) == [
-        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-        Token(name='token', value='red', path='', code=css, location=(0, 4)),
-        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 7)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 8))
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+        Token(name='token', value='red', path='', code=css, location=(0, 4), length=3),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 7), length=1),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 8), length=1),
     ]
 
 
 def test_variable_declaration_comment_interspersed_ignored():
     css = "$x: re/* comment */d;"
     assert list(tokenize(css, "")) == [
-        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-        Token(name='token', value='re', path='', code=css, location=(0, 4)),
-        Token(name='token', value='d', path='', code=css, location=(0, 19)),
-        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 20))
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+        Token(name='token', value='re', path='', code=css, location=(0, 4), length=2),
+        Token(name='token', value='d', path='', code=css, location=(0, 19), length=1),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 20), length=1),
     ]
 
 
 def test_variable_declaration_no_semicolon():
     css = "$x: 1\n$y: 2"
     assert list(tokenize(css, "")) == [
-        Token(name="variable_name", value="$x:", code=css, path="", location=(0, 0)),
-        Token(name="whitespace", value=" ", code=css, path="", location=(0, 3)),
-        Token(name="number", value="1", code=css, path="", location=(0, 4)),
-        Token(name="variable_value_end", value="\n", code=css, path="", location=(0, 5)),
-        Token(name="variable_name", value="$y:", code=css, path="", location=(1, 0)),
-        Token(name="whitespace", value=" ", code=css, path="", location=(1, 3)),
-        Token(name="number", value="2", code=css, path="", location=(1, 4)),
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+        Token(name='number', value='1', path='', code=css, location=(0, 4), length=1),
+        Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 5), length=1),
+        Token(name='variable_name', value='$y:', path='', code=css, location=(1, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(1, 3), length=1),
+        Token(name='number', value='2', path='', code=css, location=(1, 4), length=1),
     ]
 
 
@@ -94,68 +92,68 @@ def test_variables_declarations_amongst_rulesets():
     css = "$x:1; .thing{text:red;} $y:2;"
     tokens = list(tokenize(css, ""))
     assert tokens == [
-        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-        Token(name='number', value='1', path='', code=css, location=(0, 3)),
-        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 4)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 5)),
-        Token(name='selector_start_class', value='.thing', path='', code=css, location=(0, 6)),
-        Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 12)),
-        Token(name='declaration_name', value='text:', path='', code=css, location=(0, 13)),
-        Token(name='token', value='red', path='', code=css, location=(0, 18)),
-        Token(name='declaration_end', value=';', path='', code=css, location=(0, 21)),
-        Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 22)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 23)),
-        Token(name='variable_name', value='$y:', path='', code=css, location=(0, 24)),
-        Token(name='number', value='2', path='', code=css, location=(0, 27)),
-        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 28)),
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='number', value='1', path='', code=css, location=(0, 3), length=1),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 4), length=1),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 5), length=1),
+        Token(name='selector_start_class', value='.thing', path='', code=css, location=(0, 6), length=6),
+        Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 12), length=1),
+        Token(name='declaration_name', value='text:', path='', code=css, location=(0, 13), length=5),
+        Token(name='token', value='red', path='', code=css, location=(0, 18), length=3),
+        Token(name='declaration_end', value=';', path='', code=css, location=(0, 21), length=1),
+        Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 22), length=1),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 23), length=1),
+        Token(name='variable_name', value='$y:', path='', code=css, location=(0, 24), length=3),
+        Token(name='number', value='2', path='', code=css, location=(0, 27), length=1),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 28), length=1),
     ]
 
 
 def test_variables_reference_in_rule_declaration_value():
     css = ".warn{text: $warning;}"
     assert list(tokenize(css, "")) == [
-        Token(name='selector_start_class', value='.warn', path='', code=css, location=(0, 0)),
-        Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 5)),
-        Token(name='declaration_name', value='text:', path='', code=css, location=(0, 6)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 11)),
-        Token(name='variable_ref', value='$warning', path='', code=css, location=(0, 12)),
-        Token(name='declaration_end', value=';', path='', code=css, location=(0, 20)),
-        Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 21)),
+        Token(name='selector_start_class', value='.warn', path='', code=css, location=(0, 0), length=5),
+        Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 5), length=1),
+        Token(name='declaration_name', value='text:', path='', code=css, location=(0, 6), length=5),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 11), length=1),
+        Token(name='variable_ref', value='$warning', path='', code=css, location=(0, 12), length=8),
+        Token(name='declaration_end', value=';', path='', code=css, location=(0, 20), length=1),
+        Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 21), length=1),
     ]
 
 
 def test_variables_reference_in_rule_declaration_value_multiple():
     css = ".card{padding: $pad-y $pad-x;}"
     assert list(tokenize(css, "")) == [
-        Token(name='selector_start_class', value='.card', path='', code=css, location=(0, 0)),
-        Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 5)),
-        Token(name='declaration_name', value='padding:', path='', code=css, location=(0, 6)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 14)),
-        Token(name='variable_ref', value='$pad-y', path='', code=css, location=(0, 15)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 21)),
-        Token(name='variable_ref', value='$pad-x', path='', code=css, location=(0, 22)),
-        Token(name='declaration_end', value=';', path='', code=css, location=(0, 28)),
-        Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 29)),
+        Token(name='selector_start_class', value='.card', path='', code=css, location=(0, 0), length=5),
+        Token(name='declaration_set_start', value='{', path='', code=css, location=(0, 5), length=1),
+        Token(name='declaration_name', value='padding:', path='', code=css, location=(0, 6), length=8),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 14), length=1),
+        Token(name='variable_ref', value='$pad-y', path='', code=css, location=(0, 15), length=6),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 21), length=1),
+        Token(name='variable_ref', value='$pad-x', path='', code=css, location=(0, 22), length=6),
+        Token(name='declaration_end', value=';', path='', code=css, location=(0, 28), length=1),
+        Token(name='declaration_set_end', value='}', path='', code=css, location=(0, 29), length=1)
     ]
 
 
 def test_variables_reference_in_variable_declaration():
     css = "$x: $y;"
     assert list(tokenize(css, "")) == [
-        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-        Token(name='variable_ref', value='$y', path='', code=css, location=(0, 4)),
-        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 6)),
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+        Token(name='variable_ref', value='$y', path='', code=css, location=(0, 4), length=2),
+        Token(name='variable_value_end', value=';', path='', code=css, location=(0, 6), length=1)
     ]
 
 
 def test_variable_references_in_variable_declaration_multiple():
     css = "$x: $y  $z\n"
     assert list(tokenize(css, "")) == [
-        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0)),
-        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3)),
-        Token(name='variable_ref', value='$y', path='', code=css, location=(0, 4)),
-        Token(name='whitespace', value='  ', path='', code=css, location=(0, 6)),
-        Token(name='variable_ref', value='$z', path='', code=css, location=(0, 8)),
-        Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 10)),
+        Token(name='variable_name', value='$x:', path='', code=css, location=(0, 0), length=3),
+        Token(name='whitespace', value=' ', path='', code=css, location=(0, 3), length=1),
+        Token(name='variable_ref', value='$y', path='', code=css, location=(0, 4), length=2),
+        Token(name='whitespace', value='  ', path='', code=css, location=(0, 6), length=2),
+        Token(name='variable_ref', value='$z', path='', code=css, location=(0, 8), length=2),
+        Token(name='variable_value_end', value='\n', path='', code=css, location=(0, 10), length=1)
     ]