Add backgrounds to the utility classes

[antoine4livre]

Useful to have a background cover by a class instead of a style attribute in case of dynamic background-image.

[titouanmathis]

It might be useful. Does something like this would work for you?

/*============================================================================*\
   Background helpers
\*============================================================================*/

/** @type {Boolean} Do we need classes? */
$has-classes: false !default;

/** @type {Boolean} Do we need the `--force` modifiers? */
$backgrounds-with-force: false !default;

/** @type {Boolean} Do we need the `--<breakpoint>` modifiers? */
$backgrounds-with-breakpoints: false !default;

/** @type {List} List of background-position values to use */
$background-positions: (top, right, bottom, left, center) !default;

/** @type {List} List of background-size values to use */
$background-sizes: (cover, contain, auto) !default;

/** @type {List} List of background-repeats values to use */
$background-repeats: (repeat-x, repeat-y, repeat, space, round, no-repeat) !default;

/*============================================================================*\
   Class helpers
\*============================================================================*/

@if $has-classes {
  @each $position in $background-positions {
    .background-position-#{$position} {
      background-position: $position;
    }

    @if $backgrounds-with-force {
      .background-position-#{$position}--force {
        background-position: $position !important;
      }
    }
  }

  @each $size in $background-sizes {
    .background-size-#{$size} {
      background-size: $size;
    }

    @if $backgrounds-with-force {
      .background-size-#{$size}--force {
        background-size: $size !important;
      }
    }
  }

  @each $repeat in $background-repeats {
    .background-repeat-#{$repeat} {
      background-repeat: $repeat;
    }

    @if $backgrounds-with-force {
      .background-repeat-#{$repeat}--force {
        background-repeat: $repeat !important;
      }
    }
  }

  /*==========================================================================*\
     Visibility breakpoints modifiers
  \*==========================================================================*/

  @if $backgrounds-with-breakpoints {
      @each $position in $background-positions {
        .background-position-#{$position}--#{$breakpoint} {
          background-position: $position;
        }

        @if $backgrounds-with-force {
          .background-position-#{$position}--force-#{$breakpoint} {
            background-position: $position !important;
          }
        }
      }

      @each $size in $background-sizes {
        .background-size-#{$size}--#{$breakpoint} {
          background-size: $size;
        }

        @if $backgrounds-with-force {
          .background-size-#{$size}--force-#{$breakpoint} {
            background-size: $size !important;
          }
        }
      }

      @each $repeat in $background-repeats {
        .background-repeat-#{$repeat}--#{$breakpoint} {
          background-repeat: $repeat;
        }

        @if $backgrounds-with-force {
          .background-repeat-#{$repeat}--force-#{$breakpoint} {
            background-repeat: $repeat !important;
          }
        }
      }
    }
  }
}

[antoine4livre]

Yes, it answers to my demand. Thanks @titouanmathis !

[perruche]

I think this approach add no real value, it's just the same as writting css. It does not make something easier, and can result in an element having so many classes that it become harder to read html, than reading css.

eg, with just background classes: <div class="background-repeat-no-repeat background-size-cover background-position-center">

Background rules are always use together, you rarely use background-repeat alone so could we maybe use an approach more like typography ?

$background-types (
  full: (
    background-size: cover,
    background-position: center,
    background-repeat: no-repeat,
  ),
);

So we only write <div class="background-full">

Thoughs on this ?

[antoine4livre]

Yes it's better approach because the utilisation of an alone property of background still rare.