mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
2.5 KiB
JSON
17 lines
2.5 KiB
JSON
{
|
|
"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"
|
|
} |