Sass @extend против добавления класса в компонент - PullRequest
Новая
       49

Sass @extend против добавления класса в компонент

0 голосов
/ 12 июня 2018

У меня есть проект, сгенерированный с помощью create-react-app с sass-компиляцией ( doc ) и foundation-sites framework.

Допустим, у меня есть компонент, который рендерит что-то вроде этого: 

<div class='mycomp grid-x'>
  <div class='mycomp__element cell small-6'>1</div>
  <div class='mycomp__element cell small-6'>2</div>
</div>

Я подумал, что, может быть, было бы чище, если бы я переместил базовые классы разметки в sass так: 

.mycomp
  @extend .grid-x
  &__element
    @extend .cell
    @extend .small-6

Это не очень красиво, но, по крайней мере, мне не нужно думать оклассы разметки в js-коде.И если я хочу в основном изменить css-framework, мне нужно будет отредактировать файлы .sass.

Так что мой вопрос: «Это хорошая мысль?».И если это как я подхожу к этому?Так как sass компилирует каждый файл в соответствующий .css, мне придется собрать их все вместе в один большой .css и удалить все import './Mycomp.css' из js-файлов, я думаю

1 Ответ

0 голосов
/ 12 июня 2018

Двумя основными преимуществами @extend являются:

  1. использование наследственных функций CSS / sass
  2. поддержание чистоты HTML-разметки и запись всех беспорядочных стилей только в файлах стилей

См. Эту статью https://www.sitepoint.com/the-benefits-of-inheritance-via-extend-in-sass/

...