sassy-inline-gradients

Sass extension to inline gradients as base64-encoded images.

Usage no npm install needed!

<script type="module">
  import sassyInlineGradients from 'https://cdn.skypack.dev/sassy-inline-gradients';
</script>

README

sassy-inline-gradients

Sass extension to inline gradients as base64-encoded images.

Installation

npm install sass sassy-inline-gradients --save-dev

+ const createInlineGradientsFunctions = require("sassy-inline-gradients");

const sassOptions = {
  functions: {
+    ...createInlineGradientsFunctions(),
  },
  indentWidth: 2,
};

Usage

Code examples:

.alfa {
  background: inline-linear-gradient(
    200px,
    45deg,
    red,
    green 100px,
    blue 150px,
    yellow 95%
  );
}

.bravo {
  background: inline-linear-gradient(
    200px,
    to top,
    red 10.5%,
    green 33.3%,
    blue
  );
}