Customization with Sass requires !important?

[LouisDeconinck]

I might be doing wrong as I'm quite inexperienced with Sass, but customization changes I'm making only go through when using !important. Is that intended? Without !important, nothing changes.

Example:

// Change color
:root {
 --primary: #43a047 !important;
 --primary-hover: #307333 !important;
 --spacing: 0.3rem !important;
}

article {
 padding: 0.8rem !important;
}

h2 {
  --typography-spacing-vertical: 0.5rem !important;
}

#recentposts {
 margin-top: 100px !important;
}

// Import full Pico source code
@import "pico/scss/pico";

[Elarnon]

I might be doing wrong as I'm quite inexperienced with Sass, but customization changes I'm making only go through when using !important. Is that intended? Without !important, nothing changes.

This is indeed not an issue with pico, but a misunderstanding of how SASS and CSS works. @import copies @import-ed file at the position of the @import statement in your file. Because SCSS inherits CSS's "last rule wins" behavior (for more details, see the CSS specificity rules), pico's SCSS overrides your own.

Place the @import directive at the top instead, so that your SCSS appears after pico's.