Сергей delphinpro

С тех пор как появился autoprefixer вендорные префиксы в исходном коде не нужны. А в продуктовый билд автоматически добавится то что актуально на момент сборки исходя из вашей настройки списка поддерживаемых браузеров.
По факту не особо и нужны уже. Старые свойства давно уже реализованы без префиксов. А новые реализуются сразу без префиксов и пока не готовы, скрываются под флагом experimental

var() не нужен при объявлении свойства

:root {
  --background-gradient-end: #{$end-gradient-light};
  --background-gradient-start: #{$start-gradient-light};
}

gulp.watch('./dist/scss/*.scss'
Вы следите только за корневыми файлами. Если у вас есть поддиректории, то изменения в них не отслеживаются.

/dist
  /scss
    main.scss - отслеживается
    /blocks
      header.scss - не отслеживается

Вот так будет работать для всех файлов:

gulp.watch('./dist/scss/**/*.scss', gulp.series('sass'));

Просто задать ширину блока со слайдером

<div class="section">
  <div class="container">
    <div class="slider">
      
    </div>
  </div>
</div>

.section {
  overflow: hidden;
}
.container {
  width: 1000px;
  margin: auto;
  padding: 10px 0;
  background: green;
}
.slider {
  height: 100px;
  background:red;
  width: calc(50% + 50vw);
}

В простейшем случае попилили всё на ячейки и сделали на гридах.



Остальное зависит от дополнительных условий.

У вас нет градиента. А это сильно упрощает задачу.
<div class="div">75</div>

.div {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30px;
}
.div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 20px solid red;
  border-color: red red green green;
  border-radius: 100%;
  transform: rotate(45deg);
  pointer-events: none;
}

Custom properies не работают в выражениях медиазапросов. Да и в любых других.
Их можно использовать только в качестве значения свойства элемента (селектора).

К размышлению. Как должен был бы повести себя следующий код:

:root {
  --small-screen: 500px;
}
.sidebar { background: red; }

@media (max-width: var(--small-screen)) {
  :root {
    --small-screen: 1000px;
  }
  .sidebar { background: green; }
}

Это путь от выходного css файла, а не от sass файла, в котором он написан.
Чувствуете разницу?

В sass до сих пор не встроен резолвер путей к файлам, в отличие от других препроцессоров.
То есть пути к файлам никак не обрабатываются, и отправляются на выход как етсь.
Это проблема.
Например у вас такая структура:

dist/
  css/
    style.css
  images/
    image.png
src/
  images/
    image.png
  sass/
    blocks/
      logo.scss
    styles.scss

пока вы пишете прямо в styles.scss, все отлично
.logo { background: url(../images/image.png); }
Путь совпадает и в ваших исподниках, и в билде. Шторм радостно выдает подсказки.

Как только вы решите писать в отдельном файле blocks/logo.scss, путь к картинке в исходниках становится другим, но в билде остается прежним. Шторм не может выдать подсказку.
В других препроцессорах можно писать исходный путь
.logo { background: url(../../images/image.png); }
Они преобразуют путь на выходе до корректоного.
В sass - нет.

Если вы используете webpack в качестве сборщика, то для него есть resolve-url-loader, который худо-бедно исправляет данных недостаток.

Другое решение - использовать пути от корня.

.logo { background: url(/images/image.png); }

Тут шторм сможет подсказывать. Нужно только папку dist пометить как Resource root.

https://yandex.ru/search/?clid=1882628&text=css+ог...

https://qna.habr.com/q/391993
https://codepen.io/NotLogo/pen/gLBWVe
https://codius.ru/articles/Как_сверстать_оглавлени...

Вы знаете, что означает знак ">" в селекторе? Загуглите. И ваша проблема решится

Использовать экстенды

%cursor-pointer {
  cursor:pointer;
}

.product {
  &.grid .grid-product__text:not(._price),
  &.grid .grid-product__text._price,
  &.grid .grid-product__text .grid-product__text_inner {
    color: inherit !important;
  }

  &._photo-name-transition {
    ._name,
    ._image {
      @extend %cursor-pointer;
    }
  }

  &._name-transition {
    ._name {
      @extend %cursor-pointer;
    }
  }

  &._photo-transition {
    ._image {
      @extend %cursor-pointer;
    }
  }
}

Output:

.product._photo-name-transition ._name,
.product._photo-name-transition ._image,
.product._name-transition ._name,
.product._photo-transition ._image {
  cursor: pointer;
}

.product.grid .grid-product__text:not(._price),
.product.grid .grid-product__text._price,
.product.grid .grid-product__text .grid-product__text_inner {
  color: inherit !important;
}

Вместо этих заморочек, можно прогнать код через какой-нибудь css-оптимизатор, который умеет группировать свойства. Тут главное правильно его настроить.

Какой-то странный вопрос. Вы точно про использование :root спрашиваете, или всё-таки про css-переменные?
Переменные вы используете правильно.
Что касается :root, то он здесь вообще ни причем. C тем же успехом можно использовать селекторы html{} или body{}, а в данном случае и .Beeuwuge{}.

https://developer.mozilla.org/en-US/docs/Web/CSS/p...

.mask {
  pointer-events: none;
}