sintaxi/harp

Unable to utilize variables on SASS/SCSS 7-1 structure

jcchikikomori opened this issue · 1 comments

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;}

Already solved by setting default values, if the device prefers light/default mode. My mistake