CSS Модули, Композиция во вложенном классе - PullRequest
Новая
       36

CSS Модули, Композиция во вложенном классе

0 голосов
/ 09 сентября 2018

Я работаю над проектом, в котором есть основной файл style.scss для ряда компонентов. Я хочу реструктурировать код так, чтобы у каждого компонента была своя папка (index.js, styles.scss). Есть вложенный класс, который использует класс из другого компонента, и теперь, когда мне нужно отделить все стили, эта часть нарушена. Я не могу использовать композицию, так как это вложенный класс. Какие еще подходы я могу использовать?

Код выглядит так: 

// Component A styless.scss

.component-a-class {

}

// Component B styless.scss 

.component-b-class{

.component-a-class {

  }
}

1 Ответ

0 голосов
/ 09 сентября 2018

Используйте директиву Sass @import для импорта внешних классов. Ваш код станет примерно таким: 

// ComponentA/styless.scss

.component-a-class {
  ...
}

// ComponentB/styless.scss 

.component-b-class{
    @import "../ComponentA/styless.scss"
}

Это добавит .component-a-class в .component-b-class как вложенное правило.

Редактировать: Чтобы импортировать стиль, а также иметь возможность изменять одно из значений его свойств, вы должны использовать Sass mixins : 

// ComponentA/styless.scss

@mixin component-a-class($width: 100) {
    .component-a-class {
        width: $width + px;
    }
}

@include component-a-class();

// ComponentB/styless.scss

@import "../ComponentA/style.scss";

.component-b-class{
    @include component-a-class(500);
}

Это даст вам то, что вы хотите, хотя и не идеально. Полученный скомпилированный файл ComponentB/styless.css будет включать все , записанное в ComponentA/styless.scss, поскольку директива @import является функцией «все или ничего» (выборочный импорт отсутствует). Результат будет выглядеть так: 

// ComponentB/styless.css (compiled)

.component-a-class {
  width: 100px;
}

.component-b-class .component-a-class {
  width: 500px;
}
...