Сергей delphinpro

.heading {
  position: relative;
  …
  &::before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw; /* или 99999px; */
    background: rgba(blue, 0.5);
    z-index: -1;
    transform: skewX(30deg);
  }
}

я хочу научиться, но уже на готовом к моему слайдер коду.

html {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

<div class="page">
  <div class="page__main"> ... </div>
  <div class="page__side"> ... </div>
</div>

<div class="page__main">
    <div class="section">
      <div class="section__body">
        ...
      </div>
    </div>
  </div>

/*==
 *== Page layout
 *== ======================================= ==*/

.page {
  @include make-row();

  &__main,
  &__side {
    @include make-col-ready();
  }

  &__side {
    z-index: 1;
  }
  
  // <…cut>

  @include media-breakpoint-up(lg) {
    &__main {
      @include make-col(9);
    }
    &__side {
      @include make-col(3);
      order: -1;
    }
  }
}

$default-scrollbar-width: 16px;

.section {
  @include make-row();
  position: relative;

  &__body { @include make-col-ready(); }

  &::before {
    z-index: -1;
    position: absolute;
    top: 0;
    right: percentage(6/9);
    width: 100vw;
    height: 100%;
    transform: translateX(50%);
    margin-right: ($default-scrollbar-width / 2);
  }
}

App.compensateWidthScrollbar = function () {
    let width  = this.getScrollbarWidth();
    let css    = '.section::before{margin-right:'+ (width / 2) + 'px';
    let style  = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    (document.head || document.getElementsByTagName('head')[0]).appendChild(style);
};

.input_boxes_flex {
    display: grid;
/*    grid-template-columns: 50% 50%; */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

const sm = $('.side-menu');

if (!sm.length) return;

sm.on('click', 'button', function () {
    let item = $(this).closest('li');

    item.toggleClass('open');
    item.children('ul').slideToggle();
    item.closest('ul').children('li').not(item).find('ul').slideUp();
});

sm.find('.open').children('ul').show();

<ul class="side-menu">
        <li class="open">
            <span><a href="#">Металлопрокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
            <ul class="side-menu__nested">
                <li class="open">
                    <span><a href="#">Сортовой прокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                    <ul class="side-menu__nested">
                        <li class="">
                            <span><a href="#">Квадратный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                            <ul class="side-menu__nested">
                                <li class=""><span><a href="#">Балка</a></span></li>
                                <li class=""><span><a href="#">Уголок</a></span></li>
                                <li class="current"><span><a href="#">Швеллер</a></span></li>
                                <li class=""><span><a href="#">Арматура</a></span></li>
                            </ul>
                        </li>
                        <li class="">
                            <span><a href="#">Круглый</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                            <ul class="side-menu__nested">
                                <li class=""><span><a href="#">Балка</a></span></li>
                                <li class=""><span><a href="#">Уголок</a></span></li>
                                <li class="current"><span><a href="#">Швеллер</a></span></li>
                                <li class=""><span><a href="#">Арматура</a></span></li>
                            </ul>
                        </li>
                        <li class="">
                            <span><a href="#">Шестигранный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                                <ul class="side-menu__nested">
                                    <li class=""><span><a href="#">Балка</a></span></li>

<h2 class="heading heading_red">
...
</h2>

<h2 class="heading heading_theme_red">
...
</h2>

<h2 class="heading heading_primary">...</h2>
<h2 class="heading heading_secondary">...</h2>

.block {
  $this: &;

  color: red;
  
  &__element { font-size: 12px; }

  &:hover &__element { transform: scale(1.1); }

  @media () {}

  //==
  //== Модификация какая-то
  //== ==========================

  #{$this}_mod {
    color: green;
    &__element { font-size: 16px; }
    @media () {}
  }
  #{$this}__mod:hover &__element { transform: scale(1.1); }

  //==
  //== Другая модификация
  //== ==========================

  &_mod { background: yellow; }
  @media () {}
}