{
  "id": "b354a59ef16dbee15f9099b6",
  "source": "solid:signals",
  "type": "github-document",
  "title": "sass",
  "content": "---\ntitle: SASS\norder: 1\nmainNavExclude: true\nuse_cases: \u003e-\n  css preprocessing, nested styles, style variables, mixins, scss syntax,\n  modular styling\ntags:\n  - styling\n  - sass\n  - scss\n  - preprocessor\n  - variables\n  - css\n  - mixins\nversion: '1.0'\ndescription: \u003e-\n  Configure SASS/SCSS in Solid projects for advanced CSS preprocessing with\n  variables, nesting, mixins, and modular stylesheets.\n---\n\n[SASS](https://sass-lang.com/) is a popular CSS preprocessor that makes authoring CSS easier.\nIt is a superset of CSS and offers two syntaxes: SCSS and the indented syntax (often referred to as just \"SASS\").\n\n## Installation\n\nDepending on your package manager, SASS can be installed as a development dependency:\n\n```package-install-dev\nsass\n```\n\n## Convert filename extensions\n\nAfter installation, the `.css` filename extensions will have to be changed to `.scss` or `.sass`.\nThe `.scss` syntax is a strict superset of CSS, while `.sass` offers a more relaxed syntax.\nVite, which is integrated with Solid, supports both.\nHowever, `.scss` is generally recommended.\n\n```scss\n// Card.scss\n.grid {\n\tdisplay: grid;\n\t\u0026-center {\n\t\tplace-items: center;\n\t}\n}\n.screen {\n\tmin-height: 100vh;\n}\n.card {\n\theight: 160px;\n\taspect-ratio: 2;\n\tborder-radius: 16px;\n\tbackground-color: white;\n\tbox-shadow: 0 0 0 4px hsl(0 0% 0% / 15%);\n}\n```\n\nIn a Solid component:\n\n```jsx\n// Card.jsx\nimport \"./card.scss\";\n\nfunction Card() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class=\"grid grid-center screen\"\u003e\n\t\t\t\t\u003cdiv class=\"card\"\u003eHello, world!\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\nBy simply changing the file extension from `.css` to `.scss` or `.sass` , Vite will automatically recognize these files and compile SASS to CSS on demand.\nWhen building in production, all SASS files are converted to CSS.\nThis ensures compatibility with most modern browsers.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/sass.mdx",
  "metadata": {
    "path": "src/routes/guides/styling-components/sass.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1810,
    "source_type": "github"
  },
  "hash": "dfcddb91056ebfeeb314effa53498b1514b1521f2365ba5fede793a587338453",
  "timestamp": "2026-02-23T11:43:00.188050429+01:00"
}