npm.io
0.1.3 • Published 10 years ago

fixins

Licence
MIT
Version
0.1.3
Deps
3
Vulns
0
Weekly
0
SummaryDependencyVersions

fixins

A collection of functions and mixins for use with precss and postcss-functions

Install

npm install fixins --save-dev

Usage

fixins should be required and passed into precss and postcss-functions options within a postcss plugin config.

Here is an example using gulp:

// ...
const postcss = require('gulp-postcss');

const precss = require('precss');
const functions = require('postcss-functions');

const fixins = require('fixins');

// not required but certainly helps if you're
// using precss
const syntax = require('postcss-scss');

gulp.task('css', () => {
  return gulp.src('src/**/*.css')
    .pipe(postcss([
      precss({
        import: {
          // this is just my personal preference
          extension: 'pcss'
        },
        mixins: {
          // this is required!
          mixins: fixins.mixins
        }
      }),
      functions({
        // this is required!
        functions: fixins.functions
      }),
    ]))
    .pipe(gulp.dest('build/'));
});

Consult postcss#usage for a more complete overview of how to integrate postcss plugins (this is not a plugin, btw).

Overview

All fixins are prefixed with fx- as to not collide with other frameworks/collections. Most mixins can be called with positional or named arguments unless otherwise stated. Positional arguments are separated by comma and not enclosed in parenthesis, while named arguments can appear in any order but must be enclosed in parenthesis. Functions do not support named syntax.

Example: positional vs named arguments:

/* positional arguments (col and float)*/
@mixin fx-span 3, none;

/* named - col arg defaults to 12 */
@mixin fx-span(float:right);

API (Table of Contents)

Functions

fx-lerp(color, color, [factor=0.5])

Mix color1 and color2 by factor. The algorithm used is pretty basic. For more serious use, see postcss-color-mix

