Mirrors/catppuccin-palette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs(sass): mention sass syntax weirdness

Browse source 
Co-authored-by: sgoudham <sgoudham@gmail.com>
This commit is contained in:
winston 2022-08-14 04:08:22 +02:00
parent 594ccd12ab
commit aaa247a499
No known key found for this signature in database
GPG key ID: 3786770EDBC2B481
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
scss/README.md
View file

@ -30,6 +30,14 @@ Output:
Another way to create all four flavours, in a single file, from a single file, Another way to create all four flavours, in a single file, from a single file,
is to use `_catppuccin.scss`. is to use `_catppuccin.scss`.
**NB**: Due to websafe colours being predefined in CSS, colours like `red`, `green`, `blue` will **not** be generated with this method, **when they are not** explicitly cast as a string. To ensure proper generation, wrap your values with `'`.
In short:\
❌ Don't do this:
`#{map-get($color, blue)}`\
✅ Do this:
`#{map-get($color, 'blue')}`
Input: Input:
```scss ```scss
@ -37,8 +45,9 @@ Input:
@each $flavour, $colour in catppuccin.$palette { @each $flavour, $colour in catppuccin.$palette {
.my-#{flavour}-class { .my-#{flavour}-class {
background: map-get($colour, base); // you need surround the catppuccin colour names with quotes
color: map-get($colour, text); background: map-get($colour, 'base');
color: map-get($colour, 'blue');
} }
} }
``` ```