mango-cli-example/src/styles/mixins/flex.sass at 6a928c3de2d93e071c5f7bac68e989670557c5f3 · manGoweb/mango-cli-example · 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
// Provides a quick method for setting an element’s flex settings. Use a `null` value to “skip” a side. Fast & Neat.

    @example sass - Usage
      .element1 {
         +flex(space-between, center);
      }

      .element2 {
         +flex(space-evenly, null, column);
      }

    @example css - CSS Output
      .element1 {
         display: flex;
         justify-content: space-between
         align-items: center
      }

      .element2 {
         display: flex;
         justify-content: space-between
         flex-direction: column
      }

    @krystofm - Kodérek for life.


=flex($justify: null, $align: center, $direction: null)

  $offsets: (justify-content: $justify, align-items: $align, flex-direction: $direction)

  display: flex

  @each $offset, $value in $offsets
    @if $value
      #{$offset}: $value