How to get rid of errors in SASS?

In the mobile version the menu the menu class is added class menu_state_open
Html code:
<header>
 <div class="container header__container">
 <img class="header__logo" src="./images/logo.jpg">
 <div class="menu header__menu">
 <div class="menu__icon">
 <span class="menu__span"></span>
 <span class="menu__span"></span>
 <span class="menu__span"></span>
 <span class="menu__span"></span>
</div>

 <div class="menu__top">
 <a class="menu__links-item" href="/">Web Dev</a>
 <a class="menu__links-item" href="/">Design</a>
 <a class="menu__links-item" href="/">Writing</a>
 <a class="menu__links-item" href="/">Admin support</a>
 <a class="menu__links-item" href="/">View all category</a>
</div>

 <div class="menu__top">
 <a class="menu__links-item" href="/">Login</a>
 <a class="menu__links-item" href="/">Sign In</a>
 <a class="menu__links-item post-button" href="/">Post a job</a>
</div>
</div>
</div>
 </header>


Sass code:
header
 display: flex
 align-items: center
 width: 100%
 height: 105px
 z-index: 1001
 position: fixed

.header__container
 display: flex

.header__logo
 max-width: 55px
 width: 100%
 height: 100%
 display: block
 margin-right: 40px

.header__menu

.menu__icon
 display: none
 width: 45px
 height: 35px
 position: relative
 cursor: pointer

 .menu__span 
 display: block
 position: absolute
 height: 9px
 width: 100%
 background: $blue-color
 border-radius: 9px
 opacity: 1
 left: 0
 transform: rotate(0deg)
 transition: .25s ease-in-out

 &:nth-child(1) 
 top: 0px

&:nth-child(2)
 top: 13px

&:nth-child(3)
 top: 13px

 &:nth-child(4) 
 top: 26px
.menu__top
 .menu__links-item 
 display: inline-block
 color: #404f54
 font-family: "opensans-regular"
 font-size: 14px
 line-height: 30px
 padding: 0 10px
 text-transform: uppercase
 text-decoration: none

 &:hover 
 color: $blue-color

.post-button
 padding: 10px 40px
 border: 2px solid #b3b9bb
 border-radius: 30px
 color: #b3b9bb
 margin-left: 25px
 transition: all 0.1 s linear 0.1 s

&:hover
 background-color: #b3b9bb
 text-decoration: none
 color: #fff

.menu_state_open
.menu__icon
.menu__span
&:nth-child(1)
 top: 18px
 width: 0%
 left: 50%

&:nth-child(2)
 transform: rotate(45deg)

&:nth-child(3)
 transform: rotate(-45deg)

&:nth-child(4)
 top: 18px
 width: 0%
 left: 50%
.menu__top
 display: block


When processing a sass error is displayed as in the screenshot. What could be the problem? 5ccc0af892ba5317451755.png
March 20th 20 at 11:36
1 answer
March 20th 20 at 11:38
Solution
.menu__icon
display: none

Place the indents correctly in sass they matter. On you there's worse all.
The indentation is correct, just there is no editor for code sass, only css. And it's sass, not scss. - Juliet_Hane commented on March 20th 20 at 11:41
So @sim3x you gave the correct answer about tabs and spaces. - kamren_Hal commented on March 20th 20 at 11:44

Find more questions by tags CSSSass