diff --git a/docs/blog/posts/spinners-and-pbs-in-textual.md b/docs/blog/posts/spinners-and-pbs-in-textual.md
index a92ba590a..daa6b774f 100644
--- a/docs/blog/posts/spinners-and-pbs-in-textual.md
+++ b/docs/blog/posts/spinners-and-pbs-in-textual.md
@@ -396,7 +396,7 @@ Below you can see the code I wrote and a short animation of the app working.
 
 === "CSS"
 
-    ```css
+    ```sass
     Screen {
         align: center middle;
     }
diff --git a/docs/guide/CSS.md b/docs/guide/CSS.md
index 9dc1f6fb2..80753ddbd 100644
--- a/docs/guide/CSS.md
+++ b/docs/guide/CSS.md
@@ -344,7 +344,7 @@ The `#dialog Button` selector matches all buttons that are below the widget with
 
 As with all selectors, you can combine as many as you wish. The following will match a `Button` that is under a `Horizontal` widget _and_ under a widget with an id of `"dialog"`:
 
-```css
+```sass
 #dialog Horizontal Button {
   text-style: bold;
 }
@@ -400,14 +400,14 @@ You can define variables to reduce repetition and encourage consistency in your
 Variables in Textual CSS are prefixed with `$`.
 Here's an example of how you might define a variable called `$border`:
 
-```scss
+```sass
 $border: wide green;
 ```
 
 With our variable assigned, we can write `$border` and it will be substituted with `wide green`.
 Consider the following snippet:
 
-```scss
+```sass
 #foo {
   border: $border;
 }
@@ -415,7 +415,7 @@ Consider the following snippet:
 
 This will be translated into:
 
-```scss
+```sass
 #foo {
   border: wide green;
 }
diff --git a/docs/styles/_template.md b/docs/styles/_template.md
index c92c701f7..325fb3432 100644
--- a/docs/styles/_template.md
+++ b/docs/styles/_template.md
@@ -62,7 +62,7 @@ Short description of the first example.
 
 === "rule.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/rule.css"
     ```
 -->
@@ -84,7 +84,7 @@ Short description of the second example.
 
 === "rule.css"
 
-    ```scss
+    ```sass
     --8<-- "docs/examples/styles/rule.css"
     ```
 
diff --git a/docs/styles/align.md b/docs/styles/align.md
index f2a42cb4a..ba6298917 100644
--- a/docs/styles/align.md
+++ b/docs/styles/align.md
@@ -33,7 +33,7 @@ This example contains a simple app with two labels centered on the screen with `
 
 === "align.css"
 
-    ```scss hl_lines="2"
+    ```sass hl_lines="2"
     --8<-- "docs/examples/styles/align.css"
     ```
 
@@ -54,7 +54,7 @@ Each label has been aligned differently inside its container, and its text shows
 
 === "align_all.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/align_all.css"
     ```
 
diff --git a/docs/styles/border.md b/docs/styles/border.md
index c471f580d..017fcb9e9 100644
--- a/docs/styles/border.md
+++ b/docs/styles/border.md
@@ -64,7 +64,7 @@ This examples shows three widgets with different border styles.
 
 === "border.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/border.css"
     ```
 
@@ -83,7 +83,7 @@ The next example shows a grid with all the available border types.
 
 === "border_all.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/border_all.css"
     ```
 
diff --git a/docs/styles/box_sizing.md b/docs/styles/box_sizing.md
index 5ad0be42a..73fe9064c 100644
--- a/docs/styles/box_sizing.md
+++ b/docs/styles/box_sizing.md
@@ -29,7 +29,7 @@ The bottom widget has `box-sizing: content-box` which increases the size of the
 
 === "box_sizing.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/box_sizing.css"
     ```
 
diff --git a/docs/styles/color.md b/docs/styles/color.md
index 508e47c18..8fa321fc4 100644
--- a/docs/styles/color.md
+++ b/docs/styles/color.md
@@ -24,7 +24,7 @@ This example sets a different text color for each of three different widgets.
 
 === "color.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/color.css"
     ```
 
