{"id":15687130,"url":"https://github.com/felix-berlin/sass-butler","last_synced_at":"2025-12-26T02:57:54.908Z","repository":{"id":38183986,"uuid":"360508626","full_name":"felix-berlin/sass-butler","owner":"felix-berlin","description":"A collection of useful SASS / SCSS mixins and functions.","archived":false,"fork":false,"pushed_at":"2025-07-12T03:08:25.000Z","size":2540,"stargazers_count":9,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-12T05:26:13.882Z","etag":null,"topics":["sass","sass-module-system","sass-modules","scss","scss-functions","scss-library","scss-mixins","scss-module-system","scss-modules","scss-styles"],"latest_commit_sha":null,"homepage":"https://sass-butler.kasimir.dev/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/felix-berlin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"felix-berlin","ko_fi":"felixberlin","custom":["https://paypal.me/FelixScholze","https://www.buymeacoffee.com/felixberlin"]}},"created_at":"2021-04-22T12:19:31.000Z","updated_at":"2025-07-12T03:07:57.000Z","dependencies_parsed_at":"2023-07-17T08:41:12.058Z","dependency_job_id":"abbedb8b-44e5-487e-a149-f815e1fabfc7","html_url":"https://github.com/felix-berlin/sass-butler","commit_stats":{"total_commits":485,"total_committers":7,"mean_commits":69.28571428571429,"dds":0.5649484536082474,"last_synced_commit":"94fb64d2fa478c703ae300c76faae53279a974c4"},"previous_names":["felix-berlin/sassy-scss"],"tags_count":54,"template":false,"template_full_name":null,"purl":"pkg:github/felix-berlin/sass-butler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felix-berlin%2Fsass-butler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felix-berlin%2Fsass-butler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felix-berlin%2Fsass-butler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felix-berlin%2Fsass-butler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felix-berlin","download_url":"https://codeload.github.com/felix-berlin/sass-butler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felix-berlin%2Fsass-butler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266092844,"owners_count":23875545,"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":["sass","sass-module-system","sass-modules","scss","scss-functions","scss-library","scss-mixins","scss-module-system","scss-modules","scss-styles"],"created_at":"2024-10-03T17:43:54.471Z","updated_at":"2025-12-26T02:57:54.877Z","avatar_url":"https://github.com/felix-berlin.png","language":"SCSS","funding_links":["https://github.com/sponsors/felix-berlin","https://ko-fi.com/felixberlin","https://paypal.me/FelixScholze","https://www.buymeacoffee.com/felixberlin"],"categories":[],"sub_categories":[],"readme":"# SASS Butler\r\n\r\n\u003e Stands by your side with plenty of features and mixins.\r\n\r\n![npm](https://img.shields.io/npm/dm/@felix_berlin/sass-butler?logo=npm\u0026style=flat-square)\r\n![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/felix-berlin/sass-butler/total?style=flat-square\u0026logo=github)\r\n![npm (scoped)](https://img.shields.io/npm/v/@felix_berlin/sass-butler?logo=npm\u0026style=flat-square)\r\n![GitHub package.json version](https://img.shields.io/github/package-json/v/felix-berlin/sass-butler?label=github\u0026logo=github\u0026style=flat-square)\r\n![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/felix-berlin/scss-collection/build-docs.yml?label=build%20docs\u0026logo=github\u0026style=flat-square)\r\n![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/felix-berlin/sass-butler/unit-tests.yml?label=unit-tests\u0026logo=github\u0026style=flat-square)\r\n![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/felix-berlin/sass-butler/release.yml?label=release\u0026logo=github\u0026style=flat-square)\r\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/felix-berlin/scss-collection?style=flat-square\u0026logo=github)\r\n\r\n\u003e SASS Butler is a big collection of SASS mixins and functions.\r\n\r\nMixins and functions are unit tested via [Jest](https://jestjs.io/) and [True](https://www.oddbird.net/true/).\r\n*Unfortunately, it is [not yet possible](https://github.com/oddbird/true/issues/88) to create a coverage report.*\r\n\r\n## Whats inside?\r\n\r\nVisit \u003chttps://sass-butler.kasimir.dev\u003e for full documentation.\r\n\r\n### Functions\r\n\r\n- [colors](https://github.com/felix-berlin/sass-butler/blob/master/functions/_colors.scss)\r\n  - [hex-to-rgb-values()](https://sass-butler.kasimir.dev/#color-function-hex-to-rgb-values)\r\n  - [hex-to-rgb()](https://sass-butler.kasimir.dev/#function-hex-to-rgb)\r\n- [converters](https://github.com/felix-berlin/sass-butler/blob/master/functions/_converters.scss)\r\n  - [px-to-rem()](https://sass-butler.kasimir.dev/#converter-function-px-to-rem)\r\n- [lists](https://github.com/felix-berlin/sass-butler/blob/master/functions/_lists.scss)\r\n  - [first-of-list()](https://sass-butler.kasimir.dev/#list-function-first-of-list)\r\n  - [last-of-list()](https://sass-butler.kasimir.dev/#list-function-last-of-list)\r\n- [maps](https://github.com/felix-berlin/sass-butler/blob/master/functions/_maps.scss)\r\n  - [map-collect()](https://sass-butler.kasimir.dev/#map-function-map-collect)\r\n- [numbers](https://github.com/felix-berlin/sass-butler/blob/master/functions/_numbers.scss)\r\n  - [strip-unit()](https://sass-butler.kasimir.dev/#number-function-strip-unit)\r\n  - [number-invert()](https://sass-butler.kasimir.dev/#number-function-number-invert)\r\n  - [random-num()](https://sass-butler.kasimir.dev/#number-function-random-num)\r\n- [strings](https://github.com/felix-berlin/sass-butler/blob/master/functions/_strings.scss)\r\n  - [str-starts-with()](https://sass-butler.kasimir.dev/#string-function-str-starts-with)\r\n  - [str-ends-with()](https://sass-butler.kasimir.dev/#string-function-str-ends-with)\r\n  - [str-contains()](https://sass-butler.kasimir.dev/#string-function-str-contains)\r\n  - [str-replace()](https://sass-butler.kasimir.dev/#string-function-str-replace)\r\n  - [escape-svg()](https://sass-butler.kasimir.dev/#string-function-escape-svg)\r\n- [typechecking](https://github.com/felix-berlin/sass-butler/blob/master/functions/_type-checking.scss)\r\n  - [is-number()](https://sass-butler.kasimir.dev/#type-checking-function-is-number)\r\n  - [is-time()](https://sass-butler.kasimir.dev/#type-checking-function-is-time)\r\n  - [is-duration()](https://sass-butler.kasimir.dev/#type-checking-function-is-duration)\r\n  - [is-angle()](https://sass-butler.kasimir.dev/#type-checking-function-is-angle)\r\n  - [is-frequency()](https://sass-butler.kasimir.dev/#type-checking-function-is-frequency)\r\n  - [is-integer()](https://sass-butler.kasimir.dev/#type-checking-function-is-integer)\r\n  - [relative-length()](https://sass-butler.kasimir.dev/#type-checking-function-is-relative-length)\r\n  - [absolute-length()](https://sass-butler.kasimir.dev/#type-checking-function-is-absolute-length)\r\n  - [is-percentage()](https://sass-butler.kasimir.dev/#type-checking-function-is-percentage)\r\n  - [is-length()](https://sass-butler.kasimir.dev/#type-checking-function-is-length)\r\n  - [is-resolution()](https://sass-butler.kasimir.dev/#type-checking-function-is-resolution)\r\n  - [is-position()](https://sass-butler.kasimir.dev/#type-checking-function-is-position)\r\n\r\n### Mixins\r\n\r\n- [basic](https://github.com/felix-berlin/sass-butler/blob/master/mixins/_basic.scss)\r\n  - [select-style()](https://sass-butler.kasimir.dev/#basic-mixin-select-style)\r\n  - [target-anchor-offset()](https://sass-butler.kasimir.dev/#basic-mixin-target-anchor-offset)\r\n- [@media](https://github.com/felix-berlin/sass-butler/blob/master/mixins/_breakpoint.scss)\r\n  - [breakpoint()](https://sass-butler.kasimir.dev/#@media-mixin-breakpoint)\r\n  - [dark-mode-class()](https://sass-butler.kasimir.dev/#@media-mixin-dark-mode-class)\r\n  - [feature()](https://sass-butler.kasimir.dev/#@media-mixin-feature)\r\n  - [hover](https://sass-butler.kasimir.dev/#@media-mixin-hover)\r\n- [element](https://github.com/felix-berlin/sass-butler/blob/master/mixins/_element.scss)\r\n  - [line-on-sides()](https://sass-butler.kasimir.dev/#element-mixin-line-on-sides)\r\n  - [overlay()](https://sass-butler.kasimir.dev/#element-mixin-overlay)\r\n  - [list-style-image()](https://sass-butler.kasimir.dev/#element-mixin-list-style-image)\r\n- [typo](https://github.com/felix-berlin/sass-butler/blob/master/mixins/_font.scss)\r\n  - [font-smoothing()](https://sass-butler.kasimir.dev/#typo-mixin-font-smoothing)\r\n  - [fluid-typo()](https://sass-butler.kasimir.dev/#typo-mixin-fluid-typo)\r\n  - [icon-font()](https://sass-butler.kasimir.dev/#typo-mixin-icon-font)\r\n  - [font-face()](https://sass-butler.kasimir.dev/#typo-mixin-font-face)\r\n\r\n## Installation\r\n\r\n```bash\r\npnpm add @felix_berlin/sass-butler\r\n\r\nnpm i @felix_berlin/sass-butler\r\n\r\nyarn add @felix_berlin/sass-butler\r\n```\r\n\r\nIf you haven't already, install Sass.\r\n\r\n```bash\r\npnpm add -D sass\r\n\r\nnpm i -D sass\r\n\r\nyarn add -D sass\r\n```\r\n\r\n## Requirements\r\n\r\nThis project uses the \"new\" [Sass Module system](https://sass-lang.com/blog/the-module-system-is-launched). Therefore your build tool or taskrunner have to support **Dart Sass 1.79.0** or above.\r\n\r\n### \u003cimg src=\"https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg\" width=\"50\"\u003e Sass support\r\n\r\n| Sass Compiler | Support |\r\n| ------------- | ------- |\r\n| Dart Sass     | ✅       |\r\n| Lib Sass      | ❌       |\r\n| Ruby Sass     | ⚰️       |\r\n\r\n### Version support\r\n\r\nYour Dart Sass Version must be: \u003e= 1.33.0\r\n\r\n## Usage\r\n\r\n### Import all at once or all individually\r\n\r\nSingle import of the used functionalities.\r\n\r\n```scss\r\n@use './node_modules/sass-butler/functions/first-of-list' as fol;\r\n```\r\n\r\nimport all functions at once:\r\n\r\n```scss\r\n@use './node_modules/sass-butler/functions' as fn;\r\n```\r\n\r\n### How to import\r\n\r\n```scss\r\n@use './node_modules/sass-butler/mixis/breakpoint' as breakpoint;\r\n```\r\n\r\nWith `sass-loader`:\r\n\r\n```scss\r\n@use '~sass-butler/mixis/breakpoint' as breakpoint;\r\n```\r\n\r\nWith `webpack mix`:\r\n\r\n```js\r\n  .sass('resources/assets/styles/app.scss', 'styles', {\r\n    sassOptions: {\r\n      includePaths: ['./node_modules'],\r\n    },\r\n  })\r\n```\r\n\r\n```scss\r\n@use 'sass-butler/mixis/breakpoint' as breakpoint;\r\n```\r\n\r\n### Override module config\r\n\r\nSome of the module comes with \"global\" config vars and maps (breakpoint mixin). This may be a problem since you can only overwrite once with `with()`.\r\nHere is an example how you can deal with it.\r\n\r\n#### Redefine mixin or function default configs\r\n\r\n**Example how to use the breakpoint mixin with own default config:**\r\n\r\nCreate a new file and load the breakpoint mixin from the `node_modules` with the `@forward` function. Similar to the `@use` function you can overwrite predefined vars with `with()`.\r\n\r\n```scss\r\n// _custom-breakpoints.scss\r\n\r\n@forward 'sass-butler/mixins/breakpoint' with (\r\n  // Add your own breakpoints map\r\n  $breakpoints: (\r\n    'xxs': 375px,\r\n    'xs': 568px,\r\n    'sm': 768px,\r\n    'md': 1024px,\r\n    'lg': 1260px,\r\n    'xlg': 1440px,\r\n    'fhd': 1920px,\r\n    'uhd': 2560px\r\n  )\r\n);\r\n```\r\n\r\nIn the rest of your project you don't add the module via `node_modules` anymore but load the customized module `_external.scss` with `@use`.\r\n\r\n```scss\r\n// _my-module.scss\r\n\r\n@use 'custom-breakpoints' as break;\r\n\r\n.my-selector {\r\n  @include break.breakpoint(lg) {\r\n    padding: 12px 0 1rem 0;\r\n  }\r\n}\r\n```\r\n\r\n\u003e :warning: **Pay attention to the loading order** when using redefined and package function/mixins!\r\n\r\n:x: **Can't be compiled** because the (package) breakpoint mixin is already loaded in ``mixins.scss``.\r\n\r\n```scss\r\n@use 'sass-butler/mixins' as mx;\r\n@use 'custom-breakpoints' as break;\r\n```\r\n\r\n:white_check_mark: **This will work.** Make sure to load the redefined module first.\r\n\r\n```scss\r\n@use 'custom-breakpoints' as break;\r\n@use 'sass-butler/mixins' as mx;\r\n```\r\n\r\n## Documentation\r\n\r\nYou can find the documentation at: [https://sass-butler.kasimir.dev](https://sass-butler.kasimir.dev)\r\n\r\n\u003e The documentation is updated automatically with each commit on the master branch.\r\n\r\n### Build the docs locally\r\n\r\nRun following command:\r\n`npm run sassDoc`\r\n\r\n## Contributors\r\n\r\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\r\n\u003c!-- prettier-ignore-start --\u003e\r\n\u003c!-- markdownlint-disable --\u003e\r\n\r\n\u003c!-- markdownlint-restore --\u003e\r\n\u003c!-- prettier-ignore-end --\u003e\r\n\r\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelix-berlin%2Fsass-butler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelix-berlin%2Fsass-butler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelix-berlin%2Fsass-butler/lists"}