Example
// input
fx-lerp(#ff0000, rgb(0,0,255,0))
// output
rgba(128,0,128,0.5)
Params
  • color1 - CSS rgb, rgba, or hex string
  • color2 - CSS rgb, rgba, or hex string
  • [factor=0.5] - range [0,1] or [0,100%]
Return
  • CSS rgba color

fx-md-color(color1, [shade=500], [alpha])

Material design colors accessor

Example
// input
fx-md(red, 500)
// output
#f44336


// alpha support:
// input
fx-md(red, 500, 0.5)
// output
rgba(244, 67, 54, 0.5)
Params
  • color - material design color name
  • shade - material design color shade
  • [alpha=1] - range [0 1]
Return
  • CSS hex color if alpha argument is not passed
  • CSS rgba color if alpha was passed
Alias
  • fx-mdc
  • fx-md

fx-closest-md-color(color)

Find the material design color that is closest to color.

Params
  • color - CSS hex color
Return
  • CSS hex color
Alias
  • fx-cmd
  • fx-cmdc
  • fx-closest

fx-<red|orange|yellow|green|cyan|blue|violet|magenta|gray>(value, [alpha=1])

Get a shade of between 0-255

Params
  • value - range [0, 255]
  • [alpha=1] - range [0, 1]
Return
  • CSS rgba color
Alias
  • gray: grayscale, gray-scale, and for you britts: grey, greyscale, grey-scale
  • violet: purple
  • magenta: pink

fx-golden-ratio([number=100], [scale=1])

Get the golden ratio of number recursively scaled scale times. A scale setting less then 1 will return the smaller portion.

Example
fx-golden-ratio(30,  1) //=> 48.54102
fx-golden-ratio(30,  2) //=> 78.54102
fx-golden-ratio(30, -1) //=> 18.54102
fx-golden-ratio(30, -2) //=> 11.45898
Params
  • [number=100] - the base number
  • [scale=1] - the factor to scale number by
Return
  • The "A" (larger) portion if number is positive; "C" otherwise
Alias
  • fx-golden

fx-random ([min=0], [max=256], [float=false [, inclusive=false]])

Get a random number between min and max, inclusive. Random number generation provided by random-js

Params
  • min - range minimum (default = 0)
  • max - output range maximum (default = 255)
  • float - if truthy, output is floating point, default is false (integer output)
  • inclusive - if float is true, choose to include 0 and 1 (default false)
Return
  • a random integer or floating point number depending on the truthyness of float

fx-str([input])

Wrap input as string, ensures output in css is wrapped in quotes.

Params
  • input - anything
Return
  • "input"

Mixins

fx-ab([selector], prop, variable, [template])

This mixin outputs two rules for the passed selector: one as is, with prop and variable as is; the other with .b class appended to the selector, and a b prepended to the variable name before it is evaluated. Note that variable is sass-like, but you should NOT include the dollar sign of your variable when passing it into fx-ab. Note also that this mixin does not support the named argument syntax like the most of the fx- mixins do.

To futher compilcate things, fx-ab has different signatures depending on if is being called in root context or not. When on a root element the signature is <selector>, <prop>, <variable>, [template]. In this context, .b is appended to the parent-most (left-most) selector, so x y z will become x.b y c.

Example
// given input ...
$text-color: black;
$b-text-color: white;


// note the lack of `
fixins


A collection of functions and mixins for use with
  precss and postcss-functions




Install


npm install fixins --save-dev


Usage


__INLINE_CODE_0__ should be required and passed into
precss and postcss-functions options within
a postcss plugin config.


Here is an example using gulp:


// ...
const postcss = require('gulp-postcss');

const precss = require('precss');
const functions = require('postcss-functions');

const fixins = require('fixins');

// not required but certainly helps if you're
// using precss
const syntax = require('postcss-scss');

gulp.task('css', () => {
  return gulp.src('src/**/*.css')
    .pipe(postcss([
      precss({
        import: {
          // this is just my personal preference
          extension: 'pcss'
        },
        mixins: {
          // this is required!
          mixins: fixins.mixins
        }
      }),
      functions({
        // this is required!
        functions: fixins.functions
      }),
    ]))
    .pipe(gulp.dest('build/'));
});


Consult postcss#usage for a more complete overview
of how to integrate postcss plugins (this is not a plugin, btw).


Overview


All fixins are prefixed with __INLINE_CODE_1__ as to not collide with other frameworks/collections.
Most mixins can be called with positional or named arguments unless otherwise stated.
Positional arguments are separated by comma and not enclosed in parenthesis, while named arguments
can appear in any order but must be enclosed in parenthesis. Functions do not support named syntax.


Example: positional vs named arguments:


/* positional arguments (col and float)*/
@mixin fx-span 3, none;

/* named - col arg defaults to 12 */
@mixin fx-span(float:right);


API (Table of Contents)





Functions


 fx-lerp(color, color, [factor=0.5])


Mix __INLINE_CODE_2__ and __INLINE_CODE_3__ by __INLINE_CODE_4__.
The algorithm used is pretty basic. For more serious use, see
postcss-color-mix


Example


// input
fx-lerp(#ff0000, rgb(0,0,255,0))
// output
rgba(128,0,128,0.5)


Params


    

  • __INLINE_CODE_5__ - CSS rgb, rgba, or hex string
    • 

  • __INLINE_CODE_6__ - CSS rgb, rgba, or hex string
    • 

  • __INLINE_CODE_7__ - range [0,1] or [0,100%]
    • 



Return


    

  • CSS rgba color
    • 





 fx-md-color(color1, [shade=500], [alpha])


Material design colors accessor


Example


// input
fx-md(red, 500)
// output
#f44336


// alpha support:
// input
fx-md(red, 500, 0.5)
// output
rgba(244, 67, 54, 0.5)


Params


    

  • __INLINE_CODE_8__ - material design color name
    • 

  • __INLINE_CODE_9__ - material design color shade
    • 

  • __INLINE_CODE_10__ - range [0 1]
    • 



Return


    

  • CSS hex color if __INLINE_CODE_11__ argument is not passed
    • 

  • CSS rgba color if __INLINE_CODE_12__ was passed
    • 



Alias


    

  • __INLINE_CODE_13__
    • 

  • __INLINE_CODE_14__
    • 





 fx-closest-md-color(color)


Find the material design color that is closest to __INLINE_CODE_15__.


Params


    

  • __INLINE_CODE_16__ - CSS hex color
    • 



Return


    

  • CSS hex color
    • 



Alias


    

  • __INLINE_CODE_17__
    • 

  • __INLINE_CODE_18__
    • 

  • __INLINE_CODE_19__
    • 





 fx-<red|orange|yellow|green|cyan|blue|violet|magenta|gray>(value, [alpha=1])


Get a shade of  between 0-255


Params


    

  • __INLINE_CODE_20__ - range [0, 255]
    • 

  • __INLINE_CODE_21__ - range [0, 1]
    • 



Return


    

  • CSS rgba color
    • 



Alias


    

  • gray: __INLINE_CODE_22__, __INLINE_CODE_23__, and for you britts: __INLINE_CODE_24__, __INLINE_CODE_25__, __INLINE_CODE_26__
    • 

  • violet: __INLINE_CODE_27__
    • 

  • magenta: __INLINE_CODE_28__
    • 





 fx-golden-ratio([number=100], [scale=1])


Get the golden ratio of __INLINE_CODE_29__ recursively scaled
__INLINE_CODE_30__ times. A scale setting less then 1 will return
the smaller portion.


Example


fx-golden-ratio(30,  1) //=> 48.54102
fx-golden-ratio(30,  2) //=> 78.54102
fx-golden-ratio(30, -1) //=> 18.54102
fx-golden-ratio(30, -2) //=> 11.45898


Params


    

  • __INLINE_CODE_31__- the base number
    • 

  • __INLINE_CODE_32__ - the factor to scale __INLINE_CODE_33__ by
    • 



Return


    

  • The "A" (larger) portion if __INLINE_CODE_34__ is positive; "C" otherwise
    • 



Alias


    

  • fx-golden
    • 





 fx-random ([min=0], [max=256], [float=false [, inclusive=false]])


Get a random number between __INLINE_CODE_35__ and __INLINE_CODE_36__, inclusive.
Random number generation provided by
random-js


Params


    

  • __INLINE_CODE_37__ - range minimum (default = 0)
    • 

  • __INLINE_CODE_38__ - output range maximum (default = 255)
    • 

  • __INLINE_CODE_39__ - if truthy, output is floating point, default is false (integer output)
    • 

  • __INLINE_CODE_40__ - if __INLINE_CODE_41__ is true, choose to include 0 and 1 (default false)
    • 



Return


    

  • a random integer or floating point number depending on the truthyness of __INLINE_CODE_42__
    • 





 fx-str([input])


Wrap input as string, ensures output
in css is wrapped in quotes.


Params


    

  • __INLINE_CODE_43__ - anything
    • 



Return


    

  • "__INLINE_CODE_44__"
    • 





Mixins


 fx-ab([selector], prop, variable, [template])


This mixin outputs two rules for the passed selector:
one as is, with prop and variable as is; the other with __INLINE_CODE_45__ class
appended to the selector, and a __INLINE_CODE_46__ prepended to the variable name before it is
evaluated. Note that __INLINE_CODE_47__ is sass-like, but you should NOT include the dollar sign
of your variable when passing it into __INLINE_CODE_48__. Note also that this mixin
does not support the named argument syntax like the most of the fx-
mixins do.


To futher compilcate things, __INLINE_CODE_49__ has different signatures
depending on if is being called in root context or not.
When on a root element the signature is __INLINE_CODE_50__.
In this context, __INLINE_CODE_51__ is appended to the parent-most
(left-most) selector, so __INLINE_CODE_52__ will become __INLINE_CODE_53__.


Example

 before `text-color`
@mixin fx-ab .box, color, text-color;


// results in ...
.box {
  color: black;
}
.box.b {
  color: white;
}

When inside a rule the signature is <prop>, <variable>, [template]. The .b class will be appended to the child-most (right-most) selector, so x y z will become x y z.b.

Example
// input
$text-color: black;
$b-text-color: white;


// note the lack of `
fixins


A collection of functions and mixins for use with
  precss and postcss-functions




Install


npm install fixins --save-dev


Usage


__INLINE_CODE_0__ should be required and passed into
precss and postcss-functions options within
a postcss plugin config.


Here is an example using gulp:


// ...
const postcss = require('gulp-postcss');

const precss = require('precss');
const functions = require('postcss-functions');

const fixins = require('fixins');

// not required but certainly helps if you're
// using precss
const syntax = require('postcss-scss');

gulp.task('css', () => {
  return gulp.src('src/**/*.css')
    .pipe(postcss([
      precss({
        import: {
          // this is just my personal preference
          extension: 'pcss'
        },
        mixins: {
          // this is required!
          mixins: fixins.mixins
        }
      }),
      functions({
        // this is required!
        functions: fixins.functions
      }),
    ]))
    .pipe(gulp.dest('build/'));
});


Consult postcss#usage for a more complete overview
of how to integrate postcss plugins (this is not a plugin, btw).


Overview


All fixins are prefixed with __INLINE_CODE_1__ as to not collide with other frameworks/collections.
Most mixins can be called with positional or named arguments unless otherwise stated.
Positional arguments are separated by comma and not enclosed in parenthesis, while named arguments
can appear in any order but must be enclosed in parenthesis. Functions do not support named syntax.


Example: positional vs named arguments:


/* positional arguments (col and float)*/
@mixin fx-span 3, none;

/* named - col arg defaults to 12 */
@mixin fx-span(float:right);


API (Table of Contents)





Functions


 fx-lerp(color, color, [factor=0.5])


Mix __INLINE_CODE_2__ and __INLINE_CODE_3__ by __INLINE_CODE_4__.
The algorithm used is pretty basic. For more serious use, see
postcss-color-mix


Example


// input
fx-lerp(#ff0000, rgb(0,0,255,0))
// output
rgba(128,0,128,0.5)


Params


    

  • __INLINE_CODE_5__ - CSS rgb, rgba, or hex string
    • 

  • __INLINE_CODE_6__ - CSS rgb, rgba, or hex string
    • 

  • __INLINE_CODE_7__ - range [0,1] or [0,100%]
    • 



Return


    

  • CSS rgba color
    • 





 fx-md-color(color1, [shade=500], [alpha])


Material design colors accessor


Example


// input
fx-md(red, 500)
// output
#f44336


// alpha support:
// input
fx-md(red, 500, 0.5)
// output
rgba(244, 67, 54, 0.5)


Params


    

  • __INLINE_CODE_8__ - material design color name
    • 

  • __INLINE_CODE_9__ - material design color shade
    • 

  • __INLINE_CODE_10__ - range [0 1]
    • 



Return


    

  • CSS hex color if __INLINE_CODE_11__ argument is not passed
    • 

  • CSS rgba color if __INLINE_CODE_12__ was passed
    • 



Alias


    

  • __INLINE_CODE_13__
    • 

  • __INLINE_CODE_14__
    • 





 fx-closest-md-color(color)


Find the material design color that is closest to __INLINE_CODE_15__.


Params


    

  • __INLINE_CODE_16__ - CSS hex color
    • 



Return


    

  • CSS hex color
    • 



Alias


    

  • __INLINE_CODE_17__
    • 

  • __INLINE_CODE_18__
    • 

  • __INLINE_CODE_19__
    • 





 fx-<red|orange|yellow|green|cyan|blue|violet|magenta|gray>(value, [alpha=1])


Get a shade of  between 0-255


Params


    

  • __INLINE_CODE_20__ - range [0, 255]
    • 

  • __INLINE_CODE_21__ - range [0, 1]
    • 



Return


    

  • CSS rgba color
    • 



Alias


    

  • gray: __INLINE_CODE_22__, __INLINE_CODE_23__, and for you britts: __INLINE_CODE_24__, __INLINE_CODE_25__, __INLINE_CODE_26__
    • 

  • violet: __INLINE_CODE_27__
    • 

  • magenta: __INLINE_CODE_28__
    • 





 fx-golden-ratio([number=100], [scale=1])


Get the golden ratio of __INLINE_CODE_29__ recursively scaled
__INLINE_CODE_30__ times. A scale setting less then 1 will return
the smaller portion.


Example


fx-golden-ratio(30,  1) //=> 48.54102
fx-golden-ratio(30,  2) //=> 78.54102
fx-golden-ratio(30, -1) //=> 18.54102
fx-golden-ratio(30, -2) //=> 11.45898


Params


    

  • __INLINE_CODE_31__- the base number
    • 

  • __INLINE_CODE_32__ - the factor to scale __INLINE_CODE_33__ by
    • 



Return


    

  • The "A" (larger) portion if __INLINE_CODE_34__ is positive; "C" otherwise
    • 



Alias


    

  • fx-golden
    • 





 fx-random ([min=0], [max=256], [float=false [, inclusive=false]])


Get a random number between __INLINE_CODE_35__ and __INLINE_CODE_36__, inclusive.
Random number generation provided by
random-js


Params


    

  • __INLINE_CODE_37__ - range minimum (default = 0)
    • 

  • __INLINE_CODE_38__ - output range maximum (default = 255)
    • 

  • __INLINE_CODE_39__ - if truthy, output is floating point, default is false (integer output)
    • 

  • __INLINE_CODE_40__ - if __INLINE_CODE_41__ is true, choose to include 0 and 1 (default false)
    • 



Return


    

  • a random integer or floating point number depending on the truthyness of __INLINE_CODE_42__
    • 





 fx-str([input])


Wrap input as string, ensures output
in css is wrapped in quotes.


Params


    

  • __INLINE_CODE_43__ - anything
    • 



Return


    

  • "__INLINE_CODE_44__"
    • 





Mixins


 fx-ab([selector], prop, variable, [template])


This mixin outputs two rules for the passed selector:
one as is, with prop and variable as is; the other with __INLINE_CODE_45__ class
appended to the selector, and a __INLINE_CODE_46__ prepended to the variable name before it is
evaluated. Note that __INLINE_CODE_47__ is sass-like, but you should NOT include the dollar sign
of your variable when passing it into __INLINE_CODE_48__. Note also that this mixin
does not support the named argument syntax like the most of the fx-
mixins do.


To futher compilcate things, __INLINE_CODE_49__ has different signatures
depending on if is being called in root context or not.
When on a root element the signature is __INLINE_CODE_50__.
In this context, __INLINE_CODE_51__ is appended to the parent-most
(left-most) selector, so __INLINE_CODE_52__ will become __INLINE_CODE_53__.


Example


// given input ...
$text-color: black;
$b-text-color: white;


// note the lack of `
fixins


A collection of functions and mixins for use with
  precss and postcss-functions




Install


npm install fixins --save-dev


Usage


__INLINE_CODE_0__ should be required and passed into
precss and postcss-functions options within
a postcss plugin config.


Here is an example using gulp:


// ...
const postcss = require('gulp-postcss');

const precss = require('precss');
const functions = require('postcss-functions');

const fixins = require('fixins');

// not required but certainly helps if you're
// using precss
const syntax = require('postcss-scss');

gulp.task('css', () => {
  return gulp.src('src/**/*.css')
    .pipe(postcss([
      precss({
        import: {
          // this is just my personal preference
          extension: 'pcss'
        },
        mixins: {
          // this is required!
          mixins: fixins.mixins
        }
      }),
      functions({
        // this is required!
        functions: fixins.functions
      }),
    ]))
    .pipe(gulp.dest('build/'));
});


Consult postcss#usage for a more complete overview
of how to integrate postcss plugins (this is not a plugin, btw).


Overview


All fixins are prefixed with __INLINE_CODE_1__ as to not collide with other frameworks/collections.
Most mixins can be called with positional or named arguments unless otherwise stated.
Positional arguments are separated by comma and not enclosed in parenthesis, while named arguments
can appear in any order but must be enclosed in parenthesis. Functions do not support named syntax.


Example: positional vs named arguments:


/* positional arguments (col and float)*/
@mixin fx-span 3, none;

/* named - col arg defaults to 12 */
@mixin fx-span(float:right);


API (Table of Contents)





Functions


 fx-lerp(color, color, [factor=0.5])


Mix __INLINE_CODE_2__ and __INLINE_CODE_3__ by __INLINE_CODE_4__.
The algorithm used is pretty basic. For more serious use, see
postcss-color-mix


Example


// input
fx-lerp(#ff0000, rgb(0,0,255,0))
// output
rgba(128,0,128,0.5)


Params


    

  • __INLINE_CODE_5__ - CSS rgb, rgba, or hex string
    • 

  • __INLINE_CODE_6__ - CSS rgb, rgba, or hex string
    • 

  • __INLINE_CODE_7__ - range [0,1] or [0,100%]
    • 



Return


    

  • CSS rgba color
    • 





 fx-md-color(color1, [shade=500], [alpha])


Material design colors accessor


Example


// input
fx-md(red, 500)
// output
#f44336


// alpha support:
// input
fx-md(red, 500, 0.5)
// output
rgba(244, 67, 54, 0.5)


Params


    

  • __INLINE_CODE_8__ - material design color name
    • 

  • __INLINE_CODE_9__ - material design color shade
    • 

  • __INLINE_CODE_10__ - range [0 1]
    • 



Return


    

  • CSS hex color if __INLINE_CODE_11__ argument is not passed
    • 

  • CSS rgba color if __INLINE_CODE_12__ was passed
    • 



Alias


    

  • __INLINE_CODE_13__
    • 

  • __INLINE_CODE_14__
    • 





 fx-closest-md-color(color)


Find the material design color that is closest to __INLINE_CODE_15__.


Params


    

  • __INLINE_CODE_16__ - CSS hex color
    • 



Return


    

  • CSS hex color
    • 



Alias


    

  • __INLINE_CODE_17__
    • 

  • __INLINE_CODE_18__
    • 

  • __INLINE_CODE_19__
    • 





 fx-<red|orange|yellow|green|cyan|blue|violet|magenta|gray>(value, [alpha=1])


Get a shade of  between 0-255


Params


    

  • __INLINE_CODE_20__ - range [0, 255]
    • 

  • __INLINE_CODE_21__ - range [0, 1]
    • 



Return


    

  • CSS rgba color
    • 



Alias


    

  • gray: __INLINE_CODE_22__, __INLINE_CODE_23__, and for you britts: __INLINE_CODE_24__, __INLINE_CODE_25__, __INLINE_CODE_26__
    • 

  • violet: __INLINE_CODE_27__
    • 

  • magenta: __INLINE_CODE_28__
    • 





 fx-golden-ratio([number=100], [scale=1])


Get the golden ratio of __INLINE_CODE_29__ recursively scaled
__INLINE_CODE_30__ times. A scale setting less then 1 will return
the smaller portion.


Example


fx-golden-ratio(30,  1) //=> 48.54102
fx-golden-ratio(30,  2) //=> 78.54102
fx-golden-ratio(30, -1) //=> 18.54102
fx-golden-ratio(30, -2) //=> 11.45898


Params


    

  • __INLINE_CODE_31__- the base number
    • 

  • __INLINE_CODE_32__ - the factor to scale __INLINE_CODE_33__ by
    • 



Return


    

  • The "A" (larger) portion if __INLINE_CODE_34__ is positive; "C" otherwise
    • 



Alias


    

  • fx-golden
    • 





 fx-random ([min=0], [max=256], [float=false [, inclusive=false]])


Get a random number between __INLINE_CODE_35__ and __INLINE_CODE_36__, inclusive.
Random number generation provided by
random-js


Params


    

  • __INLINE_CODE_37__ - range minimum (default = 0)
    • 

  • __INLINE_CODE_38__ - output range maximum (default = 255)
    • 

  • __INLINE_CODE_39__ - if truthy, output is floating point, default is false (integer output)
    • 

  • __INLINE_CODE_40__ - if __INLINE_CODE_41__ is true, choose to include 0 and 1 (default false)
    • 



Return


    

  • a random integer or floating point number depending on the truthyness of __INLINE_CODE_42__
    • 





 fx-str([input])


Wrap input as string, ensures output
in css is wrapped in quotes.


Params


    

  • __INLINE_CODE_43__ - anything
    • 



Return


    

  • "__INLINE_CODE_44__"
    • 





Mixins


 fx-ab([selector], prop, variable, [template])


This mixin outputs two rules for the passed selector:
one as is, with prop and variable as is; the other with __INLINE_CODE_45__ class
appended to the selector, and a __INLINE_CODE_46__ prepended to the variable name before it is
evaluated. Note that __INLINE_CODE_47__ is sass-like, but you should NOT include the dollar sign
of your variable when passing it into __INLINE_CODE_48__. Note also that this mixin
does not support the named argument syntax like the most of the fx-
mixins do.


To futher compilcate things, __INLINE_CODE_49__ has different signatures
depending on if is being called in root context or not.
When on a root element the signature is __INLINE_CODE_50__.
In this context, __INLINE_CODE_51__ is appended to the parent-most
(left-most) selector, so __INLINE_CODE_52__ will become __INLINE_CODE_53__.


Example

 before `text-color`
@mixin fx-ab .box, color, text-color;


// results in ...
.box {
  color: black;
}
.box.b {
  color: white;
}


When inside a rule the signature is __INLINE_CODE_54__.
The __INLINE_CODE_55__ class will be appended to the child-most
(right-most) selector, so __INLINE_CODE_56__ will become __INLINE_CODE_57__.


Example

 before `text-color`
.box {
  .medium {
 	 @mixin fx-ab color, text-color;
  }
}


// note again the difference in output in root context
@mixin .box .medium, color, text-color;


// output
.box .medium {
  color: black;
}
.box .medium.b {
  color: white;
}


.box .medium {
  color: black;
}
.box.b .medium {
  color: white;
}

Using an optional template, any occurrence of $ will be replaced with variable. This is useful when your variable is included in a multiple word value definition./

$color: black;
$b-color: white;


@mixin fx-ab .box, box-shadow, color, 0 1px 0 1px $;


// results in
.box {
  box-shadow: 0 1px 0 1px black;
}
.box.b {
  box-shadow: 0 1px 0 1px white;
}
Params
  • [selector] - selector
  • prop - left handle property key
  • variable - sass-like variable reference without the leading $. Passing foo is read internally as "use $foo and $b-foo". If no reference to $foo or $b-foo is found, foo and b-foo literals will be output.
  • [template] - text sequence to use as the right-hand value with any occurrence of $ replaced with variable results.

fx-box-shadow([color=rgba(0, 0, 0, 0.25)])

fx-center

Return

margin: 0 auto;

fx-ellipsis

Truncate text with an ellipsis .... Works best on elements with a determined height (not auto or 100%)

fx-emboss([radius=0], [top-opacity=0.3], [bottom-opacity=0.25], [background-opacity=0.2])

An opinionated emboss effect suitable for square containers. Currently only suitable for light themes.

fx-horizontal-list

Bare bones horizontal list. Note that this mixin is meant to be placed directly under a ul|ol or class placed directly on a ul|ol

fx-list-unstyled

fx-size([width], [height=width])

Width and height together in one line. Called with 1 arg, height will mimick width (output square). Note that this mixin does not support the named argument syntax as that is completely redundant.

fx-span([cols=12], [float=left])

Dynamically add $number of columns to an element. Assumes a 12 column grid with no gutters (no gutters? that's right, using box-sizing:border-box on everything, wrappers for your grid classes and padding for inner content and things become much simpler in grid land).

fx-underline-on-hover([color=#000], [speed=0.3s])

Animated text underline. If using with an a element, be sure to set text-decoration: none; on the element and its :hover. Credit goes to someone on Codepen, but somehow I misplaced the link to that work... will update here when found. Thanks, whoever you are!

Road Map

  • - support hsla
  • - flex-box helpers
  • - tighten test demo and github.io that sucker

License

MIT

Keywords

cssfunctionslibmixinspostcsspostcss-functionspostcss-mixinsprecss