{"id":32255467,"url":"https://github.com/mintuz/sass-looper","last_synced_at":"2026-02-23T10:06:28.380Z","repository":{"id":58245463,"uuid":"42105750","full_name":"mintuz/sass-looper","owner":"mintuz","description":"Sass mixin to loop through some key value pairs and output some utility classes.","archived":false,"fork":false,"pushed_at":"2015-09-08T16:57:40.000Z","size":135,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-24T12:54:28.464Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/mintuz.png","metadata":{"files":{"readme":"README.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}},"created_at":"2015-09-08T10:28:08.000Z","updated_at":"2023-03-04T06:14:28.000Z","dependencies_parsed_at":"2022-08-30T22:52:29.864Z","dependency_job_id":null,"html_url":"https://github.com/mintuz/sass-looper","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mintuz/sass-looper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintuz%2Fsass-looper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintuz%2Fsass-looper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintuz%2Fsass-looper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintuz%2Fsass-looper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mintuz","download_url":"https://codeload.github.com/mintuz/sass-looper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintuz%2Fsass-looper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29741144,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-10-22T18:45:43.569Z","updated_at":"2026-02-23T10:06:28.375Z","avatar_url":"https://github.com/mintuz.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a small mixin to output utility classes per breakpoint.\n\nInstead of defining CSS classes with the same properties in each class, why not create utility classes that have these properties defined once. The idea comes from http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#utility-namespaces-u-\n\n## Install\n`bower install sass-looper --save`\n\n## Dependencies\n\nThis library depends on Guardians sass-mq which you can read more about here http://sass-mq.github.io/sass-mq/\n\n## Usage\n\n### Define a scss map with your settings\n\n##### Syntax\n\n```\n$map: ('breakpoint-name': (\n  'utility-name': (\n    'property-name': $property-value\n  )\n),\n'breakpoint-name': (\n  'utility-name': (\n    'property-name': $property-value\n  )\n));\n```\n\n##### Example\n\n```\n$map: ('small': (\n  'margin-bottom': (\n    'margin-bottom': 8px\n  )\n),\n'medium': (\n  'margin-bottom': (\n    'margin-bottom': 16px\n  )\n));\n```\n\nYou might be thinking, why are you specifying margin-bottom twice for each breakpoint. Well the idea is that you can name your utilites whatever you want. I like having my classes named `.u-margin-bottom` but you can name them whatever you like.\n\nFor example\n\n```\n$map:('small': (\n  'taylor-swift': (\n    'margin-bottom': 8px\n  )\n),\n'medium': (\n  'taylor-swift': (\n    'margin-bottom': 16px\n  )\n));\n```\n\nWould output\n\n```\n.u-taylor-swift {\n  margin-bottom: 8px;\n}\n```\n\n### Calling the library\n\n```\n$mq-breakpoints: (\n  small:  320px,\n  medium:  740px\n);\n\n$map:('small': (\n  'taylor-swift': (\n    'margin-bottom': 8px\n  )\n),\n'medium': (\n  'taylor-swift': (\n    'margin-bottom': 16px\n  )\n));\n\n@import 'bower_components/sass-mq/mq';\n@import 'bower_components/sass-looper/sass-looper';\n\n@include sass-looper('my-namespace-', $map);\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmintuz%2Fsass-looper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmintuz%2Fsass-looper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmintuz%2Fsass-looper/lists"}