{"id":23377963,"url":"https://github.com/beyondjs/sass-processor","last_synced_at":"2025-08-23T10:09:17.704Z","repository":{"id":244810493,"uuid":"814593870","full_name":"beyondjs/sass-processor","owner":"beyondjs","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-18T17:13:33.000Z","size":42,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-18T18:28:18.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyondjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-13T10:06:38.000Z","updated_at":"2024-12-19T15:13:49.000Z","dependencies_parsed_at":"2024-06-17T16:29:10.941Z","dependency_job_id":"dae8e499-c24b-4a99-acff-0aea62f617cc","html_url":"https://github.com/beyondjs/sass-processor","commit_stats":null,"previous_names":["beyondjs/sass-processor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/beyondjs/sass-processor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fsass-processor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fsass-processor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fsass-processor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fsass-processor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondjs","download_url":"https://codeload.github.com/beyondjs/sass-processor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fsass-processor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271746549,"owners_count":24813570,"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","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-21T18:33:37.263Z","updated_at":"2025-08-23T10:09:17.684Z","avatar_url":"https://github.com/beyondjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BeyondJS Processor for SASS\n\n## Introduction\n\nBeyondJS is a powerful JavaScript framework designed to streamline development across multiple environments like\nbrowsers, Node.js, Deno, and Bun. A core feature of BeyondJS is its processor system, which includes support for SASS, a\npopular CSS preprocessor. The SASS processor in BeyondJS compiles SASS/SCSS files into standard CSS, facilitating easier\nstyling and maintenance of your application.\n\n## What is a BeyondJS Processor?\n\nA BeyondJS processor is a tool that handles specific types of files within a project. The SASS processor is responsible\nfor compiling SASS/SCSS files, allowing developers to leverage the advanced features of SASS while ensuring\ncompatibility with standard CSS.\n\n## Setting Up BeyondJS Processor for SASS\n\n### Creating a SASS Module\n\nTo create a new SASS module in BeyondJS, you need to create a folder for your module and add a `module.json` file to\nconfigure the SASS processor.\n\n### Example `module.json` Configuration\n\n```json\n{\n\t\"bundles\": {\n\t\t\"css\": { \"processor\": \"sass\" }\n\t}\n}\n```\n\nIn this configuration:\n\n-   The `css` bundle is processed using the SASS processor.\n\n### Example Directory Structure\n\n```\nmy-sass-module/\n├── src/\n│   ├── styles/\n│   │   └── main.scss\n├── module.json\n```\n\n### Example SASS File (`main.scss`)\n\n```scss\n$primary-color: #3498db;\n\nbody {\n\tfont-family: Arial, sans-serif;\n\tbackground-color: $primary-color;\n}\n\nh1 {\n\tcolor: white;\n}\n```\n\n## Benefits of Using BeyondJS Processor for SASS\n\n1. **Enhanced Styling Capabilities**:\n\n    - Utilize SASS features like variables, nested rules, and mixins to write cleaner and more maintainable CSS.\n\n2. **Modular Bundling**:\n\n    - Each SASS file is compiled and bundled independently, leading to faster loading times and better performance.\n\n3. **Automatic Compilation**:\n\n    - BeyondJS automatically handles the compilation of SASS/SCSS files, eliminating the need for manual build steps.\n\n4. **Integration with Other Processors**:\n    - Easily integrate the SASS processor with other processors in BeyondJS, such as TypeScript for JavaScript files.\n\n## Example Usage in a BeyondJS Project\n\nHere's an example of how to set up a BeyondJS project using both the SASS and TypeScript processors.\n\n### `module.json` Configuration\n\n```json\n{\n\t\"bundles\": {\n\t\t\"js\": { \"processor\": \"typescript\" },\n\t\t\"css\": { \"processor\": \"sass\" }\n\t}\n}\n```\n\n### Directory Structure\n\n```\nmy-beyondjs-project/\n├── src/\n│   ├── components/\n│   │   └── App.ts\n│   ├── styles/\n│   │   └── main.scss\n├── module.json\n```\n\n### TypeScript Component (`App.ts`)\n\n```typescript\nimport './styles/main.scss';\n\nconsole.log('Hello BeyondJS with SASS!');\n```\n\n## Conclusion\n\nThe BeyondJS processor for SASS simplifies the development process by automating the compilation of SASS/SCSS files and\nintegrating seamlessly with other processors. This modular approach enhances efficiency, performance, and flexibility,\nallowing developers to build scalable and maintainable applications. By leveraging the SASS processor in BeyondJS, you\ncan write advanced, maintainable styles with ease.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fsass-processor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondjs%2Fsass-processor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fsass-processor/lists"}