Generated by SassMeister.com.

input.scss

$breakpoints: (
  'mobile': 375px,
  'tablet': 768px,
  'desktop': 1440px
) !default;

@function getBp() {
    @return $breakpoints;
}

$bpm: map-get(getBp(), 'mobile');

@function str-explode($string, $delimiter: '') {
  @if type-of($string) != 'string' {
    @error 'The argument $string: `#{$string}` is of incorrect type: `#{type-of($string)}`. Type of `String` is required!';
  } @else if type-of($delimiter) != 'string' {
    @error 'The argument $delimiter: `#{$delimiter}` is of incorrect type: `#{type-of($delimiter)}`. Type of `String` is required!';
  }

  $result: ();
  $running: true;

  @if str-length($delimiter) == 0 {
    @for $i from 1 through str-length($string) {
      $result: append($result, str-slice($string, $i, $i));
    }

    @return $result;
  }

  @while $running {
    $index: str-index($string, $delimiter);

    @if $index != null {
      $item: str-slice($string, 1, ($index - 1));
      $result: append($result, $item);
      $string: str-slice($string, ($index + str-length($delimiter)));
    } @else {
      $running: false;
    }
  }

  @return append($result, $string);
}


$str: "h1|heading01";
$i: str-index($str, '|');
$no: str-index($str, ':');
$s: str-slice($str, $i+1);
$ex: str-explode($str, '|');
/*
not found: #{$no}
was found in place: #{$i} 
sliced: #{$s}
exploded: #{$ex}
one: #{nth($ex, 1)}
two: #{nth($ex, 2)}
*/


/**
 * Find which position in the mapping a rule is
 * This is used to break up the rules map into individual rules, by key, rather than by index
 */
@function get-rule-position($prop-list, $rule) {
  $index: index($prop-list, $rule);
  @if ($index != null) {
    @return $index;
  } @else {
    @error 'get-prop-from-list: The $rule "#{$rule}" is not present in our prop-list';
  }
  @return '';
}

/**
 * Get item at specific index
 */
@function get-index-item($map, $rules-mapping, $map-rules-set, $rule){
    $map-key: map-get($map, $map-rules-set);
    $list-index: get-rule-position($rules-mapping, $rule);
    @return nth($map-key, $list-index);
}

/**
 * Return a single rule's value
 * Note overlap with mixin output-one-list-rule
 */
@function get-item-rule($ruleset, $rules-map, $rule) {
    @return get-index-item($htmllists, $rules-map, $ruleset, $rule);
}

/**
 * Output All CSS Rules for a list set
 */
@mixin output-htmllist-by-mapping($list-set, $mapping: $list-rules-mapping) {
    $rules-map: $mapping;
    // loop over each rule in the key map
    // get the rule for that key in the rules mapping
    @each $rule in $rules-map {
        #{$rule}: get-item-rule($list-set, $rules-map, $rule);
    }
}

/**
 * Output a single rules value
 * Note overlap with function get-item-rule
 */
@mixin output-one-list-rule($ruleset, $rule, $mapping) {
    #{$rule}: get-index-item($htmllists, $mapping, $ruleset, $rule);
}

// font-settings list mapping
// i.e. what order are the rules in?
$list-rules-mapping: font-size, font-weight, font-style, line-height, letter-spacing, text-transform;
// font-settings map
$htmllists: (
  rs-ulist: 18px 400 normal 1.33 -0.25px none,
  rs-olist: 18px 400 normal 1.33 -0.25px none,
  rs-smaller-ulist: 15px 400 normal 1.33 -0.25px none,
  rs-footnotes: 14px 400 normal 1.33 -0.25px none
);

@mixin lists-output() {
    @content;
    @each $list, $vals in $htmllists {
        .#{$list} li {
            @include output-htmllist-by-mapping($list, $list-rules-mapping);
        }
    }
}

@include lists-output() {
    ul:not([class]) li,
    ol:not([class]) li {
        @include output-htmllist-by-mapping('rs-ulist');
    }
};

@mixin block-list($link-selector: 'a', $border-color: #ccc, $border-width: 1px, $item-padding: 0.75em) {
  border-top: $border-width solid $border-color;
  list-style: none;
  padding-left: 0;
  > li {
    border-bottom: $border-width solid $border-color;
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    padding: $item-padding;
    #{$link-selector} {
      display: block;
      padding: $item-padding;
      margin: -$item-padding;
    }
  }
}

