SASS Code Structure / Readability

I'm trying out a new approach to SASS stylesheets, which I'm hoping will make them more organizined, maintainable, and readable.

I often feel like there is a thin line between code that is well structured and code that is entirely convoluted. I would appreciate any thoughts as to which side of the line this code falls.

I don't want to tell you too much more about what these styles are intended to produce -- my hope is that the code will explain this for itself. Also note that this is part of a larger project, so don't worry about missing dependencies, etc.

Questions for review

1. How would you make this code easier to read/maintain?
2. Can you understand what these styles are trying to produce?
3. Is the purpose of the mixins/placeholders clear?

File structure:

theme/sass/partials/
    widget/
        collapsable/
            _appendicon.scss
            _closeall.scss
            _toggleswitch.scss
        collapsable.scss
        collapsablered.scss
    _button.scss

collapsable.scss

/**
 * Collapsable widget.
 *
 * The widget has "open" and "closed" states.
 * The widget has a Toggle Switch, which is visible in
 * both open and closed states.
 *    All other content is hidden in the closed state.
*/
@mixin setOpenState {
  &,
  &.state-open {
    @content;
  }
}

@mixin setClosedState {
  &.state-closed {
    @content;
  }
}

@mixin setToggleSwitchStyles {
  &>h1:first-child, .collapseableToggle {
    @content;
  }
}


@import "collapsable/closeall";
@import "collapsable/appendicon";
@import "collapsable/toggleswitch";


%collapsable {
  @include setOpenState {
    @include setToggleSwitchStyles {
      @extend %toggleSwitch;
    }
  }


  @include setClosedState {
    @extend %closeAllExceptToggle;

    @include setToggleSwitchStyles {
      @extend %toggleSwitchClosed;
    }
  }
}

collapsablered.scss

@import "collapsable";
@import "../button";

%collapsableRed {
  @extend %collapsable;

  @include setOpenState {
    @include setToggleSwitchStyles {
      @extend %buttonWithRedBg;
    }
  }

  @include setClosedState {
    @include setToggleSwitchStyles {
      @extend %buttonWithDarkBg;
    }
  }
}

collapsable/_closeall.scss

%closeAllChildren {
  * {
    display: none;
  }
}

%closeAllExceptToggle {
  @extend %closeAllChildren;

  @include setToggleSwitchStyles {
    display: block;

    .icon-sprite {
      display: inline-block;
    }
  }
}

collapsable/_appendicon.scss

@import "compass/utilities/general/clearfix";
@import "../../icon";

@mixin appendIcon {
  @include pie-clearfix;

  .icon-sprite {
    margin-right: 5px;
    vertical-align: -3px;
  }

  &:after {
    content: '';

    position: relative;
    top: 2px;

    float: right;

    @content;
  }
}

%withCloseIcon {
  @include appendIcon {
    @extend .icon-close;   // defined in _icon.scss
  }
}

%withOpenIcon {
  @include appendIcon {
    @extend .icon-rChevronDk;   // defined in _icon.scss
    top: 1px;
  }
}

collapsable/_toggleswitch.scss

%toggleSwitch {
  cursor: pointer;
  @extend %withCloseIcon;
}


%toggleSwitchClosed {
  @extend %toggleSwitch;
  @extend %withOpenIcon;
}

partials/_button.scss

@import "typography";

%buttonWithRedBg {
  @extend %textOnRedBg;  // defined in _typography.scss

  cursor: pointer;

  &:hover {
    background-color: $redDk;
  }

  &:active {
    background-color: $black;
  }
}

%buttonWithDarkBg {
  @extend %textOnDarkBg;  // defined in _typography.scss

  cursor: pointer;

  &:hover {
    background-color: #000;
  }

  &:active {
    background-color: $redDk;
  }
}