Using Sass math in Sage project

bud
1

I’m migrating from a previous Sage (9) project which is using the deprecated / division syntax and would like to take the opportunity to migrate to using math.div() instead, but am having trouble determining how to achieve this.

Based on this post I’m thinking that the recommended approach would be in the bud.config.js file, perhaps utilizing

  • bud.sass.importGlobal
  • bud.sass.setOption

And then @use sass:math in the sass file, but I’m not sure how bud.sass would be used relative to bud entry.

Would someone mind providing some direction/instruction?

Thanks much, Roots posse.

2

I should have probably been more explicit about the errors I was seeing.

There wasn’t a fatal error happening in the build, just an error based on lint configs.

Updating "at-rule-no-unknown" set (in theme/.stylelintrc) and adding use allowed me to include @use sass:math at the top of my scss file.

This is my rule set with Bootstrap v5

"rules": {
    "no-descending-specificity": null,
    "selector-class-pattern": null,
    "function-no-unknown": null,
    "alpha-value-notation": null,
    "font-family-name-quotes": null,
    "declaration-block-no-redundant-longhand-properties": null,
    "color-function-notation": null,
    "scss/at-extend-no-missing-placeholder": null,
    "shorthand-property-no-redundant-values": null,
    "property-no-vendor-prefix": null,
    "import-notation": null,
    "scss/at-import-partial-extension": null,
    "comment-empty-line-before": null,
    "scss/no-global-function-names": null,
    "function-url-quotes": null,
    "declaration-colon-newline-after": null,
    "value-list-comma-newline-after": null,
    "no-empty-source": null,
    "at-rule-empty-line-before": null,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extend",
          "at-root",
          "debug",
          "warn",
          "error",
          "if",
          "else",
          "for",
          "each",
          "while",
          "mixin",
          "include",
          "content",
          "return",
          "tailwind",
          "apply",
          "responsive",
          "variants",
          "screen",
          "function",
          "use"
        ]
      }
    ]
  }
1 Like