1. postcss-sass-color-functions
PostCSS plugin to implement SASS color functions
postcss-sass-color-functions
Package: postcss-sass-color-functions
Created by: adam-h
Last modified: Fri, 24 Jun 2022 10:50:30 GMT
Version: 1.1.0
Downloads: 3,301
Repository: https://github.com/adam-h/postcss-sass-color-functions

Install

npm install postcss-sass-color-functions
yarn add postcss-sass-color-functions

PostCSS plugin to transform SASS/compass color functions to more compatible CSS.

Inspired, and modified from, postcss-color-function.

Installation

 $ npm install git://github.com/adam-h/postcss-sass-color-functions.git

Usage

 // dependencies
var fs = require("fs")
var postcss = require("postcss")
var sassColorFunctions = require("postcss-sass-color-functions")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css
var output = postcss()
  .use(sassColorFunctions())
  .process(css)
  .css

Using this input.css:

 body {
  background-color: mix(#255073, #3c749e, 25%);
}

you will get:

 body {
  background-color: rgb(54, 107, 147);
}

Checkout tests.js for examples.

Currently Supported functions

  • mix(one, two, weight)
  • rgba(color, alpha)
  • darken(color, amount)
  • lighten(color, amount)
  • tint(color, amount)
  • shade(color, amount)

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code