tabs w/radio button + :checked SASS

_radio-button-tabs.scss

// best solution, goes w/OLD NO JS w/:checked
@for $i from 1 through 20 {
  p.content { display: none; }
  
  .radio-btn:checked[tab="#{$i}"] ~ .content[tab="#{$i}"] {
    display: block;
  }
// end best


$checked-tab: green;
$unchecked-tab: grey;
$tab-list: (tab-1, tab-2, tab-3, tab-4, tab-5);

.radio-btn { display: none; }

@each $tab in $tab-list {
  .#{$tab} { background-color: $unchecked-tab; }

  .#{$tab}__content {
    display: none;
    position: absolute;
    // top, left, right, bottom
    background-color: $checked-tab;
  }

  .#{$tab} .radio-btn:checked {
    background-color: $checked-tab;
    & ~ .#{$tab}__content { display: block; }
  }
}


// $checkedIndex: .radio-btn:checked[index]
$thisIndex: &[index];
// $contentIndex: p=[index];

@function doTheyMatch($tabIndex, $contentIndex) {
  @if $tabIndex == $contentIndex {
    @return block
  } @else if {
    @return none
  }
}


// .radio-btn:checked {
//   display: doTheyMatch(&[index], p.content[index];
// }

.radio-btn:checked {
  display: if(&[index] == p.content[index], block, none);
}

// .radio-btn:checked {
//   display: if($thisIndex == p.content[index], block, none);
// }


// .radio-btn:checked {
//   display: @if &[index], p.content[index] {
//     @return block
//   } @else if {
//     @return none
//   }
// }

radio-button-tabs.html

<!-- NEW NO JS w/:checked -->
<div class="tabs">
    <div class="tab">
        <input type="text" name="tab-group-1" index="1" />
    </div>
    <div class="tab">
        <input type="text" name="tab-group-1" index="2" />
    </div>
    <div class="tab">
        <input type="text" name="tab-group-1" index="3" />
    </div>

    <div class="tabs__content">
        <p class="content" index="1"></p>
        <p class="content" index="2"></p>
        <p class="content" index="3"></p>
    </div>
</div>

////////////////////////////////

<!-- OLD NO JS w/:checked -->
<div class="tabs">
    <div class="tab-1">
        <input type="radio" id="tab-1" name="tab-group-1" class="radio-btn">
        <label for="tab-1">Tab One</label>

        <div class="tab-1__content">stuff</div>
    </div>

    <div class="tab-2">
        <input type="radio" id="tab-2" name="tab-group-1" class="radio-btn">
        <label for="tab-2">Tab Two</label>

        <div class="tab-2__content">stuff</div>
    </div>

    <div class="tab-3">
        <input type="radio" id="tab-3" name="tab-group-1" class="radio-btn">
        <label for="tab-3">Tab Three</label>

        <div class="tab-3__content">stuff</div>
    </div>
</div>






<!-- JS -->
<div class="tabs">
    <span class="tab tab-active"></span>
    <span class="tab"></span>
    <span class="tab"></span>

    <div class="tabs__content">
        <p class="content tab__content--active"></p>
        <p class="content"></p>
        <p class="content"></p>
    </div>
</div>