@@ -43,7 +43,7 @@ The next example shows how `auto` chooses between a lighter or a darker text col
 
 === "color_auto.css"
 
-    ```css hl_lines="2"
+    ```sass hl_lines="2"
     --8<-- "docs/examples/styles/color_auto.css"
     ```
 
diff --git a/docs/styles/content_align.md b/docs/styles/content_align.md
index b459009c6..462bf8548 100644
--- a/docs/styles/content_align.md
+++ b/docs/styles/content_align.md
@@ -34,7 +34,7 @@ This first example shows three labels stacked vertically, each with different co
 
 === "content_align.css"
 
-    ```scss hl_lines="2 7-8 13"
+    ```sass hl_lines="2 7-8 13"
     --8<-- "docs/examples/styles/content_align.css"
     ```
 
@@ -54,7 +54,7 @@ Each label has its text aligned differently.
 
 === "content_align_all.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/content_align_all.css"
     ```
 
diff --git a/docs/styles/display.md b/docs/styles/display.md
index c9a52f329..ad308398b 100644
--- a/docs/styles/display.md
+++ b/docs/styles/display.md
@@ -27,7 +27,7 @@ Note that the second widget is hidden by adding the `"remove"` class which sets
 
 === "display.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/display.css"
     ```
 
diff --git a/docs/styles/dock.md b/docs/styles/dock.md
index dceb0beec..75d72eb23 100644
--- a/docs/styles/dock.md
+++ b/docs/styles/dock.md
@@ -48,7 +48,7 @@ The labels will remain in that position (docked) even if the container they are
 
 === "dock_all.css"
 
-    ```css hl_lines="2-5 8-11 14-17 20-23"
+    ```sass hl_lines="2-5 8-11 14-17 20-23"
     --8<-- "docs/examples/styles/dock_all.css"
     ```
 
diff --git a/docs/styles/grid/column_span.md b/docs/styles/grid/column_span.md
index 7f02b87d4..72ba1a5f3 100644
--- a/docs/styles/grid/column_span.md
+++ b/docs/styles/grid/column_span.md
@@ -35,7 +35,7 @@ The example below shows a 4 by 4 grid where many placeholders span over several
 
 === "column_span.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/column_span.css"
     ```
 
diff --git a/docs/styles/grid/grid_columns.md b/docs/styles/grid/grid_columns.md
index f603fde86..ab6edb79c 100644
--- a/docs/styles/grid/grid_columns.md
+++ b/docs/styles/grid/grid_columns.md
@@ -46,7 +46,7 @@ Because there are more rows than scalars in the style rule, the scalars will be
 
 === "grid_columns.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/grid_columns.css"
     ```
 
diff --git a/docs/styles/grid/grid_gutter.md b/docs/styles/grid/grid_gutter.md
index 2488f95f0..9293c0672 100644
--- a/docs/styles/grid/grid_gutter.md
+++ b/docs/styles/grid/grid_gutter.md
@@ -41,7 +41,7 @@ The example below employs a common trick to apply visually consistent spacing ar
 
 === "grid_gutter.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/grid_gutter.css"
     ```
 
diff --git a/docs/styles/grid/grid_rows.md b/docs/styles/grid/grid_rows.md
index 72b12b270..dbf5a161a 100644
--- a/docs/styles/grid/grid_rows.md
+++ b/docs/styles/grid/grid_rows.md
@@ -46,7 +46,7 @@ Because there are more rows than scalars in the style rule, the scalars will be
 
 === "grid_rows.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/grid_rows.css"
     ```
 
diff --git a/docs/styles/grid/grid_size.md b/docs/styles/grid/grid_size.md
index b35e4d391..3752bdfba 100644
--- a/docs/styles/grid/grid_size.md
+++ b/docs/styles/grid/grid_size.md
@@ -39,7 +39,7 @@ In the first example, we create a grid with 2 columns and 5 rows, regardless of
 
 === "grid_size_both.css"
 
-    ```css hl_lines="2"
+    ```sass hl_lines="2"
     --8<-- "docs/examples/styles/grid_size_both.css"
     ```
 
