sass-function/unique-id.scss at master · jiimy/sass-function · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

$class-selectors: ();

@mixin class() {}

@mixin classname-static($extend: true) {
  $class-selector: map-get($class-selectors, 'class');

  @if $extend==true {
    @if $class-selector==null {
      $class-selector: unique-id();
      $class-selectors: map-merge($class-selectors, ('class': $class-selector)) !global;
      @at-root %#{$class-selector} {
        @include classname-static(false);
      }
    }
  }
}

@include classname-static();


// class에 unique-id 주는거 안돼나 ㅠ


$Placeholder-Selectors: ();

@mixin button($color, $extend: true) {
  @include button-static($extend);
  background-color: $color;
  border-color: mix(black, $color, 25%);
  &:hover {
    background-color: mix(black, $color, 15%);
    border-color: mix(black, $color, 40%);
  }
}

@mixin button-static($extend: true) {
  $button-selector: map-get($Placeholder-Selectors, 'button');
  @if $extend == true {
    @if $button-selector == null {
        $button-selector: unique-id();
        $Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;
        @at-root %#{$button-selector} {
            @include button-static(false);
        }
    }
    @extend %#{$button-selector};
    }
    @else {
    border: 1px solid;
    border-radius: 5px;
    padding: .25em .5em;
    cursor: pointer;
  }
}

button {
  &.testA {
    @include button(#b4d455);
  }
  &.testB {
    @include button(#decaff);
  }
}