{"id":13706715,"url":"https://github.com/lunelson/sass-calc","last_synced_at":"2025-04-14T20:32:39.498Z","repository":{"id":143758881,"uuid":"69240232","full_name":"lunelson/sass-calc","owner":"lunelson","description":"Make Sass math more flexible and powerful with CSS calc()","archived":false,"fork":false,"pushed_at":"2021-12-23T14:02:24.000Z","size":360,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T08:51:12.319Z","etag":null,"topics":["calc","css","sass"],"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/lunelson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2016-09-26T10:43:00.000Z","updated_at":"2024-08-16T15:39:34.000Z","dependencies_parsed_at":"2023-07-14T16:45:48.775Z","dependency_job_id":null,"html_url":"https://github.com/lunelson/sass-calc","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/lunelson%2Fsass-calc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunelson%2Fsass-calc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunelson%2Fsass-calc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunelson%2Fsass-calc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lunelson","download_url":"https://codeload.github.com/lunelson/sass-calc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248955956,"owners_count":21189269,"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":["calc","css","sass"],"created_at":"2024-08-02T22:01:06.314Z","updated_at":"2025-04-14T20:32:39.475Z","avatar_url":"https://github.com/lunelson.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Sass Calc\n\n[![](https://img.shields.io/travis/lunelson/sass-calc.svg?style=flat-square)](https://travis-ci.org/lunelson/sass-calc)\n[![](https://img.shields.io/npm/v/@lunelson/sass-calc.svg?style=flat-square)](https://www.npmjs.com/package/@lunelson/sass-calc)\n[![](https://img.shields.io/github/license/lunelson/sass-calc.svg?style=flat-square)](https://github.com/lunelson/sass-calc/blob/master/LICENSE)\n\nEasily build complex `calc()` expressions in Sass. Leverage `calc()` to do math that Sass can't.\n\n!['sass calc'](sass-calc.png)\n\nUse `add()`, `subtract()`, `multiply()` and `divide()` on values which have incompatible or unknown units, or which are `var()` expressions, or which are `calc()` expressions themselves. Return a new `calc()` expression, or use straight math where possible.\n\n```sh\n# in your project\nnpm install --save @lunelson/sass-calc\n```\n```scss\n// in your sass file, assuming you have 'node_modules' in Sass' search path\n@import '@lunelson/sass-calc/index';\n```\n```scss\n// test.scss\n:root {\n  --foo: 20px;\n}\n$expr: calc(100vw - 50%);\n.test {\n  test: subtract(1.5em, 1em);\n  test: add(1.5em, 1rem);\n  test: add(multiply($expr, 2), 10px);\n  test: add(multiply(var(--foo), 2), 10px);\n  test: divide(subtract(1.5em, 1em), 2);\n  test: subtract(divide(subtract(1.5em, 1em), 2), add(1em, 1ex));\n}\n```\n```css\n/* test.css */\n:root {\n  --foo: 20px;\n}\n\n.test {\n  test: 0.5em;\n  test: calc(1.5em + 1rem);\n  test: calc(((100vw - 50%) * 2) + 10px);\n  test: calc((var(--foo) * 2) + 10px);\n  test: 0.25em;\n  test: calc(0.25em - (1em + 1ex));\n}\n```\n\nRefs:\n\n- https://www.sitepoint.com/sass-basics-operators/\n- https://www.sitepoint.com/understanding-sass-units/\n- http://caniuse.com/#feat=calc\n\nQuestions? [Twitter me.](https://twitter.com/lunelson)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunelson%2Fsass-calc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flunelson%2Fsass-calc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunelson%2Fsass-calc/lists"}