@@ -60,7 +60,7 @@ In the second example, we create a grid with 2 columns and however many rows are
 
 === "grid_size_columns.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/grid_size_columns.css"
     ```
 
diff --git a/docs/styles/grid/row_span.md b/docs/styles/grid/row_span.md
index 8e874480b..b7afb8146 100644
--- a/docs/styles/grid/row_span.md
+++ b/docs/styles/grid/row_span.md
@@ -38,7 +38,7 @@ After placing the placeholders `#p1`, `#p2`, `#p3`, and `#p4`, the next availabl
 
 === "row_span.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/row_span.css"
     ```
 
diff --git a/docs/styles/height.md b/docs/styles/height.md
index 437f69b8d..e9c558d50 100644
--- a/docs/styles/height.md
+++ b/docs/styles/height.md
@@ -51,7 +51,7 @@ Open the CSS file tab to see the comments that explain how each height is comput
 
 === "height_comparison.css"
 
-    ```css hl_lines="2 5 8 11 14 17 20 23 26"
+    ```sass hl_lines="2 5 8 11 14 17 20 23 26"
     --8<-- "docs/examples/styles/height_comparison.css"
     ```
 
diff --git a/docs/styles/links/link_background.md b/docs/styles/links/link_background.md
index 92e1e6191..ab6e775f5 100644
--- a/docs/styles/links/link_background.md
+++ b/docs/styles/links/link_background.md
@@ -47,7 +47,7 @@ It also shows that `link-background` does not affect hyperlinks.
 
 === "link_background.css"
 
-    ```css hl_lines="2 6 10"
+    ```sass hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_background.css"
     ```
 
@@ -55,7 +55,7 @@ It also shows that `link-background` does not affect hyperlinks.
 
 ## CSS
 
-```css
+```sass
 link-background: red 70%;
 link-background: $accent;
 ```
diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md
index e9ce8c210..c4d14ab3f 100644
--- a/docs/styles/links/link_color.md
+++ b/docs/styles/links/link_color.md
@@ -47,7 +47,7 @@ It also shows that `link-color` does not affect hyperlinks.
 
 === "link_color.css"
 
-    ```css hl_lines="2 6 10"
+    ```sass hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_color.css"
     ```
 
@@ -55,7 +55,7 @@ It also shows that `link-color` does not affect hyperlinks.
 
 ## CSS
 
-```css
+```sass
 link-color: red 70%;
 link-color: $accent;
 ```
diff --git a/docs/styles/links/link_hover_background.md b/docs/styles/links/link_hover_background.md
index 9da9e27c6..f8850420e 100644
--- a/docs/styles/links/link_hover_background.md
+++ b/docs/styles/links/link_hover_background.md
@@ -56,7 +56,7 @@ It also shows that `link-hover-background` does not affect hyperlinks.
 
 === "link_hover_background.css"
 
-    ```css hl_lines="2 6 10"
+    ```sass hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_hover_background.css"
     ```
 
@@ -65,7 +65,7 @@ It also shows that `link-hover-background` does not affect hyperlinks.
 
 ## CSS
 
-```css
+```sass
 link-hover-background: red 70%;
 link-hover-background: $accent;
 ```
diff --git a/docs/styles/links/link_hover_color.md b/docs/styles/links/link_hover_color.md
index a1f53c4f9..ec36aec95 100644
--- a/docs/styles/links/link_hover_color.md
+++ b/docs/styles/links/link_hover_color.md
@@ -60,7 +60,7 @@ It also shows that `link-hover-color` does not affect hyperlinks.
 
 === "link_hover_color.css"
 
-    ```css hl_lines="2 6 10"
+    ```sass hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_hover_color.css"
     ```
 
@@ -68,7 +68,7 @@ It also shows that `link-hover-color` does not affect hyperlinks.
 
 ## CSS
 
-```css
+```sass
 link-hover-color: red 70%;
 link-hover-color: black;
 ```
