https://github.com/fylgja/fylgja-sass

Small SCSS helper function package
https://github.com/fylgja/fylgja-sass

contrast contrast-ratio datauri-svg fylgja sass scss scss-functions str-replace

Last synced: 12 months ago
JSON representation

Small SCSS helper function package

• Host: GitHub
• URL: https://github.com/fylgja/fylgja-sass
• Owner: fylgja
• License: mit
• Created: 2021-02-13T20:32:08.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-11-19T07:17:18.000Z (over 1 year ago)
• Last Synced: 2024-11-19T08:24:30.341Z (over 1 year ago)
• Topics: contrast, contrast-ratio, datauri-svg, fylgja, sass, scss, scss-functions, str-replace
• Language: SCSS
• Homepage: https://fylgja.dev
• Size: 126 KB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Fylgja - Sass Extend

[![NPM version](https://img.shields.io/npm/v/@fylgja/sass.svg?style=flat-square)](https://www.npmjs.org/package/@fylgja/sass)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fylgja/fylgja-sass/test.yml?branch=main&color=%2343a047&style=flat-square)](https://github.com/fylgja/fylgja-sass/actions/workflows/test.yml)

[![License](https://img.shields.io/github/license/fylgja/sass?color=%23234&style=flat-square)](/LICENSE)

Add more super powers to your Sass project.

This repo will add more functions and adds options not found in the core sass project.

## Installation

```bash

npm install @fylgja/sass

```

## How to use

Since this is a Sass function library it require only usages where it is needed.

So if you need to string replace something.

Then include the specific sass typed function via;

```scss

@use "@fylgja/sass/string" as str;

.str-replace {

    content: str.replace("Hello World", "World", "🌍");

}

```

We advice to use the library with a prefixed `@use`.

Similar to an `@use "sass:string"`.

This package offers the following functions.

| Function Name  | Type   | Description                                       |

| -------------- | ------ | ------------------------------------------------- |

| luminance      | color  | Calculate the luminance for a color               |

| contrast-ratio | color  | Calculate the contrast ratio between two colors   |

| contrast       | color  | Sets an dark or light color based on the contrast |

| gray           | color  | Get a specific gray based an a given precentage   |

| nth-side       | list   | Extract value based on shorthand sizing property  |

| negative       | map    | Converters a map with units to a negative units   |

| strip-unit     | math   | Removes the unit (e.g. px, em, rem) from a value  |

| replace        | string | Replace part of a string with new value           |

| url-encode     | string | Encode Unsafe urls to safe urls                   |

| svg-url        | string | Use SVG anywhere as dataUri (inline background)   |