17. Предложите стили (LESS или SASS) для списка ниже, чтобы привести его к виду, как показано на скриншоте:

<div class="example"> 
    <ul> 
        <li>Item 1</li> 
        <li>Item 2 
            <ul> 
                <li data-value="1">sub-item</li>
                <li data-value="2">sub-item</li> 
                <li data-value="3">sub-item</li> 
            </ul> 
        </li>
        <li>Item 3 
            <ul> 
                <li data-value="4">sub-item</li> 
            </ul> 
        </li> 
    </ul> 
</div>
    
Ненумерованный список

Решение

Ответ: написал в scss синтаксисе, поэтому фигурные скобки остались.

$container-font-size: 20px;
$data-value: attr(data-value);
$li-first-font-weight: bold;

@mixin li-decoration {
  list-style: none;
  margin-left: 25px;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 11px;
    left: -15px;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    background-color: #000000;
  }
  &:after {
    content: ", " $data-value;
  }
}

.example {
  font-size: $container-font-size;
  & > ul {
    & > li:first-child {
      font-weight: $li-first-font-weight;
    }
    & > li:nth-child(2) {
      & > ul {
        & > li:first-child {
          font-weight: $li-first-font-weight;
        }
        & > li {
          @include li-decoration;
        }
      }
    }
    & > li:last-child {
      & > ul {
        & > li {
          @include li-decoration;
        }
      }
    }
  }
}