diff --git a/docs/styles/links/link_hover_style.md b/docs/styles/links/link_hover_style.md
index 3a9d429db..e5917c7b2 100644
--- a/docs/styles/links/link_hover_style.md
+++ b/docs/styles/links/link_hover_style.md
@@ -54,7 +54,7 @@ It also shows that `link-hover-style` does not affect hyperlinks.
 
 === "link_hover_style.css"
 
-    ```css hl_lines="2 6 10"
+    ```sass hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_hover_style.css"
     ```
 
@@ -63,7 +63,7 @@ It also shows that `link-hover-style` does not affect hyperlinks.
 
 ## CSS
 
-```css
+```sass
 link-hover-style: bold;
 link-hover-style: bold italic reverse;
 ```
diff --git a/docs/styles/links/link_style.md b/docs/styles/links/link_style.md
index 336e5a437..000222b41 100644
--- a/docs/styles/links/link_style.md
+++ b/docs/styles/links/link_style.md
@@ -45,7 +45,7 @@ It also shows that `link-style` does not affect hyperlinks.
 
 === "link_style.css"
 
-    ```css hl_lines="2 6 10"
+    ```sass hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_style.css"
     ```
 
@@ -53,7 +53,7 @@ It also shows that `link-style` does not affect hyperlinks.
 
 ## CSS
 
-```css
+```sass
 link-style: bold;
 link-style: bold italic reverse;
 ```
diff --git a/docs/styles/margin.md b/docs/styles/margin.md
index c537393d6..e5fba6f7d 100644
--- a/docs/styles/margin.md
+++ b/docs/styles/margin.md
@@ -49,7 +49,7 @@ In the example below we add a large margin to a label, which makes it move away
 
 === "margin.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/margin.css"
     ```
 
diff --git a/docs/styles/max_height.md b/docs/styles/max_height.md
index 32f869755..02fb415ed 100644
--- a/docs/styles/max_height.md
+++ b/docs/styles/max_height.md
@@ -29,7 +29,7 @@ Then, we set `max-height` individually on each placeholder.
 
 === "max_height.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/max_height.css"
     ```
 
diff --git a/docs/styles/max_width.md b/docs/styles/max_width.md
index 210fdab49..f0bee7ff9 100644
--- a/docs/styles/max_width.md
+++ b/docs/styles/max_width.md
@@ -29,7 +29,7 @@ Then, we set `max-width` individually on each placeholder.
 
 === "max_width.css"
 
-    ```scss
+    ```sass
     --8<-- "docs/examples/styles/max_width.css"
     ```
 
diff --git a/docs/styles/min_height.md b/docs/styles/min_height.md
index 883351b38..a4e7c8c1d 100644
--- a/docs/styles/min_height.md
+++ b/docs/styles/min_height.md
@@ -29,7 +29,7 @@ Then, we set `min-height` individually on each placeholder.
 
 === "min_height.css"
 
-    ```css hl_lines="13"
+    ```sass hl_lines="13"
     --8<-- "docs/examples/styles/min_height.css"
     ```
 
diff --git a/docs/styles/min_width.md b/docs/styles/min_width.md
index c64374097..d07926d8e 100644
--- a/docs/styles/min_width.md
+++ b/docs/styles/min_width.md
@@ -29,7 +29,7 @@ Then, we set `min-width` individually on each placeholder.
 
 === "min_width.css"
 
-    ```css hl_lines="13"
+    ```sass hl_lines="13"
     --8<-- "docs/examples/styles/min_width.css"
     ```
 
diff --git a/docs/styles/offset.md b/docs/styles/offset.md
index ad113de9f..e09279dbd 100644
--- a/docs/styles/offset.md
+++ b/docs/styles/offset.md
@@ -32,7 +32,7 @@ In this example, we have 3 widgets with differing offsets.
 
 === "offset.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/offset.css"
     ```
 
