{"id":19895368,"url":"https://github.com/razshare/superstyle","last_synced_at":"2026-05-12T11:36:38.889Z","repository":{"id":220908495,"uuid":"752170139","full_name":"razshare/superstyle","owner":"razshare","description":"Server side render websites using only SCSS as a templating system lol, or smth idk","archived":false,"fork":false,"pushed_at":"2024-02-05T04:35:44.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T00:56:13.805Z","etag":null,"topics":["php","scss"],"latest_commit_sha":null,"homepage":"https://github.com/tncrazvan/superstyle","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/razshare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-03T08:26:56.000Z","updated_at":"2024-02-05T04:14:29.000Z","dependencies_parsed_at":"2024-02-05T05:28:02.932Z","dependency_job_id":"10b5418c-124a-4ff5-bdb9-a2b513bc5dc3","html_url":"https://github.com/razshare/superstyle","commit_stats":null,"previous_names":["tncrazvan/superstyle","razshare/superstyle"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razshare%2Fsuperstyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razshare%2Fsuperstyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razshare%2Fsuperstyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razshare%2Fsuperstyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razshare","download_url":"https://codeload.github.com/razshare/superstyle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241322534,"owners_count":19944073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["php","scss"],"created_at":"2024-11-12T18:36:29.829Z","updated_at":"2026-05-12T11:36:33.867Z","avatar_url":"https://github.com/razshare.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is this?\n\nThis is a proof of concept of how to use SCSS as a template system to render websites on the server.\n\nHere's an example (using [HTMX](https://htmx.org) for managing state)\n\n```scss\n.noselect {\n  -webkit-touch-callout: none; // iOS Safari\n  -webkit-user-select: none; // Safari\n  -khtml-user-select: none; // Konqueror HTML\n  -moz-user-select: none; // Old versions of Firefox\n  -ms-user-select: none; // Internet Explorer/Edge\n  user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox\n}\n\n#app.noselect {\n  font-family: Arial, Helvetica, sans-serif;\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: #000;\n  color: #fff;\n  display: grid;\n  justify-content: center;\n  align-content: center;\n\n  #click.btn[hx-post=\"/increase\"][hx-swap=\"outerHTML\"][hx-target=\"#app\"][hx-select=\"#app\"] {\n    $active_background: rgb(195, 42, 11);\n    $active_text: #fff;\n    $inactive_text: #fff;\n\n    $counter: 1;\n    $content: \"Click me (#{$counter})\";\n\n    cursor: pointer;\n    border: 0.1rem solid transparent;\n    border-radius: 3rem;\n    padding: 1rem;\n    background: transparent;\n    color: $inactive_text;\n\n    \u0026:hover {\n      background: $active_background;\n      color: $active_text;\n    }\n\n    @function increaseCounter() {\n      $counter: $counter + 1;\n      $content: \"Click me (#{$counter})\";\n    }\n  }\n}\n\n```\n\n![Peek 2024-02-05 05-28](https://github.com/tncrazvan/superstyle/assets/6891346/943178d7-c2bb-4b3a-8ba7-09f61db8c191)\n\n\n# How to run\n\n- Make sure `php-yaml` is installed (don't ask).\n\n- Run\n  ```bash\n  composer prod:start\n  ```\n\n# Debugging\n\n- Start your XDebug 3 listener\n- Set your breakpoints\n- Run\n  ```bash\n  composer dev:start\n  ```\n\n---\n\nRefer to [catpaw](https://github.com/tncrazvan/catpaw?tab=readme-ov-file#get-started) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazshare%2Fsuperstyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazshare%2Fsuperstyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazshare%2Fsuperstyle/lists"}