scss DRY mixins和动态占位符

Posted 2021-05-18

/*

DRY Mixins :
http://alistapart.com/article/dry-ing-out-your-sass-mixins
https://github.com/at-import/toolkit#dry-mixins

Dinamic placeolder can be used in media queireis ? [hum ^^^]
https://gist.github.com/hc2p/5c091269e5cb902770e2
------------

Settings and configuration component
https://github.com/at-import/toolkit#settings

*/
.btn {
  background-color: blue;
  border-color: #0000bf;
}

.btn, .btn--secondary {
  border: 1px solid;
  border-radius: 5px;
  padding: .25em .5em;
}

.btn:hover, .btn--secondary:hover {
  background-color: #0000d9;
  border-color: #000099;
  cursor: pointer;
}

.btn--secondary {
  color: pink;
}

@media screen and (min-width: 480px) {
  .btn--secondary {
    background-color: green;
    border-color: #006000;
  }
}

.test {
  value: ("button": udf56546b);
}

// ----
// libsass (v3.3.6)
// ----

/*

DRY Mixins :
http://alistapart.com/article/dry-ing-out-your-sass-mixins
https://github.com/at-import/toolkit#dry-mixins

Dinamic placeolder can be used in media queireis ? [hum ^^^]
https://gist.github.com/hc2p/5c091269e5cb902770e2
------------

Settings and configuration component
https://github.com/at-import/toolkit#settings

*/
// Private Placeholders map : name|uid
$_Placeholders: () !default;

//////////////////////////////
// Placeholder Get/Set
//////////////////////////////
@function _placeholder-set($id) {
  $unique-id: unique-id();
  $_Placeholders: map-merge($_Placeholders, ($id: $unique-id)) !global;
  @return $unique-id;
}

@function _placeholder-get($id) {
  @return map-get($_Placeholders, $id);
}

//////////////////////////////
// Generate Placeholder Class and Extend
//////////////////////////////
@mixin dynamic-extend($id) {
  $placeholder-id: _placeholder-get($id);

  @if $placeholder-id == null {
    $placeholder-id: _placeholder-set($id);
    @at-root %#{$placeholder-id} {
      @content;
    }
  }
  @extend %#{$placeholder-id};
}

//////////////////////////////
// Static Mixin Helper
//////////////////////////////
@mixin mixin-dryer($id, $extend: true) {
  @if $extend == true {
    @include dynamic-extend($id) {
      @content;
    }
  }
  @else {
    @content;
  }
}


///////////////////////////////
// USAGE / TEST
///////////////////////////////
@mixin button($color, $extend: true) {
  background-color: $color;
  border-color: mix(black, $color, 25%);
  
  
  @include mixin-dryer('button', $extend) {
      &:hover {
        background-color: mix(black, $color, 15%);
        border-color: mix(black, $color, 40%);
        cursor: pointer;
      }
  
    
      border: 1px solid;
      border-radius: 5px;
      padding: .25em .5em;
  }
}





.btn {

  @include button(blue);
}


.btn--secondary {
    color: pink;
  @media screen and (min-width: 480px) {
    @include button(green);
  }
}

.test {
  value: #{$_Placeholders};
}


// Config component




$config: (
  ''

);

// Global
$_Settings: $config !default;
// User
$UserSettings: () !default;