|
1 | 1 | # App.css split into SCSS |
2 | 2 |
|
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. |
4 | 4 |
|
5 | 5 | ## Features |
6 | 6 |
|
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. |
8 | 8 |
|
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. |
10 | 10 |
|
11 | 11 | `@use` and `@forward` built in to the partials and compiled file. |
12 | 12 |
|
13 | 13 | ## How to use this |
14 | 14 |
|
15 | 15 | > [!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. |
17 | 17 |
|
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. |
19 | 19 |
|
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: |
21 | 23 | ```bash |
22 | 24 | sass --watch src/scss/theme.scss:theme.css |
23 | 25 | ``` |
24 | 26 |
|
25 | | -If you wish a `no-map` version, use the command: |
| 27 | +If you wish a `no-map` version, use the command: |
26 | 28 |
|
27 | 29 | ```bash |
28 | 30 | sass --watch --no-source-map src/scss/theme.scss:theme.css |
29 | 31 | ``` |
30 | 32 |
|
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. |
32 | 40 |
|
33 | 41 | > [!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