diff --git a/docs/styles/opacity.md b/docs/styles/opacity.md
index bf05fca28..e7baef264 100644
--- a/docs/styles/opacity.md
+++ b/docs/styles/opacity.md
@@ -26,7 +26,7 @@ When the opacity is zero, all we see is the (black) background.
 
 === "opacity.css"
 
-    ```scss
+    ```sass
     --8<-- "docs/examples/styles/opacity.css"
     ```
 
diff --git a/docs/styles/outline.md b/docs/styles/outline.md
index 3b4c63764..427448773 100644
--- a/docs/styles/outline.md
+++ b/docs/styles/outline.md
@@ -39,7 +39,7 @@ This example shows a widget with an outline. Note how the outline occludes the t
 
 === "outline.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/outline.css"
     ```
 
@@ -60,7 +60,7 @@ This example also shows that a widget can contain both a `border` and an `outlin
 
 === "outline_vs_border.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/outline_vs_border.css"
     ```
 
diff --git a/docs/styles/overflow.md b/docs/styles/overflow.md
index ba9296996..51b8acf89 100644
--- a/docs/styles/overflow.md
+++ b/docs/styles/overflow.md
@@ -47,7 +47,7 @@ The right side has `overflow-y: hidden` which will prevent a scrollbar from bein
 
 === "overflow.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/overflow.css"
     ```
 
diff --git a/docs/styles/padding.md b/docs/styles/padding.md
index 439ed2a9e..38212b158 100644
--- a/docs/styles/padding.md
+++ b/docs/styles/padding.md
@@ -48,7 +48,7 @@ This example adds padding around some text.
 
 === "padding.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/padding.css"
     ```
 
diff --git a/docs/styles/scrollbar_colors/index.md b/docs/styles/scrollbar_colors/index.md
index f3dd5b093..997891805 100644
--- a/docs/styles/scrollbar_colors/index.md
+++ b/docs/styles/scrollbar_colors/index.md
@@ -61,6 +61,6 @@ The right panel sets `scrollbar-background`, `scrollbar-color`, and `scrollbar-c
 
 === "scrollbars.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/scrollbars.css"
     ```
diff --git a/docs/styles/scrollbar_colors/scrollbar_background.md b/docs/styles/scrollbar_colors/scrollbar_background.md
index e2792c67e..aa375a93f 100644
--- a/docs/styles/scrollbar_colors/scrollbar_background.md
+++ b/docs/styles/scrollbar_colors/scrollbar_background.md
@@ -38,13 +38,13 @@ The `scrollbar-background` sets the background color of the scrollbar.
 
 === "scrollbars2.css"
 
-    ```css hl_lines="2"
+    ```sass hl_lines="2"
     --8<-- "docs/examples/styles/scrollbars2.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-backround: blue;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_background_active.md b/docs/styles/scrollbar_colors/scrollbar_background_active.md
index 2652418ee..be98ec44c 100644
--- a/docs/styles/scrollbar_colors/scrollbar_background_active.md
+++ b/docs/styles/scrollbar_colors/scrollbar_background_active.md
@@ -39,13 +39,13 @@ The `scrollbar-background-active` sets the background color of the scrollbar whe
 
 === "scrollbars2.css"
 
