mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Show TCSS as css instead of sass.
This commit is contained in:
@@ -231,7 +231,7 @@ Let's add a CSS file to our application.
|
||||
|
||||
Adding the `CSS_PATH` class variable tells Textual to load the following file when the app starts:
|
||||
|
||||
```sass title="stopwatch03.tcss"
|
||||
```css title="stopwatch03.tcss"
|
||||
--8<-- "docs/examples/tutorial/stopwatch03.tcss"
|
||||
```
|
||||
|
||||
@@ -246,7 +246,7 @@ This app looks much more like our sketch. Let's look at how Textual uses `stopwa
|
||||
|
||||
CSS files contain a number of _declaration blocks_. Here's the first such block from `stopwatch03.tcss` again:
|
||||
|
||||
```sass
|
||||
```css
|
||||
Stopwatch {
|
||||
layout: horizontal;
|
||||
background: $boost;
|
||||
@@ -275,7 +275,7 @@ Here's how this CSS code changes how the `Stopwatch` widget is displayed.
|
||||
|
||||
Here's the rest of `stopwatch03.tcss` which contains further declaration blocks:
|
||||
|
||||
```sass
|
||||
```css
|
||||
TimeDisplay {
|
||||
content-align: center middle;
|
||||
opacity: 60%;
|
||||
@@ -323,7 +323,7 @@ We can accomplish this with a CSS _class_. Not to be confused with a Python clas
|
||||
|
||||
Here's the new CSS:
|
||||
|
||||
```sass title="stopwatch04.tcss" hl_lines="33-53"
|
||||
```css title="stopwatch04.tcss" hl_lines="33-53"
|
||||
--8<-- "docs/examples/tutorial/stopwatch04.tcss"
|
||||
```
|
||||
|
||||
@@ -331,7 +331,7 @@ These new rules are prefixed with `.started`. The `.` indicates that `.started`
|
||||
|
||||
Some of the new styles have more than one selector separated by a space. The space indicates that the rule should match the second selector if it is a child of the first. Let's look at one of these styles:
|
||||
|
||||
```sass
|
||||
```css
|
||||
.started #start {
|
||||
display: none
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user