не применяется display в media sass

При использовании & - значения применяются только к св-ву flex-direction: column, display игнорирует.

@media (max-width: 550px) 
.header
 &_btn
  display: block
 &_menu
  flex-direction: column
  display: none

css

 @media (max-width: 550px) {
.header_btn {
 display: block; }
.header_menu {
 flex-direction: column;
 display: none; } }

если же в sass писать через полное название то пашет. Что это может быть

@media (max-width: 550px) 
.header
 .header_btn
  display: block
 .header_menu
  flex-direction: column
  display: none

в сss

@media (max-width: 550px) {
.header .header_btn {
 display: block; }
.header .header_menu {
 flex-direction: column;
 display: none; } }