stemCSS/tools/_make-utility.scss at f80816ca9c34d9c9c00484aea78a013bce3ac87e · wearelighthouse/stemCSS · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80

@mixin make-class-from-placeholder($utility-name, $properties) {

  // For no breakpoint
  .#{$utility-name} {
    @extend %#{$utility-name};
  }

  // For every breakpoint
  // Disabled because it creates a TON of styles in style.css, because can't extend within @medias.
  //  @each $breakpoint-key, $breakpoint-value in $global-breakpoints {
  //    .#{$utility-name + '--' + $breakpoint-key} {
  //      @include breakpoint($breakpoint-key) {
  //        @each $property, $value in $properties {
  //          #{$property}: $value;
  //        }
  //      }
  //    }
  //  }

}

@mixin make-placeholder($utility-name, $properties) {

  // For no breakpoint
  %#{$utility-name} {
    @each $property, $value in $properties {
      #{$property}: $value;
    }
  }

  // For every breakpoint
  @each $breakpoint-key, $breakpoint-value in $global-breakpoints {
    %#{$utility-name + $global-breakpoint-separator + $breakpoint-key} {
      @include breakpoint($breakpoint-key) {
        @each $property, $value in $properties {
          #{$property}: $value;
        }
      }
    }
  }

}

@mixin make-utility($args) {

  $class: map-use(
    $args,
    class,
    false
  );

  $args: map-remove($args, class);

  // If 'alias' key exists in $args, use that for the placeholder-name,
  // otherwise use the key and value of the first property in $args
  $utility-name: map-use(
    $args,
    alias,
    first(map-keys($args)) + '-' + first(map-values($args))
  );

  $utility-name: 'u-' + $utility-name;

  $properties: map-remove($args, alias);

  // Debug output to list off all the placeholders being made:
  //  @if ($class) {
  //    @debug('Making placeholder & class: ' + $utility-name);
  //  } else {
  //    @debug('Making placeholder: ' + $utility-name);
  //  }

  @include make-placeholder($utility-name, $properties);

  @if ($class) {
    @include make-class-from-placeholder($utility-name, $properties);
  }

}