CSS boilerplate structure for multiple contexts and user preferences

css-starting-structure.scss.json

{
  "CSS Initializeer": {
    "prefix": "initialize",
    "body": [
      "/* VARIABLES */",
      "/* SASS VARIABLES - WILL BE PREPROCESSED */",
      "",
      "\\$mobile-breakpoint: 768px;",
      "",
      "/* CSS VARIABLES - WILL BE RENDERED IN BROWSER */ ",
      ":root { ",
      "  /* COLORS */ ",
      "  /* --example-color: #000000; */",
      "",
      "  /* FONT SIZES */ ",
      "  /* --example-size: 1.5rem; */",
      "",
      "}",
      "",
      "/* PREFERS DARK MODE */",
      "/* Does this design accomodate viewers who prefer a dark color scheme? */",
      "@media(prefers-color-scheme: dark) {",
      "  :root {",
      "  ",
      "  }",
      "}",
      "",
      "/* PREFERS REDUCED MOTION */",
      "/* Does this design accomodate viewers who prefer reduced motion? */",
      "@media (prefers-reduced-motion) {",
      "  :root {",
      "  ",
      "  }",
      "}",
      "",
      "/* GLOBAL STYLES */ ",
      ":root {",
      "  ",
      "}",
      "",
      "/* DESKTOP-ONLY STYLES */",
      "@media only screen and (min-width: (\\$mobile-breakpoint+1px)) {",
      "  :root {",
      "",
      "  }",
      "}",
      "",
      "/* MOBILE-ONLY STYLES */",
      "/* Does this design accomodate viewers using a small screen or screen magnifier? */",
      "@media only screen and (max-width: \\$mobile-breakpoint) {",
      "  :root {",
      "",
      "  }",
      "}"
    ],
    "description": "CSS Initializeer"
  }
}

Docs on how to install snippets in VS Code