Making a power mixin

mixin.scss

// Caveat, this mixin relies on functions and mixins created in the Stipe library, 
// To test the output of this code, please copy and past the Sass into SassMeister.com
// be sure to use the `stipe` library extension

// Let's set some core level defaults, consider using a `config.scss` file
// typography
$font-size: 12;
// colors
$mediumgray: lighten(gray, 0.5);
// design
$standard-border-style: solid;
$standard-border-radius: em(5);
$standard-forms-box-shadow: 0 0 0 em(4);


// I NEVER use a variable that is closely tied to it's presentational value
// I will set some presentational variables up in the `config.scss` file
// then associate them to something more semantic like the following
$standard-border-color: $mediumgray;


// --------------------------------------------------------------------- //


// A mixin should only be used if it is passing in arguments, otherwise use a placeholder class
// It is a good idea to place all your mixins in individual module files
// and use a manifest.scss file with `@import "yourMixinFile.scss"; to collect all the individual modules
// Lets say that this mixin is in it's own module file

$form-border-color: $standard-border-color;
$form-border-style: $standard-border-style;
$form-border-radius: $standard-border-radius;
$form-box-shadow: $standard-forms-box-shadow;
$form-font-size: em(14);
$form-padding: em(5) em(7);


@mixin formfields($border-radius: $form-border-radius, $border-color: $form-border-color, $border-style: $standard-border-style, $font-size: $form-font-size, $padding: $form-padding, $box-shadow: $form-box-shadow) {
    @include border_radius($border-radius);
    @include box_shadow($shadow_color, $box-shadow);
    @include box_sizing;
    border: 1px $border-style $border-color;
    font-size: $font-size;
    padding: $padding;
    width: 100%;
}

// Let's say that these are all default settings and you don't intend to stray away from the standard
// let's make this a `placeholder class`

%default-form-field {
    @include formfields;
}

// We can then use that placeholder class with each instance and then make modifications 
// if needed per instance

input[type=text] {
    @extend %default-form-field;
}

// let's say that you need to stray from the norm, then create a new 
// selector, extend the placeholder selector like so

input[type=email] {
    @extend %default-form-field;
    font-size: em(20);
}

textfield {
    @extend %default-form-field;
    min-height: em(200);
}

// Now let's say that you need to use the format of the formfield mixin, but you are going to make a lot of changes, 
// in that use case, it makes no sense to extend and then re-write all the css, so just invoke the mixin an
// replace the default values

.crazy-form-field {
    @include formfields($border-radius: em(10), $border-color: red, $border-style: dotted, $font-size: em(20), $padding: em(20), $box-shadow: 0 0 em(30))
}

output.css

input[type=text], input[type=email], textfield {
  -webkit-border-radius: 0.41667em;
  border-radius: 0.41667em;
  -moz-box-shadow: rgba(51, 51, 51, 0.5) 0 0 0 0.33333em;
  -webkit-box-shadow: rgba(51, 51, 51, 0.5) 0 0 0 0.33333em;
  -o-box-shadow: rgba(51, 51, 51, 0.5) 0 0 0 0.33333em;
  -ms-box-shadow: rgba(51, 51, 51, 0.5) 0 0 0 0.33333em;
  box-shadow: rgba(51, 51, 51, 0.5) 0 0 0 0.33333em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #818181;
  font-size: 1.16667em;
  padding: 0.41667em 0.58333em;
  width: 100%;
}

input[type=email] {
  font-size: 1.66667em;
}

textfield {
  min-height: 16.66667em;
}

.crazy-form-field {
  -webkit-border-radius: 0.83333em;
  border-radius: 0.83333em;
  -moz-box-shadow: rgba(51, 51, 51, 0.5) 0 0 2.5em;
  -webkit-box-shadow: rgba(51, 51, 51, 0.5) 0 0 2.5em;
  -o-box-shadow: rgba(51, 51, 51, 0.5) 0 0 2.5em;
  -ms-box-shadow: rgba(51, 51, 51, 0.5) 0 0 2.5em;
  box-shadow: rgba(51, 51, 51, 0.5) 0 0 2.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px dotted red;
  font-size: 1.66667em;
  padding: 1.66667em;
  width: 100%;
}