# sb-scss

> Set of SCSS functions and mixins, that you can simply use in your own SCSS code.

Latest version **0.1.0** (published 2021-11-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install sb-scss
pnpm add sb-scss
yarn add sb-scss
bun add sb-scss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-11-01 |
| First published | 2020-12-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ladislav Soukup |
| Maintainers | soukupl |
| Keywords | scss, scss mixin, scss function |

## Links

- npm: https://www.npmjs.com/package/sb-scss
- Repository: https://github.com/soukupl/sb-scss
- Issues: https://github.com/soukupl/sb-scss/issues
- npm.io page: https://npm.io/package/sb-scss

## Recent versions

- 0.1.0 (latest) — 2021-11-01
- 0.0.6 — 2021-02-20
- 0.0.5 — 2021-02-20
- 0.0.4 — 2020-12-28
- 0.0.3 — 2020-12-28
- 0.0.2 — 2020-12-28
- 0.0.1 — 2020-12-28

## README

# SCSS function and mixin library

![](https://nodei.co/npm/sb-scss.png?downloads=true&downloadRank=true&stars=true)

This is set of SCSS functions and mixins, that you can simply use in your own SCSS code.

> NOTE: This is work in progress, not all mixins are documented and may not work. At this point, use at your own risk!

## Install

1. `npm install sb-scss --save-dev`
2. In your SCSS file, just import `@import "sb-scss";`

---

## Contrast color

`choose-contrast-color($color)`

This function will calculate contrast color to passed color. Useful to automaticaly switch text color from black to white depending on the background color.

This will always return 'black' or 'white'.

```scss
.should-be-white {
  color: choose-contrast-color(#111111);
}
```

<p align="center">⬇️</p>

```css
.should-be-white {
  color: white;
}
```

## Block with parallax background effect

`parallax($image, $height)`

```scss
.block-with-parallax {
  @include parallax("image.jpg", 100vh);
}
```

## Typewritter FX

```scss
.title {
  @include typewriter(#f00, 300px, 50);
}
```

---
_Source: https://npm.io/package/sb-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._