-    ```css hl_lines="3"
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/scrollbars2.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-backround-active: red;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_background_hover.md b/docs/styles/scrollbar_colors/scrollbar_background_hover.md
index b01ebe1b9..e815db3c7 100644
--- a/docs/styles/scrollbar_colors/scrollbar_background_hover.md
+++ b/docs/styles/scrollbar_colors/scrollbar_background_hover.md
@@ -39,13 +39,13 @@ The `scrollbar-background-hover` sets the background color of the scrollbar when
 
 === "scrollbars2.css"
 
-    ```css hl_lines="4"
+    ```sass hl_lines="4"
     --8<-- "docs/examples/styles/scrollbars2.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-background-hover: purple;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_color.md b/docs/styles/scrollbar_colors/scrollbar_color.md
index 421e67661..6d461dfcf 100644
--- a/docs/styles/scrollbar_colors/scrollbar_color.md
+++ b/docs/styles/scrollbar_colors/scrollbar_color.md
@@ -39,13 +39,13 @@ The `scrollbar-color` sets the color of the scrollbar.
 
 === "scrollbars2.css"
 
-    ```css hl_lines="5"
+    ```sass hl_lines="5"
     --8<-- "docs/examples/styles/scrollbars2.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-color: cyan;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_color_active.md b/docs/styles/scrollbar_colors/scrollbar_color_active.md
index 6767790ff..dd38b9fd7 100644
--- a/docs/styles/scrollbar_colors/scrollbar_color_active.md
+++ b/docs/styles/scrollbar_colors/scrollbar_color_active.md
@@ -39,13 +39,13 @@ The `scrollbar-color-active` sets the color of the scrollbar when the thumb is b
 
 === "scrollbars2.css"
 
-    ```css hl_lines="6"
+    ```sass hl_lines="6"
     --8<-- "docs/examples/styles/scrollbars2.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-color-active: yellow;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_color_hover.md b/docs/styles/scrollbar_colors/scrollbar_color_hover.md
index 3005d0da1..dde2c1443 100644
--- a/docs/styles/scrollbar_colors/scrollbar_color_hover.md
+++ b/docs/styles/scrollbar_colors/scrollbar_color_hover.md
@@ -39,13 +39,13 @@ The `scrollbar-color-hover` sets the color of the scrollbar when the cursor is o
 
 === "scrollbars2.css"
 
-    ```css hl_lines="7"
+    ```sass hl_lines="7"
     --8<-- "docs/examples/styles/scrollbars2.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-color-hover: pink;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_corner_color.md b/docs/styles/scrollbar_colors/scrollbar_corner_color.md
index 4edc582d4..65738a825 100644
--- a/docs/styles/scrollbar_colors/scrollbar_corner_color.md
+++ b/docs/styles/scrollbar_colors/scrollbar_corner_color.md
@@ -37,13 +37,13 @@ The example below sets the scrollbar corner (bottom-right corner of the screen)
 
 === "scrollbar_corner_color.css"
 
-    ```css hl_lines="3"
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/scrollbar_corner_color.css"
     ```
 
 ## CSS
 
-```css
+```sass
 scrollbar-corner-color: white;
 ```
 
diff --git a/docs/styles/scrollbar_gutter.md b/docs/styles/scrollbar_gutter.md
index c08ac4e2d..db5270303 100644
--- a/docs/styles/scrollbar_gutter.md
+++ b/docs/styles/scrollbar_gutter.md
@@ -35,7 +35,7 @@ terminal window.
 
 === "scrollbar_gutter.css"
 
-    ```scss hl_lines="2"
+    ```sass hl_lines="2"
     --8<-- "docs/examples/styles/scrollbar_gutter.css"
     ```
 
diff --git a/docs/styles/scrollbar_size.md b/docs/styles/scrollbar_size.md
index 19c092971..d74073328 100644
--- a/docs/styles/scrollbar_size.md
+++ b/docs/styles/scrollbar_size.md
@@ -34,7 +34,7 @@ In this example we modify the size of the widget's scrollbar to be _much_ larger
 
 === "scrollbar_size.css"
 
-    ```css hl_lines="13"
+    ```sass hl_lines="13"
     --8<-- "docs/examples/styles/scrollbar_size.css"
     ```
 
@@ -53,7 +53,7 @@ In the next example we show three containers with differently sized scrollbars.
 
 === "scrollbar_size2.css"
 
-    ```css hl_lines="6 11 16"
+    ```sass hl_lines="6 11 16"
     --8<-- "docs/examples/styles/scrollbar_size2.css"
     ```
 
diff --git a/docs/styles/text_align.md b/docs/styles/text_align.md
index 2eccff1e2..851962604 100644
--- a/docs/styles/text_align.md
+++ b/docs/styles/text_align.md
@@ -31,7 +31,7 @@ This example shows, from top to bottom: `left`, `center`, `right`, and `justify`
 
 === "text_align.css"
 
-    ```css hl_lines="2 7 12 17"
+    ```sass hl_lines="2 7 12 17"
     --8<-- "docs/examples/styles/text_align.css"
     ```
 
