Дмитрий

$screen-md-min: 768px
$screen-md-max: 960px

$middle_min-max: "(min-width:" $screen-md-min + ") and (max-width:" + $screen-md-max + ")"

@media #{$middle_min-max}
  color: red

Почитайте что такое тэг, класс и селектор. После этого станет понятно на сколько ваш вопрос простой, и на сколько долго нужно разжевывать почему вы получаете РАЗНЫЕ коллекции.
По поводу сообщений в консоли рекомендую почитать про приведение типов в JavaScript, в частности, как объекты конвертируются в строки.

https://jsfiddle.net/yv9jvwpk/

var passwordInputs = document.querySelectorAll('input[type=password]');
console.dir(passwordInputs);