{"id":19653012,"url":"https://github.com/csstools/postcss-number-functions","last_synced_at":"2025-04-28T17:31:10.929Z","repository":{"id":66028397,"uuid":"118688619","full_name":"csstools/postcss-number-functions","owner":"csstools","description":"Use Sass Number Functions in CSS","archived":false,"fork":false,"pushed_at":"2018-01-24T16:28:45.000Z","size":10,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T05:31:44.424Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-01-24T00:26:42.000Z","updated_at":"2023-04-02T05:44:48.000Z","dependencies_parsed_at":"2023-04-18T19:08:21.993Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-number-functions","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"254e0822f4b3c2ed4c488ed28325c9d1deb7b496"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-number-functions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-number-functions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-number-functions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-number-functions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-number-functions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222928614,"owners_count":17059363,"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-11-11T15:12:54.617Z","updated_at":"2024-11-11T15:12:55.803Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Number Functions [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Linux Build Status][cli-img]][cli-url]\n[![Windows Build Status][win-img]][win-url]\n[![Gitter Chat][git-img]][git-url]\n\n[PostCSS Number Functions] lets you use [Sass Number Functions] in CSS, which\ninclude `abs()`, `ceil()`, `floor()`, `max()`, `min()`, `percentage()`,\n`random()` and `round()`.\n\n```css\n.example {\n  width: floor(500px / 3);\n}\n\n/* becomes */\n\n.example {\n  width: 166px;\n}\n```\n\n## Features\n\n### abs\n\nThe `abs()` function returns a number with its absolute value, preserving\nits CSS unit.\n\n### ceil\n\nThe `ceil()` function returns a number rounded up to a whole number, preserving\nits CSS unit.\n\n### floor\n\nThe `floor()` function returns a number rounded down to a whole number,\npreserving its CSS unit.\n\n### max\n\nThe `max()` function returns the maximum value of several numbers separated by\ncommas, preserving its CSS unit.\n\n### min\n\nThe `min()` function returns the minimum value of several numbers separated by\ncommas, preserving its CSS unit.\n\n### percentage\n\nThe `percentage()` function returns the percentage from a number, transforming\nits CSS unit into `%`.\n\n### random\n\nThe `random()` function returns a random, unitless number between 0 and 1,\nincluding 0 but not including 1. If it is passed one number then it returns a\nrandom number between 0 and that number, including both numbers and preserving\nthe unit of the argument. If it is passed two arguments then it returns a\nrandom number between those numbers, including both numbers and preserving the\nunit of the later argument.\n\n### round\n\nThe `floor()` function returns a number rounded to the nearest whole number,\npreserving its CSS unit.\n\n## Usage\n\nAdd [PostCSS Number Functions] to your build tool:\n\n```bash\nnpm install postcss-number-functions --save-dev\n```\n\n#### Node\n\nUse [PostCSS Number Functions] to process your CSS:\n\n```js\nimport PostCSSNumberFunctions from 'postcss-number-functions';\n\nPostCSSNumberFunctions.process(YOUR_CSS);\n```\n\n#### PostCSS\n\nAdd [PostCSS] to your build tool:\n\n```bash\nnpm install postcss --save-dev\n```\n\nUse [PostCSS Number Functions] as a plugin:\n\n```js\nimport postcss from 'gulp-postcss';\nimport PostCSSNumberFunctions from 'postcss-number-functions';\n\npostcss([\n  PostCSSNumberFunctions()\n]).process(YOUR_CSS);\n```\n\n#### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```bash\nnpm install gulp-postcss --save-dev\n```\n\nUse [PostCSS Number Functions] in your Gulpfile:\n\n```js\nimport postcss from 'gulp-postcss';\nimport PostCSSNumberFunctions from 'postcss-number-functions';\n\ngulp.task('css', () =\u003e gulp.src('./src/*.css').pipe(\n  postcss([\n    PostCSSNumberFunctions()\n  ])\n).pipe(\n  gulp.dest('.')\n));\n```\n\n#### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```bash\nnpm install grunt-postcss --save-dev\n```\n\nUse [PostCSS Number Functions] in your Gruntfile:\n\n```js\nimport PostCSSNumberFunctions from 'postcss-number-functions';\n\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n  postcss: {\n    options: {\n      use: [\n       PostCSSNumberFunctions()\n      ]\n    },\n    dist: {\n      src: '*.css'\n    }\n  }\n});\n```\n\n[npm-url]: https://www.npmjs.com/package/postcss-number-functions\n[npm-img]: https://img.shields.io/npm/v/postcss-number-functions.svg\n[cli-url]: https://travis-ci.org/jonathantneal/postcss-number-functions\n[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-number-functions.svg\n[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-number-functions\n[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-number-functions.svg\n[git-url]: https://gitter.im/postcss/postcss\n[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg\n\n[PostCSS Number Functions]: https://github.com/jonathantneal/postcss-number-functions\n[PostCSS]: https://github.com/postcss/postcss\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[Sass Number Functions]: https://sass-lang.com/documentation/Sass/Script/Functions.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-number-functions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-number-functions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-number-functions/lists"}