{"id":15041325,"url":"https://github.com/methodgrab/sass-kit","last_synced_at":"2026-01-19T22:02:05.943Z","repository":{"id":11300621,"uuid":"69128556","full_name":"MethodGrab/sass-kit","owner":"MethodGrab","description":"A collection of Sass functions \u0026 mixins","archived":false,"fork":false,"pushed_at":"2023-01-11T05:32:06.000Z","size":1437,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T17:47:26.262Z","etag":null,"topics":["sass","sass-functions","sass-library","sass-mixins"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MethodGrab.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":"2016-09-24T21:26:42.000Z","updated_at":"2022-09-08T23:55:50.000Z","dependencies_parsed_at":"2023-01-13T16:26:31.834Z","dependency_job_id":null,"html_url":"https://github.com/MethodGrab/sass-kit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MethodGrab%2Fsass-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MethodGrab%2Fsass-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MethodGrab%2Fsass-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MethodGrab%2Fsass-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MethodGrab","download_url":"https://codeload.github.com/MethodGrab/sass-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478286,"owners_count":20945265,"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":["sass","sass-functions","sass-library","sass-mixins"],"created_at":"2024-09-24T20:45:57.731Z","updated_at":"2025-04-06T11:49:40.341Z","avatar_url":"https://github.com/MethodGrab.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sass Kit [![Build Status](https://travis-ci.org/MethodGrab/sass-kit.svg?branch=master)](https://travis-ci.org/MethodGrab/sass-kit) [![npm](https://img.shields.io/npm/v/sass-kit.svg)](https://www.npmjs.com/package/sass-kit)\n\u003e A collection of Sass functions \u0026 mixins.\n\n\n## Install\n```bash\nnpm install --save sass-kit\n```\n\n## Usage\nAs these are functions and mixins they can all be imported and will only impact the size of the compiled CSS if used:\n```scss\n@import 'node_modules/sass-kit/index';\n\nh1 { font-size: em( 24px ); }\n```\n\nOptionally, the utility CSS classes can be imported as well.  \nThis **will** add to the size of the compiled CSS regardless of if they are used:\n```scss\n@import 'node_modules/sass-kit/index';\n@import 'node_modules/sass-kit/util-classes';\n```\n\n```html\n\u003cdiv class=\"u-cf\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"u-visually-hidden\"\u003e...\u003c/div\u003e\n```\n\n\n## API\nSee the source and tests for examples.\n\n### Functions\n\n#### `strReplace( $source: string, $find: string, $replace: string )` → string\nString replacement\n\n#### `stripUnits( $val: value )` → number\nRemove units from a value\n\n#### `lowerBound( $range: array )` → number\nGet the lower bound of an array\n\n#### `upperBound( $range: array )` → number\nGet the upper bound of an array\n\n#### `em( $px: value, $base: ?value )` → value\nConvert a pixel value to ems\n\n#### `rem( $px: value, $base: ?value )` → value\nConvert a pixel value to rems\n\n#### `image( $file: string, $raw: ?bool )` → url|string\nGenerate an image asset URL based on `$asset-base-path`\n\n#### `font( $file: string, $raw: ?bool )` → url|string\nGenerate an font asset URL based on `$asset-base-path`\n\n#### `color( $color: string, $tone: ?string )` → color\nGet a value from the color palette\n\n#### `ls( $val: number )` → value\nConvert Photoshop \"tracking\" to CSS letter spacing\n\n#### `nestedBorderRadius( $outer-size: value, $padding: value )` → value\nCalculate correct nested border radii sizes\n\n\n### Mixins\n\n#### `rem( $property, $values )`\nOutput dimensions as `rem` with `px` fallbacks\n\n#### `inline-block( $alignment: ?value )`\nCross browser inline block\n\n#### `opacity( $opacity: number )`\nCross browser opacity\n\n#### `ir`\nImage replacement #1\n\n#### `font-crush`\nImage replacement #2\n\n#### `cf`\nClearfix\n\n#### `hidden`\nHide from both screenreaders and browsers\n\n#### `visually-hidden( $focusable: ?bool )`\nHide only visually, but have it available for screenreaders\n\n#### `invisible`\nHide visually and from screenreaders, but maintain layout\n\n#### `text-ellipsis`\nText overflow ellipsis\n\n#### `hyphenate`\nHyphenate long words\n\n#### `momentum-scroll`\niOS smooth momentum scrolling\n\n#### `font-smoothing( $value: ?string )`\nText antialiasing\n\n#### `antialiased`\nAdjust font rendering of light text on dark backgrounds in Chrome on macOS\n\n#### `no-click`\nPrevent an element from being clickable and allow the click to pass through to the element below\n\n#### `cover`\nCover an element\n\n#### `alpha-attribute( $attribute, $color, $background )`\nGenerates a fallback for alpha colors based on the background \u0026 foreground colors\n\n#### `font-face( $name: string, $path: string, $weight: ?value, $style: ?value: $exts: ?list )`\nGenerate all the necessary font-face properties\n\n#### `vertical-center-legacy( $content-el: string )`\nVertical centering for legacy browsers\n\n#### `vertical-center( $includeWidth: ?bool )`\nEasy vertical centering of anything in IE9+\n\n#### `center( $includeWidth: ?bool )`\nEasy horizontal \u0026 vertical centering of anything in IE9+\n\n#### `center-block`\nCenter block level content\n\n#### `responsive-background-image( $width: value, $height: value, $url: ?value, $size: ?value )`\nResponsive background images that maintain their aspect ratio\n\n#### `media-object( $spacing: ?bool )`\nMedia object pattern\n\n#### `fluid-embed`\nMakes media embeds maintain a fixed aspect ratio but adapt to the width of their parent container\n\n\n## Responsive\nResponsive / media query helpers.\n\n### Usage\n\n#### Basic\nAn `em` Sass function is required to convert `px` values to `ems`. You can provide one or import the included `functions/em` file as well:\n\n```scss\n@import 'node_modules/sass-kit/functions/em';\n@import 'node_modules/sass-kit/mixins/responsive';\n\np {\n\tcolor: black;\n\n\t@include below( 320px ) {\n\t\tcolor: red;\n\t}\n\n\t@include between( 480px, 500px ) {\n\t\tcolor: cyan;\n\t}\n\n\t@include above( 720px ) {\n\t\tcolor: orange;\n\t}\n\n\t@include landscape() {\n\t\tcolor: green;\n\t}\n\n\t@include portrait() {\n\t\tcolor: blue;\n\t}\n}\n```\n\n\n#### Without conversion\nDon't convert the media queries to ems:\n\n```scss\n@import 'node_modules/sass-kit/mixins/responsive';\n\np {\n\tcolor: black;\n\n\t@include below( 320px, $convert: false ) {\n\t\tcolor: red;\n\t}\n\n\t@include between( 480px, 500px, $convert: false ) {\n\t\tcolor: cyan;\n\t}\n\n\t@include above( 720px, $convert: false ) {\n\t\tcolor: blue;\n\t}\n}\n```\n\n\n#### Dimensions other than width\n```scss\n@import 'node_modules/sass-kit/functions/em';\n@import 'node_modules/sass-kit/mixins/responsive';\n\np {\n\t@include above( 720px, height ) {\n\t\tcolor: cyan;\n\t}\n}\n```\n\n\n#### Keywords\nYou can also use predefined keywords, to do so create a map called `$breakpoints`:\n\n```scss\n@import 'node_modules/sass-kit/functions/em';\n@import 'node_modules/sass-kit/mixins/responsive';\n\n// these are the predefined keywords which you can overwrite\n$breakpoints: (\n\tsmall  : 320px,\n\tmedium : 640px,\n\tlarge  : 1024px,\n\txlarge : 1440px,\n\txxlarge: 1920px,\n);\n\np {\n\t@include above( medium ) {\n\t\tcolor: cyan;\n\t}\n}\n```\n\n\n### API\nThe following mixins are available:\n\n\n#### `break( $type: string, $from: value, $to: ?value, $dimension: ?string, $convert: bool )`\nThe base mixin.\n\n**$type**  \nBreakpoint type, one of `'above'`, `'below'`, `'between'`.\n\n**$from**  \nBreakpoint start.\n\n**$to**  \nDefault: `false`  \nBreakpoint end, only required for `$type: 'between'`.\n\n**$dimension**  \nDefault: `'width'`  \nBreakpoint dimension, one of `'width'`, `'height'`.\n\n**$convert**  \nDefault: `true`  \nConvert px based `$from` \u0026 `$to` values to `ems`.\n\n\n#### `below( $size: value, $dimension: ?string, $convert: ?bool )`\nInclude styles **below** `$size`.\n\n\n#### `above( $size: value, $dimension: ?string, $convert: ?bool )`\nInclude styles **above** `$size`.\n\n\n#### `between( $from: value, $to: value, $dimension: ?string, $convert: ?bool )`\nInclude styles **between** `$from` \u0026 `$to`.\n\n\n#### `landscape()`\nInclude styles in landscape orientation.\n\n\n#### `portrait()`\nInclude styles in portrait orientation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmethodgrab%2Fsass-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmethodgrab%2Fsass-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmethodgrab%2Fsass-kit/lists"}