{"id":21301729,"url":"https://github.com/funbox/scss-utils","last_synced_at":"2025-07-11T20:31:22.648Z","repository":{"id":40383407,"uuid":"455490451","full_name":"funbox/scss-utils","owner":"funbox","description":"A small set of SCSS mixins","archived":false,"fork":false,"pushed_at":"2023-05-16T11:27:14.000Z","size":17,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-29T19:03:02.523Z","etag":null,"topics":["scss","scss-mixins"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/funbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2022-02-04T09:34:16.000Z","updated_at":"2023-04-18T21:45:05.000Z","dependencies_parsed_at":"2024-10-04T23:40:57.655Z","dependency_job_id":null,"html_url":"https://github.com/funbox/scss-utils","commit_stats":{"total_commits":27,"total_committers":6,"mean_commits":4.5,"dds":0.4814814814814815,"last_synced_commit":"16c5d29ff922837232bcaf9e2cc8a83a92a1a215"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/funbox/scss-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funbox","download_url":"https://codeload.github.com/funbox/scss-utils/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-utils/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264892194,"owners_count":23679249,"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":["scss","scss-mixins"],"created_at":"2024-11-21T15:50:34.830Z","updated_at":"2025-07-11T20:31:17.638Z","avatar_url":"https://github.com/funbox.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @funboxteam/scss-utils\n\nThis is a set of SCSS mixins we use widely in our projects.\n\n[По-русски](./README.ru.md)\n\n## Rationale\n\nOur projects require a lot of styling, and amount of projects is also great. To share knowledge\nand prevent copy-pasting, we decided to move the most used SCSS helpers into a separate library.\n\n## Installation\n\n```shell\nnpm install --save-dev --save-exact @funboxteam/scss-utils\n```\n\n## Library contents\n\n- **[button-style-reset](./button-style-reset.scss)** — local reset of a button tag styles;\n- **[placeholder](./placeholder.scss)** — vendor-prefixed pseudo-elements for a placeholder of a text field;\n- **[text-cut](./text-cut.scss)** — single-line text cut with ellipsis;\n- **[multiline-text-cut](./multiline-text-cut.scss)** — multi-line text cut with ellipsis;\n- **[visually-hidden](./visually-hidden.scss)** — hide an element visually, still allowing assistive technologies to access it;\n- **[get-unicode-string](./get-unicode-string.scss)** — a function to get Unicode sequence. It is applied as a workaround when a value of a `content` property automatically converts to an unreadable Unicode symbol. The solution comes from the comment to a [GitHub issue](https://github.com/sass/sass/issues/659#issuecomment-64819075).\n\n## Usage\n\n### Direct usage\n\nImport a helper in an SCSS-file in which required mixin should be used:\n\n```scss\n@import '../../../node_modules/@funboxteam/scss-utils/visually-hidden';\n```\n\n*Use a short version with the tilde operator if your build tool supports it:*\n\n```scss\n@import '~@funboxteam/scss-utils/visually-hidden';\n```\n\nInclude a mixin as needed:\n\n```scss\n.button__text {\n  @include visually-hidden;\n}\n```\n\n### Usage via [scss-imports-loader](https://github.com/funbox/scss-imports-loader)\n\nMost of our projects use `scss-imports-loader` with a configuration file located in `config/scss-imports.js`.\n\nImport a helper in the `config/scss-imports.js`:\n\n```js\nmodule.exports = [\n  // ...\n  'node_modules/@funboxteam/scss-utils/placeholder',\n  'node_modules/@funboxteam/scss-utils/visually-hidden',\n  'node_modules/@funboxteam/scss-utils/button-style-reset',\n  'node_modules/@funboxteam/scss-utils/multiline-text-cut',\n  // ...\n];\n```\n\nInclude a mixin as needed:\n\n```scss\n.button__text {\n  @include visually-hidden;\n}\n```\n\n## Examples\n\nExample of **get-unicode-string** usage:\n\n```scss\n.list__item {\n  \u0026::before {\n    content: get-unicode-string('2022'); // Browser will display the symbol \"•\"\n  }\n}\n```\n\n[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fscss-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunbox%2Fscss-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fscss-utils/lists"}