Skip to content

Commit 35eddbf

Browse files
committed
Second pass
1 parent b753c6f commit 35eddbf

1 file changed

Lines changed: 20 additions & 9 deletions

File tree

src/scss/README.md

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,45 @@
11
# App.css split into SCSS
22

3-
This is the current release app.css, split into SCSS partials. This folder can be deleted locally if you do not wish to keep it.
3+
This is the current release app.css, split into SCSS partials. This folder can be deleted locally if you do not wish to keep it.
44

55
## Features
66

7-
Gentle nesting. Because we are using scripts to pull out the partials, and then coming in and selecting some selectors to nest, we want to make sure any nesting we do here in these doesn't end up compiling into a CSS file that does not match the source app.css. As such, it is currently limited to `@media` and `rtl` selectors. You are encouraged to add more nesting yourself, if you prefer so.
7+
Gentle nesting. These partials started as a straight split of app.css, with a few selectors manually nested on top. We want to make sure any nesting we do here doesn't end up compiling into a CSS file that fails to match the source app.css. As such, it is currently limited to `@media` and `rtl` selectors. You are encouraged to add more nesting yourself, if you prefer so.
88

9-
An [_examples.scss](_examples.scss) to introduce you to some of the common things you can do with SASS and building your theme.
9+
An [_examples.scss](_examples.scss) to introduce you to some of the common things you can do with SASS and building your theme. It's left out of `theme.scss`'s `@forward` list on purpose, so it never ends up in your compiled output.
1010

1111
`@use` and `@forward` built in to the partials and compiled file.
1212

1313
## How to use this
1414

1515
> [!NOTE]
16-
> If you use an IDE, your IDE may already contain a compiler. The instructions are for those editing by hand below.
16+
> If you use an IDE, your IDE may already contain a compiler. The instructions are for those editing by hand below.
1717
18-
Install [SASS](https://sass-lang.com) through the package manager of your choice, or compile direct from Github. If you use an IDE, your IDE may already
18+
Install [SASS](https://sass-lang.com) through the package manager of your choice, or compile direct from GitHub.
1919

20-
In the terminal, point SASS to watch `/` folder and recompile as you make changesUse the command:
20+
None of this is wired into `lint.yml` or `release.yml`. Compiling here is entirely up to you, only `theme.css` matters for release.
21+
22+
In the terminal, point SASS at `src/scss/theme.scss`. SASS follows the whole `@forward` chain from there, so editing any partial still triggers a recompile. Run it from the repo root so `theme.css` lands at the top level. Use the command:
2123
```bash
2224
sass --watch src/scss/theme.scss:theme.css
2325
```
2426

25-
If you wish a `no-map` version, use the command:
27+
If you wish a `no-map` version, use the command:
2628

2729
```bash
2830
sass --watch --no-source-map src/scss/theme.scss:theme.css
2931
```
3032

31-
Make your changes to your SCSS files, and SASS will recompile.
33+
Just want a single build instead of a watcher? Drop `--watch`:
34+
35+
```bash
36+
sass src/scss/theme.scss:theme.css
37+
```
38+
39+
Make your changes to your SCSS files, and SASS will recompile.
3240

3341
> [!TIP]
34-
> You can also have `theme.css` compile directly to your `.obsidian/themes/theme-folder-here` for testing. Just reload Obsidian to check all your chases.
42+
> You can also have `theme.css` compile directly to your `.obsidian/themes/theme-folder-here` for testing. Just reload Obsidian to check all your changes.
43+
> ```bash
44+
> sass --watch src/scss/theme.scss:/path/to/vault/.obsidian/themes/theme-folder-here/theme.css
45+
> ```

0 commit comments

Comments
 (0)