Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>This is a very nice looking P you have here, if I may say so.</p>
<p>See SCSS Line #74 to see how override works</p>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// registry holding all the partials
$skin: ();

// FYI modes: t = template, e = extend, o = override

@mixin skin-add-partial( $partial, $mode: 't' ) {
  $p: map-get( $skin, $partial );
  $m: ( $mode: true );
  
  @if $p {
    $to-merge: map_merge( $p, $m );
  }
  
  $skin: map-merge( $skin, ( $partial: $m ) ) !global;
  
  // create placeholder
  .#{$partial}_#{$mode} {
    @content;
  }
}



// alias skin-add-template( $partial, 't' )
@mixin skin-template( $partial ) {
  @include skin-add-partial( $partial, 't' ) {
    @content;
  }
}
// alias skin-add-template( $partial, 'e' )
@mixin skin-extend( $partial ) {
  @include skin-add-partial( $partial, 'e' ) {
    @content;
  }
}
// alias skin-add-template( $partial, 'o' )
@mixin skin-override( $partial ) {
  @include skin-add-partial( $partial, 'o' ) {
    @content;
  }
}


// applies the proper skinning
@mixin skin( $partial ) {
  $partial-template: #{$partial}_t;
  $partial-design-extend: #{$partial}_e;
  $partial-design-override: #{$partial}_o;
  
  // map-deep-get doesn't work, says () isn't a valid CSS Value
  // @if map-deep-get( $skin, 'p' 'o' ) {
  $_partial: map-get( $skin, $partial );
  @if map-get( $_partial, 'o' ) {
    @extend .#{$partial-design-override};
  }
  @else {
    @extend .#{$partial-template};
    @extend .#{$partial-design-extend} !optional;
  }
}





// skins
@include skin-template( 'p' ) {
  color: red;
}
@include skin-extend( 'p' ) {
  font-size: 15px;
}
//* < Add/Remove another / before the comment to see override in action
@include skin-override( 'p' ) {
  text-transform: uppercase;
}
//*/


// applying skin
p {
  @include skin( 'p' );
}


















/// Map deep get
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

/// Deep set function to set a value in nested maps
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {List} $keys -  Key chaine
/// @param {*} $value - Value to assign
/// @return {Map}
@function map-deep-set($map, $keys, $value) {
  $maps: ($map,);
  $result: null;
  
  // If the last key is a map already
  // Warn the user we will be overriding it with $value
  @if type-of(nth($keys, -1)) == "map" {
    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
  }
  
  // If $keys is a single key
  // Just merge and return
  @if length($keys) == 1 {
    @return map-merge($map, ($keys: $value));
  }
  
  // Loop from the first to the second to last key from $keys
  // Store the associated map to this key in the $maps list
  // If the key doesn't exist, throw an error
  @for $i from 1 through length($keys) - 1 {
    $current-key: nth($keys, $i);
    $current-map: nth($maps, -1);
    $current-get: map-get($current-map, $current-key);
    @if $current-get == null {
      @error "Key `#{$key}` doesn't exist at current level in map.";
    }
    $maps: append($maps, $current-get);
  }
  
  // Loop from the last map to the first one
  // Merge it with the previous one
  @for $i from length($maps) through 1 {
    $current-map: nth($maps, $i);
    $current-key: nth($keys, $i);
    $current-val: if($i == length($maps), $value, $result);
    $result: map-merge($current-map, ($current-key: $current-val));
  }
  
  // Return result
  @return $result;
}

SassMeister-output.css

.p_t {
  color: red;
}

.p_e {
  font-size: 15px;
}

.p_o, p {
  text-transform: uppercase;
}

SassMeister-rendered.html

<p>This is a very nice looking P you have here, if I may say so.</p>
<p>See SCSS Line #74 to see how override works</p>