How to optimize SCSS recording?

Question

css

Help describe the code more concisely. Confuses the ".list__link" class

.list {
  &__item {
    &:first-child {
      .list__link {
        font-weight: 700;
      }
    }
  }

  &__link {
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: .4rem 0;
      display: block;
  }
}

Answer 1

Confuses the ".list__link" class

If you are confused by the repetition of list in the class name, then you can use saving the name in the that=this style from javascript:

.list {
    $b: &;

    &__item {
        &:first-child {
            #{$b}__link {
                // . . .
            }
        }
    }
}

But it can hardly be called a more readable option.
If the goal is still to make the code more digestible, then it may make sense to simply limit the nesting when writing styles (namely, the visual nesting of the code, and not the cascade), as they do in the same rscss:

.list {
    &__item {
        // . . .
    }

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}