html Sass：依赖注入Mixins #sass

Posted 2021-05-11

<div class="container--micro">
  <!-- The style attributes only for the purpose of the demo -->
  <div style="float: left; height: 100px; background: #0f0;">
    content
  </div>
  <div style="float: left; height: 100px; background: #00f;">
    content
  </div>
</div>

<div class="container--overflow">
  <!-- The style attributes only for the purpose of the demo -->
  <div style="float: left; height: 100px; background: #0f0;">
    content
  </div>
  <div style="float: left; height: 100px; background: #00f;">
    content
  </div>
</div>

.container--micro:before, .container--micro:after {
  content: " ";
  display: table;
}
.container--micro:after {
  clear: both;
}

.container--overflow {
  overflow: hidden;
}

.container--micro {
  margin: 1em;
  padding: 1em;
  background: #f00;
}

.container--overflow {
  margin: 1em;
  padding: 1em;
  background: #f00;
}

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

// Sass: Dependency Injection into Mixins

// Component mixins
// Micro clearfix mixin
@mixin my-clearfix--micro() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

// Legacy overflow clearfix mixin
@mixin my-clearfix--overflow() {
  overflow: hidden;
}

// Default button mixin
@mixin my-container($properties: ()) {
  $defaults: (
    // The default dependency (compoent name)
    -my-clearfix: 'my-clearfix--micro'
  );

  $properties: map-merge($defaults, $properties);
  $clearfix  : map-get($properties, '-my-clearfix');

  @extend %#{$clearfix};

  margin    : 1em;
  padding   : 1em;
  background: #f00;
}

// Component definitions
// Micro clearfix component
%my-clearfix--micro {
  @include my-clearfix--micro();
}

// Overflow clearfix component
%my-clearfix--overflow {
  @include my-clearfix--overflow();
}

// Micro clearfix container component
%my-container--micro {
  $properties: ();

  @include my-container($properties);
}

// Overflow clearfix container component
%my-container--overflow {
  $properties: (
    // The dependant (component name)
    -my-clearfix: 'my-clearfix--overflow'
  );

  @include my-container($properties);
}

// Mapping components to concrete classes
.container--micro {
  @extend %my-container--micro;
}

.container--overflow {
  @extend %my-container--overflow;
}

<div class="container--micro">
  <!-- The style attributes only for the purpose of the demo -->
  <div style="float: left; height: 100px; background: #0f0;">
    content
  </div>
  <div style="float: left; height: 100px; background: #00f;">
    content
  </div>
</div>

<div class="container--overflow">
  <!-- The style attributes only for the purpose of the demo -->
  <div style="float: left; height: 100px; background: #0f0;">
    content
  </div>
  <div style="float: left; height: 100px; background: #00f;">
    content
  </div>
</div>