@mixin tidy-list($item-padding: 0.75em) {
  list-style: none;
  padding-left: 0;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    padding: $item-padding;
  }
}

@mixin list-nice() {
   list-style: none none;
   position: relative;
   padding: 0; // reset normalize.css padding
   & > * {
      padding-left: 2em;
      margin-bottom: 1em;
      &:before {
         position: absolute;
         left: .3em;
      }
    }
    & > li {
       &:before {
          content: "—";
        }
     }
}

$selectors: "\
  .module,\
  body.alternate .module\
";

/*! multi-line */ 
#{$selectors} {
  background: red;
}
/*! multi-line more */ 
.nested {
  #{$selectors} {
    background: red;
  }
}

$prefix: css-tricks-;

/*! prefix */ 
.#{$prefix}button {
  padding: 0.5rem;
}

/*! more prefixes */ 
.#{$prefix} {
  &module {
    padding: 1rem;
  } 
  &header {
    font-size: 110%;
  }
  &footer {
    font-size: 90%;
  }
}

$selectorMap: (
  selectorsFoo: ".module",
  selectorsBar: ".moodulellee"
);

/*! single selector */ 
// #{map-get($selectorMap, selectorsFoo)} {
//   padding: 1rem;
// }

/*! selector map loop */ 
@each $selectorName, $actualSelector in $selectorMap {
  /*! => #{$selectorName} */
  #{$actualSelector} {
    padding: 1rem;
  }
}

body {
    width: $bpm;
    // @include output-htmllist-by-mapping('rs-smaller-ulist', $list-rules-mapping);
    /* next */
    @include output-one-list-rule('rs-smaller-ulist', 'font-size', $list-rules-mapping);
}

/*! rs nice list */
.rs-list {
    @include list-nice();
}

/*! block list */
// .list {
//     @include block-list();
// }

$lists: (
 'rs-ulist': 'ul, ul:not([class])',
 'rs-olist': 'ol',
 'rs-footnote': 'ol'
);

@mixin new-hotness($selist) {
  @each $selector, $value in $selist {
    .#{$selector} #{$value} {
        @include tidy-list();
    }
  }
}

/*! new hotness */
@include new-hotness($lists);

output.css

@charset "UTF-8";
/*
not found: 
was found in place: 3 
sliced: heading01
exploded: h1 heading01
one: h1
two: heading01
*/
/**
 * Find which position in the mapping a rule is
 * This is used to break up the rules map into individual rules, by key, rather than by index
 */
/**
 * Get item at specific index
 */
/**
 * Return a single rule's value
 * Note overlap with mixin output-one-list-rule
 */
/**
 * Output All CSS Rules for a list set
 */
/**
 * Output a single rules value
 * Note overlap with function get-item-rule
 */
ul:not([class]) li,
ol:not([class]) li {
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
}

.rs-ulist li {
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
}

.rs-olist li {
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
}

.rs-smaller-ulist li {
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
}

.rs-footnotes li {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
}

/*! multi-line */
.module, body.alternate .module {
  background: red;
}

/*! multi-line more */
.nested .module, .nested body.alternate .module {
  background: red;
}

/*! prefix */
.css-tricks-button {
  padding: 0.5rem;
}

/*! more prefixes */
.css-tricks-module {
  padding: 1rem;
}
.css-tricks-header {
  font-size: 110%;
}
.css-tricks-footer {
  font-size: 90%;
}

/*! single selector */
/*! selector map loop */
/*! => selectorsFoo */
.module {
  padding: 1rem;
}

/*! => selectorsBar */
.moodulellee {
  padding: 1rem;
}

body {
  width: 375px;
  /* next */
  font-size: 15px;
}

/*! rs nice list */
.rs-list {
  list-style: none none;
  position: relative;
  padding: 0;
}
.rs-list > * {
  padding-left: 2em;
  margin-bottom: 1em;
}
.rs-list > *:before {
  position: absolute;
  left: 0.3em;
}
.rs-list > li:before {
  content: "—";
}

/*! block list */
/*! new hotness */
.rs-ulist ul, ul:not([class]) {
  list-style: none;
  padding-left: 0;
}
.rs-ulist ul li, ul:not([class]) li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  padding: 0.75em;
}

.rs-olist ol {
  list-style: none;
  padding-left: 0;
}
.rs-olist ol li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  padding: 0.75em;
}

.rs-footnote ol {
  list-style: none;
  padding-left: 0;
}
.rs-footnote ol li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  padding: 0.75em;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}