diff --git a/docs/styles/text_opacity.md b/docs/styles/text_opacity.md
index 304aac548..006d9f3de 100644
--- a/docs/styles/text_opacity.md
+++ b/docs/styles/text_opacity.md
@@ -30,7 +30,7 @@ This example shows, from top to bottom, increasing `text-opacity` values.
 
 === "text_opacity.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/text_opacity.css"
     ```
 
diff --git a/docs/styles/text_style.md b/docs/styles/text_style.md
index 19010325e..b89372eb4 100644
--- a/docs/styles/text_style.md
+++ b/docs/styles/text_style.md
@@ -27,7 +27,7 @@ Each of the three text panels has a different text style, respectively `bold`, `
 
 === "text_style.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/text_style.css"
     ```
 
@@ -46,7 +46,7 @@ The next example shows all different styles on their own, as well as some combin
 
 === "text_style_all.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/text_style_all.css"
     ```
 
diff --git a/docs/styles/tint.md b/docs/styles/tint.md
index e387b0bc7..5b0a86e6c 100644
--- a/docs/styles/tint.md
+++ b/docs/styles/tint.md
@@ -22,7 +22,7 @@ This examples shows a green tint with gradually increasing alpha.
 
 === "tint.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/tint.css"
     ```
 
diff --git a/docs/styles/visibility.md b/docs/styles/visibility.md
index fbed34e8b..fb066d555 100644
--- a/docs/styles/visibility.md
+++ b/docs/styles/visibility.md
@@ -45,7 +45,7 @@ Note that the second widget is hidden, while leaving a space where it would have
 
 === "visibility.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/visibility.css"
     ```
 
@@ -70,7 +70,7 @@ The containers all have a white background, and then:
 
 === "visibility_containers.css"
 
-    ```css hl_lines="2-3 6 8-10 12-14 16-18"
+    ```sass hl_lines="2-3 6 8-10 12-14 16-18"
     --8<-- "docs/examples/styles/visibility_containers.css"
     ```
 
diff --git a/docs/styles/width.md b/docs/styles/width.md
index dd349a5ae..32aa5a073 100644
--- a/docs/styles/width.md
+++ b/docs/styles/width.md
@@ -23,7 +23,7 @@ This example adds a widget with 50% width of the screen.
 
 === "width.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/styles/width.css"
     ```
 
@@ -50,7 +50,7 @@ This example adds a widget with 50% width of the screen.
 
 === "width_comparison.css"
 
-    ```css hl_lines="2 5 8 11 14 17 20 23 26"
+    ```sass hl_lines="2 5 8 11 14 17 20 23 26"
     --8<-- "docs/examples/styles/width_comparison.css"
     ```
 
diff --git a/docs/widgets/button.md b/docs/widgets/button.md
index 6683ee73a..ff7436d3b 100644
--- a/docs/widgets/button.md
+++ b/docs/widgets/button.md
@@ -25,7 +25,7 @@ Clicking any of the non-disabled buttons in the example app below will result th
 
 === "button.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/widgets/button.css"
     ```
 
diff --git a/docs/widgets/checkbox.md b/docs/widgets/checkbox.md
index c1ef5265a..6a8acc612 100644
--- a/docs/widgets/checkbox.md
+++ b/docs/widgets/checkbox.md
@@ -22,7 +22,7 @@ The example below shows checkboxes in various states.
 
 === "checkbox.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/widgets/checkbox.css"
     ```
 
diff --git a/docs/widgets/placeholder.md b/docs/widgets/placeholder.md
index be935d4a3..237573312 100644
--- a/docs/widgets/placeholder.md
+++ b/docs/widgets/placeholder.md
@@ -27,7 +27,7 @@ The example below shows each placeholder variant.
 
 === "placeholder.css"
 
-    ```css
+    ```sass
     --8<-- "docs/examples/widgets/placeholder.css"
     ```