Как стилизовать элемент на основе изменений другого элемента без JavaScript?

В чистом CSS (как и в SASS) вы можете ориентироваться на одноуровневые элементы с помощью оператора +. Например:

.form-select.error + .select-input-wrap input {
    border: 3px solid red;
}

Связанная песочница: http://www.cssdesk.com/r8Dh8

Если ваши элементы select и div имеют общего родителя, вы можете стилизовать на основе этого:

.parent .error + .select-input-wrap input {
  border: 1px solid red;
}

<div class = "parent">
  <select id = "some-sel" class = "form-select error">  </select>
  <div class = "select-input-wrap">
    <input class = "select-input" name = "select-input" />
  </div>
  
    <select id = "another-sel" class = "form-select">  </select>
  <div class = "select-input-wrap">
    <input class = "select-input" name = "select-input" />
  </div>
</div>

Для версии SASS просто уберите лишние знаки препинания!

Вам нужно стилизовать родственный элемент, попробуйте приведенный ниже код в файле SASS.

$red: #f00;

.error {

  &.form-select {

    + .select-input-wrap {

      > .select-input {
        border: 1px solid $red;
      }
    }
  }
}

Это css-решение. Надеюсь, вы сможете преобразовать структуру в sass.

.error~.select-input-wrap input{
  border: solid 1px red;
}

<select class = "form-select error"></select>
<div class = "select-input-wrap">
  <input class = "select-input" name = "select-input" />
</div>