packages/styles/scss/lib/_responsive-classes.scss

   1 @use 'sass:string';
   2 @use 'sass:map';
   3
   4 $queries: (
   5         default: 'all',
   6         sm: '>xsmall',
   7         md: '>small',
   8         lg: '>medium',
   9         xl: '>large',
  10 );
  11
  12 /// Generate a class stack selector form a class list and responsive prefix
  13 /// @param {List} $classnames - List of classes for generation
  14 /// @param {String} $prefix - Prefix from $queries
  15 /// @return {String} Stacked classes with responsive prefixes
  16
  17 @function stack-classenames($classnames, $prefix) {
  18         $classstack: '';
  19         @each $classname in $classnames {
  20                 // Remove dot (.) if there is one
  21                 $classname: if(string.slice($classname, 1, 1) == '.', string.slice($classname, 2, -1), $classname);
  22
  23                 // Stack classe with dot, comma and responsive prefix
  24                 $classstack: if($classstack == '', '.' + $prefix + $classname, $classstack + ', .' + $prefix + $classname);
  25         }
  26         @return $classstack;
  27 }
  28
  29 /// Generate responsive classes, duh!
  30 /// @param {String | List | Node} $param - List of classes
  31 /// @content The declaration block of a css rule. Used when $param is a String or a List
  32 /// @returns {String} CSS classes with responsive prefixes
  33 /// @example scss - Basic usage: __String__
  34 ///     @include responsive-classes(dummy-class) {
  35 ///             property: value;
  36 ///     }
  37 /// @example scss - Several classes with the same declaration block: __List__
  38 ///     @include responsive-classes((class-1, class-2)) {
  39 ///             property: value;
  40 ///     }
  41 /// @example scss - When you need to serialize several classes to avoid cascade ordering issues: __Map__
  42 ///     @include responsive-classes((
  43 ///             class: (
  44 ///                     property: value,
  45 ///             ),
  46 ///             (class-1, class-2): (
  47 ///                     property: value,
  48 ///                     ),
  49 ///     ));
  50
  51 @mixin responsive-classes($param) {
  52         @each $breakpointname, $query in $queries {
  53                 @include media($query) {
  54                         $prefix: if($breakpointname == 'default', '', $breakpointname + '\\\:');
  55                         @if type-of($param) == 'map' {
  56                                 @each $classnames, $properties in $param {
  57                                         #{stack-classenames($classnames, $prefix)} {
  58                                                 @each $property, $value in $properties {
  59                                                         // Search in the $value string if we need the breakpoint name, e.g. for custom sizing css variables
  60                                                         $value: if(
  61                                                                 string.index(#{$value}, '[BPN]'),
  62                                                                 str-replace($value, '[BPN]', if($breakpointname == 'default', '', $breakpointname + '-')),
  63                                                                 $value
  64                                                         );
  65
  66                                                         #{$property}: #{$value};
  67                                                 }
  68                                         }
  69                                 }
  70                         } @else {
  71                                 #{stack-classenames($param, $prefix)} {
  72                                         @content;
  73                                 }
  74                         }
  75                 }
  76         }
  77 }