Как при переносе класов с html в scss зделать так чтобы над ними были полные названия?

При переносе классов из HTML в SCSS, вы можете использовать полные названия классов, чтобы сохранить их структуру и иерархию. Для этого можно использовать вложенность в SCSS.

Например, если у вас есть следующий HTML-код:

<div class="container">
  <div class="header">
    <h1 class="title">Заголовок</h1>
  </div>
  <div class="content">
    <p class="text">Пример текста</p>
  </div>
</div>

Вы можете перенести классы в SCSS с полными названиями, используя вложенность:

.container {
  
  .header {
    
    .title {
      /* CSS стили для заголовка */
    }
  }
  
  .content {
    
    .text {
      /* CSS стили для текста */
    }
  }
}

Таким образом, при обработке SCSS-файла в CSS, получившийся CSS будет иметь полные названия классов:

.container .header .title {
  /* CSS стили для заголовка */
}

.container .content .text {
  /* CSS стили для текста */
}

Использование полных названий классов позволяет сохранить структуру и иерархию элементов вашего HTML, а также делает код более понятным и легким в поддержке и обслуживании.