Модули CSS, Состав во вложенном классе

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

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

// Component A styless.scss

.component-a-class {

}

// Component B styless.scss 

.component-b-class{

.component-a-class {

  }
}

Попробуйте посмотреть это youtube.com/watch?v=GTBaQ2DcGUk

Brad 11.09.2018 22:04
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...
0
1
1 382
1

Ответы 1

Используйте директиву 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 миксины:

// 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;
}

Кажется, это не работает. Я забыл упомянуть, что я также хочу изменить ширину всего component-a-class с component-b-class

slwjc 09.09.2018 18:49

Обновлено, чтобы включить дополнительные пояснения.

Adam 09.09.2018 23:01

Другие вопросы по теме