Style all Textual CSS as 'sass'

Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.

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;
     }

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;
 }

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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;
 ```

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;
 ```

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;
 ```

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;
 ```

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;
 ```

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;
 ```

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```