{"id":15041278,"url":"https://github.com/ESCSS-labs/ESCSS-SCSS","last_synced_at":"2025-09-25T21:30:51.768Z","repository":{"id":257827346,"uuid":"850883464","full_name":"ESCSS-labs/ESCSS-SCSS","owner":"ESCSS-labs","description":"ESCSS-SCSS combines SCSS and Tailwind for cleaner CSS","archived":false,"fork":false,"pushed_at":"2025-01-11T16:57:45.000Z","size":47557,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-11T17:47:45.650Z","etag":null,"topics":["css","escss","escss-scss","scss","tailwindcss"],"latest_commit_sha":null,"homepage":"https://demo-estest-log-not-visible.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ESCSS-labs.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2024-09-02T02:33:44.000Z","updated_at":"2025-01-11T16:57:50.000Z","dependencies_parsed_at":"2024-11-24T16:21:52.211Z","dependency_job_id":"2474544c-77d1-4c64-b96f-b4a35f75ffc5","html_url":"https://github.com/ESCSS-labs/ESCSS-SCSS","commit_stats":null,"previous_names":["escss-labs/escss-scss"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ESCSS-labs%2FESCSS-SCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ESCSS-labs%2FESCSS-SCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ESCSS-labs%2FESCSS-SCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ESCSS-labs%2FESCSS-SCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ESCSS-labs","download_url":"https://codeload.github.com/ESCSS-labs/ESCSS-SCSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234251219,"owners_count":18803014,"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":["css","escss","escss-scss","scss","tailwindcss"],"created_at":"2024-09-24T20:45:51.925Z","updated_at":"2025-09-25T21:30:46.271Z","avatar_url":"https://github.com/ESCSS-labs.png","language":"SCSS","readme":"![logo](https://github.com/ESCSS-labs/ESCSS/blob/main/assets/logo.png)\n\n## 快速連結\n\n- [什麼是 ESCSS-SCSS](#什麼是-escss-scss)\n- [使用方式](#使用方式)\n- [安裝方式](#安裝方式)\n- [問與答](#問與答)\n\n## 什麼是 ESCSS-SCSS?\n\nESCSS-SCSS 是一個整合了 CSS 和 Tailwind 的全部潛力的 SCSS 檔案。\n\n## 使用方式\n\n### 設置專案的斷點\n\n```scss\n// _awaken.scss\n$SM: 0px;\n$MD: 0px;\n$LG: 0px;\n$XL: 0px;\n$XXL: 0px;\n```\n\n### 與 Tailwind 用法相同\n\n- 支援: basic / arbitrary / media / dark mode utilities。\n- 效能: 部分 mixin 需要 `\\`、`()` 來降低檔案大小。\n\n  ```scss\n  #Demo {\n    @include \\-m-1\\/2; // -m-1/2\n    @include m-1\\/2; // m-1/2\n    @include m-(20px); // m-[20px]\n    @include border-rose-500; // same\n    @include border-x-($color-rose-500); // border-x-rose-500, border-x/y/s/e/t/r/b/l-($color)\n    @include bg-rose-500; // same\n    @include bg-rose-500(25%); // bg-rose-500/[25%]\n    @include bg-rose-500(0.25); // bg-rose-500/25\n    @include bg-(length 200px 100px); // bg-[length:200px_100px]\n\n    // Media: sm、md、lg、xl、\\2xl\n    @include sm {\n      color: black;\n      @include bg-rose-500;\n    }\n\n    @include \\2xl {\n      color: black;\n      @include bg-rose-500;\n    }\n\n    // Dark Mode: 整合 selector and media queries (與 Tailwind 不同)\n    // - selector strategy：將「--dark」類別新增至 html/body/top 級別，並使用 JavaScript 切換該類別。\n    // - media strategy：使用 @include dark 時自動為您處理。僅在使用者將瀏覽器設定為暗黑模式時才會觸發。\n    @include dark {\n      color: black;\n      @include bg-rose-500;\n    }\n\n    // 重置默認的 tailwind 變數，在每個樣式後面都使用(建議)。\n    @include utils_reset;\n  }\n  ```\n\n### 與 CSS 用法相同\n\n```scss\n#Demo {\n  background: red;\n  @include bg-green-50; // 覆蓋 red\n\n  \u0026:hover {\n    color: red;\n  }\n\n  // 這是用來重置一些默認的 tailwind 變數，每個樣式尾端使用(建議)。\n  @include utils_reset;\n}\n```\n\n### 注意事項\n\n- `space-*` 和 `divide-*` 需要遵守 [Breaking Change: Mixed Declarations](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) 以避免發生衝突。\n\n```scss\n// ✅\n#Demo {\n  background: red;\n  @include space-x-8;\n  @include divide-x-8;\n\n  @include sm {\n    background: green;\n    @include divide-green-50;\n  }\n\n  @include utils_reset;\n}\n\n// ❌\n#Demo-1 {\n  @include space-x-8;\n  background: red; // warning\n  @include divide-x-8;\n\n  @include utils_reset;\n}\n\n#Demo-2 {\n  background: red;\n  @include space-x-8;\n  @include divide-x-8;\n\n  @include sm {\n    @include divide-green-50;\n    background: green; // warning\n  }\n\n  @include utils_reset;\n}\n\n#Demo-3 {\n  background: red;\n  @include bg-orange-500;\n  @include bg-amber-500;\n\n  @include sm {\n    background: green;\n    @include divide-green-50;\n  }\n\n  background: green; // warning\n  @include utils_reset;\n}\n```\n\n### 輸入 @include utils 出現更多提示 API\n\n- 在 VSCode 插件中安裝 'SCSS IntelliSense'\n\n## 安裝方式\n\n### 需求\n\n- sass \u003e= v1.23.0\n- vite (if \u003e= v5.4.0, use sass-embedded)\n\n### 複製 `product/` 資料夾下的 `_awaken.scss`\n\n### 在你專案中安裝套件\n\n```bash\nnpm add -D sass-embedded\n```\n\n```bash\nyarn add -D sass-embedded\n```\n\n```bash\npnpm add -D sass-embedded\n```\n\n```bash\nbun add -D sass-embedded\n```\n\n### 在 `vite.config.js` 中設置\n\n```js\n//  vite.config.js\nexport default defineConfig({\n  css: {\n    preprocessorOptions: {\n      scss: {\n        api: \"modern-compiler\",\n        additionalData: `@use '/assets/styles/_awaken.scss' as *;`,\n      },\n    },\n  },\n});\n```\n\n## 問與答\n\n### 為何默認斷點設置為($SM、$MD..) 0 px?\n\n每個專案都有自己獨特的斷點，所以設置 0 為默認值，同時這也代表著觸發 [AGPL-3.0, §13](https://www.gnu.org/licenses/agpl-3.0.en.html) 的開源義務，我認爲從自己的勞動中獲取報酬是合理的。\n\n### 能讓我專案舊版的版本過渡到新版本嗎?\n\n是的。設計的初衷就是希望藉由 ESCSS-SCSS 來協助專案的 Sass \u0026 Tailwind 過渡到最新版本，我遵守 Sass 和 Tailwind 的規範來確保能順利轉移。\n\n### 跟 Tailwind 相容的優勢\n\n在與 Tailwind 配合使用，會取得 tailwind 快速開發的優勢，也擁有了 SCSS 的封裝性和原生 CSS 永不過時的特性，在維護性、開發效率上取得絕佳的平衡。\n\n### 使用 `@include utils_reset` 的必要性?\n\n用於重置 Tailwind 的變數，你可能會想為何不使用原生 CSS 的 var 來解決，這樣就不必每次都手動重置，主要基於以下考量:\n\n- 更小的檔案大小: 使用 var 實際上就是增加了檔案大小，也決定間接決定了此專案檔案大小; 使用 Sass 的變數系統比較符合檔案大小最小化。\n- 整體性: 避免混淆使用者，通常專案本身就有自己的CSS變數系統 (var)。\n- 間接指標：建議每一個樣式都使用 `@include utils_reset` 來重置，可以查詢你樣式的使用量。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FESCSS-labs%2FESCSS-SCSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FESCSS-labs%2FESCSS-SCSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FESCSS-labs%2FESCSS-SCSS/lists"}