is there a way for this utility?

[dkern]

Hello!

I'm asking myself if there a good way to build an utility like the example below. So basically is there a way to wrap the values into rotate(), or do i have to put everything into the values list?

'rotate': (
    property: transform,
    class: 'rotate',
    values: (0, 1, 2, 3)
),

Expected output:

.rotate-0 { transform: rotate(0deg); }
.rotate-1 { transform: rotate(1deg); }
.rotate-2 { transform: rotate(2deg); }
.rotate-3 { transform: rotate(3deg); }

Thanks!

[chuckrincon]

Try with this:

$utilities: map-merge(
  $utilities,
  (
    'rotate': (
      property: transform,
      class: rotate,
      values: (
        0: rotate(0deg),
        1: rotate(1deg),
        2: rotate(2deg),
        3: rotate(3deg),
      ),
    ),
  )
);

The value must be a list of values, or a map if you don’t want the class name to be the same as the value.

e.g. Map of values

$utilities: (
  'opacity': (
    property: opacity,
    values: (
      0: 0,
      25: 0.25,
      50: 0.5,
      75: 0.75,
      100: 1,
    ),
  ),
);

Produces

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

e.g. List of values

$utilities: map-merge(
  $utilities,
  (
    'cursor': (
      property: cursor,
      class: cursor,
      values: auto pointer grab,
    ),
  )
);

Produces

.cursor-auto { cursor: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }

[dkern]

Thank you for your reply. Yes, i know how the "normal" utilities work. I was just wondering how more "complex" things can be done with this, like converting 1 to rotate(1deg), so we don't have to write everything over and over again manually. I was hoping there is something more advanced way to generate utilities.