Unable to utilize variables on SASS/SCSS 7-1 structure
jcchikikomori opened this issue · 1 comments
jcchikikomori commented
main.scss
@charset 'UTF-8';
// 1. Configuration and helpers
@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins';
// 2. Vendors
@import 'vendors/bulma';
// 3. Base stuff
@import 'base/base', 'base/fonts', 'base/typography', 'base/helpers';
// 4. Layout-related sections
@import 'layout/header', 'layout/footer';
// 5. Components
@import 'components/nav', 'components/button', 'components/loading';
// 6. Page-specific styles
@import 'pages/home', 'pages/maintenance';
// 7. Themes
@import 'themes/default';
abstracts/variables.scss
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------
@media (prefers-color-scheme: dark) {
// https://coolors.co/f8f9fa-e9ecef-dee2e6-ced4da-adb5bd-6c757d-495057-343a40-212529
$theme-color-0: #212529;
$theme-color-1: #343A40;
$theme-color-2: #495057;
$theme-color-3: #6C757D;
$theme-color-4: #ADB5BD;
$theme-color-5: #CED4DA;
$theme-color-6: #DEE2E6;
$theme-color-7: #E9ECEF;
$theme-color-8: #f8f9fa;
$text: $theme-color-8 !default;
$background: $theme-color-0 !default;
}
themes/_default.scss
.article-container {
.article-content {
h1 {
border-radius: .5rem;
}
@media (prefers-color-scheme: dark) {
h1 {
background-color: $theme-color-1;
padding: .5rem;
}
}
}
}
Result:
body{margin:0;}body:before {display: block;white-space: pre;content: "Sass -> CSS (Undefined variable.
╷
45 │ background-color: $theme-color-1;
│ ^^^^^^^^^^^^^^
╵
www/blog/src/assets/scss/themes/_default.scss 45:27 @import
www/blog/src/assets/scss/main.scss 22:9 root stylesheet) /Users/johnc/www/blog/src/assets/scss/themes/_default.scss";color: #444;background-color: #fefe96;padding: 40px 40px;margin: 0;font-family: monospace;font-size: 14px;}
jcchikikomori commented
Already solved by setting default values, if the device prefers light/default mode. My mistake