Каковы возможные способы перезаписи переменных файлов SCSS, загружаемых через файлы JavaScript?

Скажем, у меня есть компонент, состоящий из одного файла JavaScript для поведения, одного файла шаблона HTML и одного файла SCSS для внешнего вида.

Мы используем Webpack для загрузки JavaScript компонента в основном JavaScript приложения (например, через require('./path/to/the-component.js')). И мы используем компонент JavaScript для загрузки его файла SCSS (через require('./the-component.scss')).

Файл SCSS компонента содержит переменную, которая имеет значение по умолчанию (например, минимальная высота: $min-height: 400px).

Если мне не нравится 400px во всех применениях компонента: Как я могу перезаписать такую переменную (например, в файле SCSS приложения *), чтобы настроить $min-height на 500px? Конечно, поскольку не стоит нарушать принцип разделения принципов, компонент не должен делать никаких предположений о том, как организованы его окружающие каталоги.

До сих пор я не нашел решения этой проблемы. Но я уверен, что есть люди, которые это сделали.

*) и как (где) я должен загрузить такой файл (обычно, я загружаю app.scss через app.js)

Ответ 1

Я думаю, что невозможно достичь того, чего вы хотите с помощью scss, просто потому, что все экземпляры компонента будут иметь одинаковые стили в конце (если вы не используете несколько классов, таких как Tyler Biscoe). В итоге у вас будет один статический файл css для компонента, и все экземпляры будут делиться им.

Рассмотрим рефакторинг вашего scss, чтобы извлечь $min-height из scss, сделать его параметром компонента и использовать встроенные стили для его применения. Для React это выглядело бы примерно так:

import './MyComponent.scss';

class MyComponent extends Component {
  render() {
    return (
      const divStyle = {
        minHeight: this.props.minHeight
      }
      <div style={divStyle}></div>
    );
  }
}

Затем вы можете просто добавить компонент с любой шириной:

class App extends Component {
  render() {
    return (
      <MyComponent minHeight="300px"/>
      <MyComponent minHeight="400px"/>
      <MyComponent minHeight="500px"/>
    );
  }
}

Таким образом вы поднимаете параметр min-height из MyComponent и указываете его более высокие компоненты.

UPDATE:

Я думаю, вы можете снять $min-height с mycomponent.scss и установить его в родительском. Скажем, вы должны установить $min-height для .my-component класса css, в родительском scss файле вы можете сделать что-то вроде этого:

.large-component > .my-component {
  min-height: $large-min-height;
}

.small-component > .my-component {
  min-height: $small-min-height;
}

Но опять же это не позволяет передать параметр компоненту, а только устанавливать стили на основе родительских контейнеров компонента.

Ответ 2

Будет ли миксин помочь вам здесь? Скажем, например,

@mixin set-min-height($min-height) {
  min-height: $min-height;
}

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

.app__view { @include set-min-height(400px); }

.component__view { @include set-min-height(500px); }

Я считаю, что этот подход лучше, чем перезаписывать переменную, поскольку вы каким-либо образом настроите свойство на свои специфические для вашего компонента правила.

Ответ 3

Моя мысль заключалась бы в добавлении второй переменной min-height. $min-height-2 например, и присваивая ему другое значение. Затем применяя это к другому классу, которое вы бы выборочно назначили элементам, которые вы хотите иметь другую минимальную высоту.

$min-height: 400px;
$min-height-2: 500px;

.some-element {
  min-height: $min-height;

  &.larger-element {
    min-height: $min-height-2;
  }

}

HTML:

<div class="some-element"> This element has min-height 400px</div>
<div class="some-element larger-element">This element has min-height 500px</div>