# (S)CSS Utilities

[![npm](https://img.shields.io/npm/v/iamnewton-scss-utils?color=red)](https://www.npmjs.com/package/iamnewton-scss-utils) [![Build Status](https://github.com/iamnewton/scss-utils/workflows/CI/badge.svg)](https://github.com/iamnewton/scss-utils/actions?workflow=CI) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=iamnewton/scss-utils)](https://dependabot.com)


A series of SCSS utilities.  These are things that I've collected and created over the years and either modified or used outright.

<details>
  <summary><strong>Table of Contents</strong> (click to expand)</summary>

- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [Changelog](#changelog)
- [How to Contribute](#how-to-contribute)
- [How We Version](#how-we-version)
- [Resources](#resources)
- [Credits](#credits)

</details>

## Installation

```shell
$ npm install --save-dev iamnewton-scss-utils
```

## Usage

```scss
@import "iamnewton-scss-utils/src/index";

/// call functions
@include shade(red, 25%);
```

## Documentation

The best way to find out what's available is to check out the [documentation site](https://iamnewton.github.io/scss-utils/), but if you like digging through source code, then each directory has a README file to describe each function or mixin.

## Changelog

This project uses a [CHANGELOG](./CHANGELOG.md), which contains a curated, chronologically ordered list of notable changes for each version of a project. [Read more about changelogs](https://keepachangelog.com/en/1.0.0/).

## How to Contribute

Looking to help out?  There are numerous ways to support this project and they are all detailed within our [CONTRIBUTING](./.github/CONTRIBUTING.md) doc.

## How We Version

We use [SemVer](http://semver.org/) for our versioning providing us an opt-in approach to releases. This means we add a version number according to the spec, as you see below. So rather than force developers to consume the latest and greatest, they can choose which version to consume and test any newer ones before upgrading. Please the read the spec as it goes into further detail.

Given a version number **MAJOR.MINOR.PATCH**, increment the:

* **MAJOR** version when you make incompatible API changes.
* **MINOR** version when you add functionality in a backward-compatible manner.
* **PATCH** version when you make backward-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the **MAJOR.MINOR.PATCH** format.

## Resources

- [SassDoc](http://sassdoc.com) - A Godsend for creating documentation sites.
- [True](https://www.oddbird.net/true/) - Another great project for unit testing (S)CSS functions & mixins.
- [Stylelint](https://stylelint.io) - What ESLint is for Javascript (ECMAScript), Stylelint is for (S)CSS.
- [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) - A community guideline on how we commit our code.
- [Semantic Versioning](https://semver.org) - A community guideline on how we version our code.
- [Keep a Change Log](https://keepachangelog.com/en/1.0.0/) - A community guideline on how we keep our changelog.

## Credits

- @gianablantin (A11Y color functions)
- @terkel (Math constants/functions and number functions)
- Daniel Perez Alvarez (Sin/Rad functions)
- @mdo (breakpoint function and various mixins)
- @HugoGiraudel (various miscellaneous functions)
- @adamgiese (valid-quantity function and nth-child mixins)
- @davidkpiano (str-replace-batch function)
- @necolas (clearfix mixin)