mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-04 03:01:23 -06:00
Add new _sass/custom/setup.scss
for variable definition (#1135)
This is an alternative PR that resolves #1011. Unlike #1013, this PR defines a *new* SASS file, `_sass/custom/setup.scss`, specifically designed for new custom variables (and other SASS-only constructs). It's imported after our `support` SASS files are (functions, variables), but otherwise is imported before all other files (ex, when CSS is emitted). So, custom callout colors can now be defined in this file. I also move the custom callout colors present in `custom.scss` to the right location. I've added some docs that briefly explain how to use the feature. Feedback is welcome! --- As an aside, I chose not to add a `_includes/css` file that imports this, and then import that file. I think that's only necessary if we're trying to render liquid somehow in the SASS file; since we're not trying to do that for `setup.scss`, I've opted to not include it. If we think this is relevant, I can re-add it. Co-authored-by: Peter Mosses <18308236+pdmosses@users.noreply.github.com>
This commit is contained in:
parent
eeb89e56f0
commit
d423c96d7a
@ -2,6 +2,7 @@
|
||||
$logo: "{{ site.logo | relative_url }}";
|
||||
{% endif %}
|
||||
@import "./support/support";
|
||||
@import "./custom/setup";
|
||||
@import "./color_schemes/light";
|
||||
@import "./color_schemes/{{ include.color_scheme }}";
|
||||
@import "./modules";
|
||||
|
@ -1,4 +1 @@
|
||||
$pink-000: #f77ef1;
|
||||
$pink-100: #f967f1;
|
||||
$pink-200: #e94ee1;
|
||||
$pink-300: #dd2cd4;
|
||||
// custom SCSS (or CSS) goes here
|
||||
|
1
_sass/custom/setup.scss
Normal file
1
_sass/custom/setup.scss
Normal file
@ -0,0 +1 @@
|
||||
// custom setup code goes here
|
@ -185,7 +185,7 @@ A paragraph...
|
||||
[^dark]:
|
||||
If you use the `dark` color scheme, this callout uses `$red-300` for the background, and `$red-000` for the title.
|
||||
|
||||
The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/custom.scss` file:
|
||||
The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/setup.scss` file:
|
||||
|
||||
```scss
|
||||
$pink-000: #f77ef1;
|
||||
|
@ -111,9 +111,29 @@ This allows you to switch the scheme via the following javascript.
|
||||
jtd.setTheme("foo")
|
||||
```
|
||||
|
||||
## Override and define new variables
|
||||
{: .d-inline-block }
|
||||
|
||||
New (v0.4.0)
|
||||
{: .label .label-green }
|
||||
|
||||
To define new SCSS variables, functions, or override existing theme variables, place SCSS code in `_sass/custom/setup.scss`. This should *not* be used for defining custom styles (see the next section).
|
||||
|
||||
This is most commonly-used to define [custom callout colors]({% link docs/configuration.md %}#callouts). For example,
|
||||
|
||||
```scss
|
||||
// _sass/custom/setup.scss
|
||||
$pink-000: #f77ef1;
|
||||
$pink-100: #f967f1;
|
||||
$pink-200: #e94ee1;
|
||||
$pink-300: #dd2cd4;
|
||||
```
|
||||
|
||||
In particular: this file is imported *after* the theme's variables and functions are defined, but *before* any CSS classes are emitted.
|
||||
|
||||
## Override and completely custom styles
|
||||
|
||||
For styles that aren't defined as variables, you may want to modify specific CSS classes.
|
||||
For styles that aren't defined as SCSS variables, you may want to modify specific CSS classes.
|
||||
Additionally, you may want to add completely custom CSS specific to your content.
|
||||
To do this, put your styles in the file `_sass/custom/custom.scss`.
|
||||
This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
|
||||
|
Loading…
x
Reference in New Issue
Block a user