{"id":14990546,"url":"https://github.com/7ninjas/scss-mixins","last_synced_at":"2025-04-10T03:53:58.039Z","repository":{"id":57093809,"uuid":"116377575","full_name":"7ninjas/scss-mixins","owner":"7ninjas","description":"Collection of scss mixins and functions to ease and improve implementations of common style-code patterns.","archived":false,"fork":false,"pushed_at":"2018-06-21T07:28:10.000Z","size":272,"stargazers_count":154,"open_issues_count":6,"forks_count":35,"subscribers_count":7,"default_branch":"develop","last_synced_at":"2025-04-10T03:53:51.708Z","etag":null,"topics":["bootstrap","css","css-modules","frontend","mixins","sass","scss","scss-mixins","styling"],"latest_commit_sha":null,"homepage":"https://7ninjas.com/","language":"CSS","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/7ninjas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-05T11:22:11.000Z","updated_at":"2025-03-27T22:27:26.000Z","dependencies_parsed_at":"2022-08-22T21:40:33.348Z","dependency_job_id":null,"html_url":"https://github.com/7ninjas/scss-mixins","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7ninjas%2Fscss-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7ninjas%2Fscss-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7ninjas%2Fscss-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7ninjas%2Fscss-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7ninjas","download_url":"https://codeload.github.com/7ninjas/scss-mixins/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154999,"owners_count":21056542,"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":["bootstrap","css","css-modules","frontend","mixins","sass","scss","scss-mixins","styling"],"created_at":"2024-09-24T14:20:20.283Z","updated_at":"2025-04-10T03:53:58.018Z","avatar_url":"https://github.com/7ninjas.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://7ninjas.com/\"\u003e\n    \u003cimg src=\"https://7ninjas.com/assets/7ninjas-logo-250x250.gif\" alt=\"\" width=72 height=72\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003e7ninjas\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    `scss-mixins` is a collection of scss mixins and functions to ease and improve implementations of common style-code patterns.\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/7ninjas/scss-mixins/blob/develop/BEST_PRACTICES.md\"\u003e\u003cstrong\u003eDiscover our scss practices »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://7ninjas.com/case-studies/\"\u003ePortfolio\u003c/a\u003e\n    ◦\n    \u003ca href=\"https://7ninjas.com/careers/\"\u003eCareers\u003c/a\u003e\n    ◦\n    \u003ca href=\"https://7ninjas.com/contact/\"\u003eContact\u003c/a\u003e\n  \u003c/p\u003e\n  \n  \u003cp align=\"center\"\u003e\u003cstrong\u003eBe like a Ninja! Style like a Ninja!\u003c/strong\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\n## Status\n\n[![npm](https://img.shields.io/npm/v/@7ninjas/scss-mixins.svg?style=for-the-badge)](https://www.npmjs.com/package/@7ninjas/scss-mixins)\n[![npm](https://img.shields.io/npm/l/@7ninjas/scss-mixins.svg?style=for-the-badge)](https://www.npmjs.com/package/@7ninjas/scss-mixins)\n[![npm](https://img.shields.io/npm/dt/@7ninjas/scss-mixins.svg?style=for-the-badge)](https://www.npmjs.com/package/@7ninjas/scss-mixins)\n\n[![CircleCI branch](https://img.shields.io/circleci/project/github/7ninjas/scss-mixins/develop.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n[![David](https://img.shields.io/david/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n[![GitHub issues](https://img.shields.io/github/issues/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n\n[![GitHub stars](https://img.shields.io/github/stars/7ninjas/scss-mixins.svg?style=social\u0026label=Stars\u0026style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n[![GitHub watchers](https://img.shields.io/github/watchers/7ninjas/scss-mixins.svg?style=social\u0026label=Watch\u0026style=for-the-badge)](https://github.com/7ninjas/scss-mixins)\n\n\n## Quick start\n\nSeveral quick start options are available:\n\n- Clone the repo: `git clone https://github.com/7ninjas/scss-mixins.git`\n- Install with [npm](https://www.npmjs.com/): `npm install @7ninjas/scss-mixins`\n- Install with [yarn](https://yarnpkg.com/): `yarn add @7ninjas/scss-mixins`\n\n### Usage\nImport `all` file to your core `scss` file for importing all mixins from package\n\nExample:\n```scss\n@import '~@7ninjas/scss-mixins/all';\n```\n\n\n### Table of contents\n\n\u003cdetails open\u003e\n \u003csummary\u003eAnimations\u003c/summary\u003e\n \n- [Full documentation](./docs/animations.md)\n- [Mixin hardware](./docs/animations.md#mixin-hardware)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eBorder Radius\u003c/summary\u003e\n  \n- [Full documentation](./docs/border-radius.md)\n- [Mixin border-radius](./docs/border-radius.md#mixin-border-radius)\n- [Mixin border-top-radius](./docs/border-radius.md#mixin-border-top-radius)\n- [Mixin border-right-radius](./docs/border-radius.md#mixin-border-right-radius)\n- [Mixin border-bottom-radius](./docs/border-radius.md#mixin-border-bottom-radius)\n- [Mixin border-left-radius](./docs/border-radius.md#mixin-border-left-radius)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eBreakpoints\u003c/summary\u003e\n  \n- [Full documentation](./docs/breakpoints.md)\n- [Mixin media-breakpoint-up](./docs/breakpoints.md#mixin-media-breakpoint-up)\n- [Mixin media-breakpoint-down](./docs/breakpoints.md#mixin-media-breakpoint-down)\n- [Mixin media-breakpoint-between](./docs/breakpoints.md#mixin-media-breakpoint-between)\n- [Mixin media-breakpoint-only](./docs/breakpoints.md#mixin-media-breakpoint-only)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eButtons\u003c/summary\u003e\n  \n- [Full documentation](./docs/buttons.md)\n- [Mixin button-variant](./docs/buttons.md#mixin-button-variant)\n- [Mixin button-outline-variant](./docs/buttons.md#mixin-button-outline-variant)\n- [Mixin button-size](./docs/buttons.md#mixin-button-size)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eFlex\u003c/summary\u003e\n  \n- [Full documentation](./docs/flex.md)\n- [Mixin flex](./docs/flex.md#mixin-flex)\n- [Mixin inline-flex](./docs/flex.md#mixin-inline-flex)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eFonts\u003c/summary\u003e\n  \n- [Full documentation](./docs/fonts.md)\n- [Mixin font-face](./docs/fonts.md#mixin-font-face)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eForms\u003c/summary\u003e\n  \n- [Full documentation](./docs/forms.md)\n- [Mixin placeholder](./docs/forms.md#mixin-placeholder)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eGradients\u003c/summary\u003e\n  \n- [Full documentation](./docs/gradients.md)\n- [Mixin gradient-bg](./docs/gradients.md#mixin-gradient-bg)\n- [Mixin gradient-x](./docs/gradients.md#mixin-gradient-x)\n- [Mixin gradient-y](./docs/gradients.md#mixin-gradient-y)\n- [Mixin gradient-directional](./docs/gradients.md#mixin-gradient-directional)\n- [Mixin gradient-x-three-colors](./docs/gradients.md#mixin-gradient-x-three-colors)\n- [Mixin gradient-y-three-colors](./docs/gradients.md#mixin-gradient-y-three-colors)\n- [Mixin gradient-radial](./docs/gradients.md#mixin-gradient-radial)\n- [Mixin gradient-striped](./docs/gradients.md#mixin-gradient-striped)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eGrid\u003c/summary\u003e\n  \n- [Full documentation](./docs/grid.md)\n- [Mixin center](./docs/grid.md#mixin-center)\n- [Mixin container](./docs/grid.md#mixin-container)\n- [Mixin col](./docs/grid.md#mixin-col)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eHover\u003c/summary\u003e\n  \n- [Full documentation](./docs/hover.md)\n- [Mixin hover](./docs/hover.md#mixin-hover)\n- [Mixin hover-focus](./docs/hover.md#mixin-hover-focus)\n- [Mixin plain-hover-focus](./docs/hover.md#mixin-plain-hover-focus)\n- [Mixin hover-focus-active](./docs/hover.md#mixin-hover-focus-active)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eIcons\u003c/summary\u003e\n  \n- [Full documentation](./docs/icons.md)\n- [Mixin svg-icon](./docs/icons.md#mixin-svg-icon)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eImages\u003c/summary\u003e\n\n- [Full documentation](./docs/images.md)\n- [Mixin img-fluid](./docs/images.md#mixin-img-fluid)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eLists\u003c/summary\u003e\n\n- [Full documentation](./docs/lists.md)\n- [Mixin list-unstyled](./docs/lists.md#mixin-list-unstyled)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003ePositioning\u003c/summary\u003e\n\n- [Full documentation](./docs/positioning.md)\n- [Mixin size](./docs/positioning.md#mixin-size)\n- [Mixin clearfix](./docs/positioning.md#mixin-clearfix)\n- [Mixin z-index](./docs/positioning.md#mixin-z-index)\n- [Mixin pseudo](./docs/positioning.md#mixin-pseudo)\n- [Mixin absolute](./docs/positioning.md#mixin-absolute)\n- [Mixin fixed](./docs/positioning.md#mixin-fixed)\n- [Mixin relative](./docs/positioning.md#mixin-relative)\n- [Mixin sticky](./docs/positioning.md#mixin-sticky)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eResponsive\u003c/summary\u003e\n\n- [Full documentation](./docs/responsive.md)\n- [Mixin responsive-prop](./docs/responsive.md#mixin-responsive-prop)\n- [Mixin responsive-embed](./docs/responsive.md#mixin-responsive-embed)\n- [Mixin responsive-col](./docs/responsive.md#mixin-responsive-col)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eShapes\u003c/summary\u003e\n  \n- [Full documentation](./docs/shapes.md)\n- [Mixin triangle](./docs/shapes.md#mixin-triangle)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eSpacing\u003c/summary\u003e\n\n- [Full documentation](./docs/spacing.md)\n- [Mixin ml](./docs/spacing.md#mixin-ml)\n- [Mixin mt](./docs/spacing.md#mixin-mt)\n- [Mixin mr](./docs/spacing.md#mixin-mr)\n- [Mixin mb](./docs/spacing.md#mixin-mb)\n- [Mixin mx](./docs/spacing.md#mixin-mx)\n- [Mixin my](./docs/spacing.md#mixin-my)\n- [Mixin m](./docs/spacing.md#mixin-m)\n- [Mixin pl](./docs/spacing.md#mixin-pl)\n- [Mixin pt](./docs/spacing.md#mixin-pt)\n- [Mixin pr](./docs/spacing.md#mixin-pr)\n- [Mixin pb](./docs/spacing.md#mixin-pb)\n- [Mixin px](./docs/spacing.md#mixin-px)\n- [Mixin py](./docs/spacing.md#mixin-py)\n- [Mixin p](./docs/spacing.md#mixin-p)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eTables\u003c/summary\u003e\n\n- [Full documentation](./docs/tables.md)\n- [Mixin table](./docs/tables.md#mixin-table)\n- [Mixin table-bordered](./docs/tables.md#mixin-table-bordered)\n- [Mixin table-responsible](./docs/tables.md#mixin-table-responsible)\n- [Mixin table-striped](./docs/tables.md#mixin-table-striped)\n- [Mixin table-hover](./docs/tables.md#mixin-table-hover)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eTypography\u003c/summary\u003e\n\n- [Full documentation](./docs/typography.md)\n- [Mixin text-hide](./docs/typography.md#mixin-text-hide)\n- [Mixin text-truncate](./docs/typography.md#mixin-text-truncate)\n- [Mixin font](./docs/typography.md#mixin-font)\n\u003c/details\u003e\n\u003cdetails open\u003e\n  \u003csummary\u003eVariables\u003c/summary\u003e\n\n- [Full documentation](./docs/variables.md)\n\u003c/details\u003e\n\n\n## Bugs and feature requests\n\nFound bug? Or maybe you've got great idea for feature request? Please first search for existing and closed issues.\nIf your problem or idea is not addressed yet - don't hesitate to [open a new issue](https://github.com/7ninjas/scss-mixins/issues/new)!\n\n\n## Community\n\nGet updates on 7ninjas's development and chat with the project maintainers and community members.\n\n- Like [@7ninjas on Facebook](https://www.facebook.com/7ninjasHQ).\n- Follow [@7ninjas on Twitter](https://twitter.com/7ninjas).\n- Discover [@7ninjas Dribbble](https://dribbble.com/7ninjas)\n- Explore [@7ninjas Behance](https://www.behance.net/7ninjas).\n- Enjoy [@7ninjas Instagram](https://www.instagram.com/7ninjashq/).\n\n\n## Versioning\n\nTo see new features and changes for each released version checkout [the Releases section of our GitHub project](https://github.com/7ninjas/scss-mixins/releases) \n\n\n## License\n\nCode released under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7ninjas%2Fscss-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7ninjas%2Fscss-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7ninjas%2Fscss-mixins/lists"}