{"id":13780678,"url":"https://github.com/KittyGiraudel/SassyGradients","last_synced_at":"2025-05-11T14:32:57.703Z","repository":{"id":24288140,"uuid":"27683060","full_name":"KittyGiraudel/SassyGradients","owner":"KittyGiraudel","description":"[UNMAINTAINED] Sass helpers to manipulate gradients.","archived":true,"fork":false,"pushed_at":"2021-03-06T09:33:38.000Z","size":79,"stargazers_count":24,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-17T15:48:59.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hugogiraudel.com/SassyGradients","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KittyGiraudel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-07T20:10:10.000Z","updated_at":"2023-01-28T10:15:05.000Z","dependencies_parsed_at":"2022-08-22T14:40:27.094Z","dependency_job_id":null,"html_url":"https://github.com/KittyGiraudel/SassyGradients","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KittyGiraudel%2FSassyGradients","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KittyGiraudel%2FSassyGradients/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KittyGiraudel%2FSassyGradients/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KittyGiraudel%2FSassyGradients/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KittyGiraudel","download_url":"https://codeload.github.com/KittyGiraudel/SassyGradients/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253580117,"owners_count":21930885,"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":[],"created_at":"2024-08-03T18:01:18.607Z","updated_at":"2025-05-11T14:32:57.412Z","avatar_url":"https://github.com/KittyGiraudel.png","language":"SCSS","funding_links":[],"categories":["Projects"],"sub_categories":[],"readme":"SassyGradients\n==============\n\nSass helpers to manipulate gradients.\n\n## Instantiate\n\nTo instantiate a new [Gradient](https://github.com/KittyGiraudel/SassyGradients/blob/master/TERMINOLOGY.md#gradient), use the exact same syntax as CSS with the `sg-gradient` function.\n\n```scss\n$gradient: sg-gradient(to bottom right, red 20%, yellow, green, blue 55%, red 55%, green);\n```\n\n## Display\n\n```scss\n.selector {\n  @include sg-display($gradient);\n}\n```\n\n```css\n.selector {\n  background: red;\n  background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);\n}\n```\n\nAs a default, the [fallback](https://github.com/KittyGiraudel/SassyGradients/blob/master/TERMINOLOGY.md#fallback) color is the first color of the [color-stop](https://github.com/KittyGiraudel/SassyGradients/blob/master/TERMINOLOGY.md#color-stop) chain. If you wish to use a custom [color](https://github.com/KittyGiraudel/SassyGradients/blob/master/TERMINOLOGY.md#color), you can pass it as a second parameter to the `sg-display` mixin:\n\n```scss\n.selector {\n  @include sg-display($gradient, $fallback: blue);\n}\n```\n\n```css\n.selector {\n  background: blue;\n  background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);\n}\n```\n\n## Enable vendor prefixes\n\nIf you want SassyGradients to display the `-webkit-` version of your gradients, create a global `sg-prefix` variable set to `true`.\n\n```scss\n$sg-prefix: true;\n\n.selector {\n  @include sg-display($gradient);\n}\n```\n\n```css\n.selector {\n  background: red;\n  background: -webkit-linear-gradient(top left, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);\n  background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);\n}\n```\n\n## Update direction\n\n```scss\n$new-gradient: sg-gradient(to bottom, sg-get($gradient, 'color-stops'));\n```\n\n## Update color-stops\n\n```scss\n// Adding a new color-stop\n$new-gradient: sg-gradient(sg-get($gradient, 'direction'), append(sg-get($gradient, 'authored-color-stops'), hotpink, comma)...);\n\n// Brand new color-stops\n$new-gradient: sg-gradient(sg-get($gradient, 'direction'), yellow, green, blue, purple, magenta);\n```\n\n## Create stripes\n\n```scss\n// New Gradient instance with updated `color-stops` and `length`\n// Note that `authored-color-stops` does not change whatsoever\n$stripes: sg-stripes($gradient);\n```\n\n## Debug\n\n```scss\n.debug {\n  @include sg-debug($gradient);\n}\n```\n\n```css\n@debug-gradient {\n  raw: ('fallback': red, 'direction': to bottom right, 'legacy-direction': top left, 'authored-color-stops': (red 20%, yellow, green, blue 55%, red 55%, green), 'color-stops': (red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%), 'colors': (red, yellow, green, blue, red, green), 'length': 6);\n  fallback: red;\n  direction: to bottom right;\n  legacy-direction: top left;\n  authored-color-stops: red 20%, yellow, green, blue 55%, red 55%, green;\n  color-stops: red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%;\n  colors: red, yellow, green, blue, red, green;\n  length: 6;\n}\n```\n\n## Access specific properties\n\n```scss\n$fallback: sg-get($gradient, 'fallback');\n// red\n\n$direction: sg-get($gradient, 'direction');\n// to bottom right\n\n$legacy-direction: sg-get($gradient, 'legacy-direction');\n// top left\n\n$colors: sg-get($gradient, 'colors');\n// red, yellow, green, blue, red, green\n\n$color-stops: sg-get($gradient, 'color-stops');\n// red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%\n\n$authored-color-stops: sg-get($gradient, 'authored-color-stops');\n// red 20%, yellow, green, blue 55%, red 55%, green\n\n$length: sg-get($gradient, 'length');\n// 6\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKittyGiraudel%2FSassyGradients","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKittyGiraudel%2FSassyGradients","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKittyGiraudel%2FSassyGradients/lists"}