{"id":16720183,"url":"https://github.com/hsynlms/sass-greedy","last_synced_at":"2025-08-11T14:41:53.491Z","repository":{"id":84878267,"uuid":"194304221","full_name":"hsynlms/sass-greedy","owner":"hsynlms","description":"a flexible, lightweight and simple grid generator for sass","archived":false,"fork":false,"pushed_at":"2021-06-08T17:16:15.000Z","size":158,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-27T23:51:04.495Z","etag":null,"topics":["flex-grid","flexbox-grid","grid","sass"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/hsynlms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-06-28T16:34:15.000Z","updated_at":"2024-04-24T05:29:50.000Z","dependencies_parsed_at":"2023-03-02T21:45:14.994Z","dependency_job_id":null,"html_url":"https://github.com/hsynlms/sass-greedy","commit_stats":{"total_commits":44,"total_committers":1,"mean_commits":44.0,"dds":0.0,"last_synced_commit":"ad44306798e1f306ff778910695d8d4b166fb5a2"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Fsass-greedy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Fsass-greedy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Fsass-greedy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Fsass-greedy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsynlms","download_url":"https://codeload.github.com/hsynlms/sass-greedy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248863573,"owners_count":21174030,"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":["flex-grid","flexbox-grid","grid","sass"],"created_at":"2024-10-12T22:06:07.493Z","updated_at":"2025-04-14T10:35:42.455Z","avatar_url":"https://github.com/hsynlms.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is sass-greedy?\n\u003e **sass-greedy** is a flexible, lightweight and simple grid generator for Sass.\n\n[![Downloads](https://img.shields.io/npm/dm/sass-greedy.svg)](https://npmjs.com/sass-greedy)\n[![install size](https://packagephobia.com/badge?p=sass-greedy)](https://packagephobia.com/result?p=sass-greedy)\n\nBasically, it generates row and column styles and supports breakpoints for responsiveness and multiple grid generation. There are three mixin injections to give you more flexibility while building your own grid.\n\nsass-greedy uses [include-media](https://github.com/eduardoboucas/include-media) to give the support of breakpoints for your responsive grid system.\n\n# What is mixin injection?\nMixin injection allows you to put custom grid styles in a simple way to have `more control/flexibility` on the grid system. You have access to reach `greedy options` to be used if it's necessary for all mixin injections.\n\nGreedy options are the combination of greedy defaults and the grid options provided when sass-greedy invoked.\n\n\u003e Greedy defaults can be overridden in the grid options.\n\n**1. sass-greedy defaults**\n\n| Property Name          | Type           | Default    | Description\n| :--------------------- | :------------- | :--------- | :----------\n| row-class              | string/boolean | `'row'`    | Class name of the row element of the grid. If its `false`, row element CSS style will not be rendered.\n| column-class           | string/boolean | `'column'` | Class name of the column element of the grid. If its `false`, column element CSS style will not be rendered.\n| numbered-column-class  | string         | `'slice'`  | Class name of the numbered column element of the grid. If its empty, `column-class` will be used instead.\n| grid-wrapper-class     | string/boolean | `false`    | Class name of the wrapper element of the grid system. If its `false`, grid row and columns will not be children of the grid wrapper class anymore.\n| injections             | boolean        | `true`     | Enable/disable mixin injections.\n\n**2. grid options**\n```scss\n@include greedy((\n  'columns': 14,        // number of the grid columns\n  'gutter': 1.6rem,     // grid columns gutter size\n  'sizes': (            // grid sizes (output e.g.: .slice-xs-1, slice-xl-2 etc.). supports breakpoints\n    '',                 // mandatory. empty string size also here to generate columns if no breakpoint / responsive design needed\n    ('name': 'xs', 'breakpoint': '\u003csm'),\n    ('name': 'sm', 'breakpoint': '\u003e=sm'),\n    ('name': 'md', 'breakpoint': '\u003e=md'),\n    ('name': 'lg', 'breakpoint': '\u003e=lg'),\n    ('name': 'xl', 'breakpoint': '\u003e=xl')\n  )\n));\n```\n\nLet's dive deep.\n\n# Mixin injections\n\n### Custom row mixin injection\nsass-greedy runs `custom row mixin injection` which is defined externally before generating grid column styles.\n\nLet’s assume that you wish to have **no-gutters** CSS style for row element of the grid system to remove spacings. Here is an example to do it in sass-greedy:\n\n```scss\n@mixin greedy-custom-row-mixins() {\n  // no-gutters for row element\n  .no-gutters {\n    margin-left: 0;\n    margin-right: 0;\n  \n    \u0026\u003e .#{greedy-options('column-class')} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n  }\n}\n\n// output example\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: -0.8rem;\n  margin-right: -0.8rem;\n}\n\n.no-gutters {\n  margin-left: 0;\n  margin-right: 0;\n}\n.no-gutters \u003e .column {\n  padding-left: 0;\n  padding-right: 0;\n}\n```\n\n### Custom size mixin injection\nsass-greedy runs `custom size mixin injection` which is defined externally `while looping column sizes`.\n\nLet’s assume that you wish to have **flex-row-reverse** CSS style to have the flexibility to change the row flex direction in any provided breakpoint size. Here is an example to do it in sass-greedy:\n\n```scss\n@mixin greedy-custom-size-mixins($size, $breakpoint) {\n  $flex-name: 'flex';\n  \n  @if $size and $size != '' {\n    $flex-name: '#{$flex-name}-#{$size}';\n  }\n\n  // e.g.: flex-row-reverse\n  .#{$flex-name}-row-reverse {\n    flex-direction: row-reverse;\n  }\n}\n\n// output example\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n// for the size of sm which is provided in options\n@media (min-width: 576px) {\n  .flex-sm-row-reverse {\n    flex-direction: row-reverse;\n  }\n}\n\n// for the size of xl which is provided in options\n@media (min-width: 1200px) {\n  .flex-xl-row-reverse {\n    flex-direction: row-reverse;\n  }\n}\n```\n\n### Custom column mixin injection\nsass-greedy runs `custom column mixin injection` which is defined externally `while generating each numbered column styles in all provided sizes`.\n\nLet’s assume that you wish to have **order** CSS style to have the flexibility to change the order of the flex grid columns in any provided breakpoint size. Here is an example to do it in sass-greedy:\n\n```scss\n@mixin greedy-custom-column-mixins($size, $iteration) {\n  $order-name: 'order';\n  \n  @if $size and $size != '' {\n    $order-name: '#{$order-name}-#{$size}';\n  }\n  \n  // e.g.: order-3\n  .#{$order-name}-#{$iteration} {\n    order: #{$iteration};\n  }\n}\n\n// output example\n.order-1 {\n  order: 1;\n}\n\n.order-2 {\n  order: 2;\n}\n\n.order-3 {\n  order: 1;\n}\n\n// for the size of md which is provided in options\n@media (min-width: 768px) {\n  .order-md-2 {\n    order: 2;\n  }\n  \n  .order-md-3 {\n    order: 3;\n  }\n}\n\n// for the size of xl which is provided in options\n@media (min-width: 1200px) {\n  .order-xl-3 {\n    order: 3;\n  }\n  \n  .order-xl-4 {\n    order: 4;\n  }\n}\n```\n\n# Roadmap\n\n1. ~~Multiple breakpoint query support.~~\n2. Spesific mixin injection enabling/disabling feature.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsynlms%2Fsass-greedy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsynlms%2Fsass-greedy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsynlms%2Fsass-greedy/lists"}