A
A
Alexander Belkevich2016-11-08 13:26:55
css
Alexander Belkevich, 2016-11-08 13:26:55

Why does gulp throw an error when generating SASS?

Hello! I used to work with CSS only, now I decided to get hooked on SASS. Please tell me what am I doing wrong

@import "normalize"

body
  font-family: Arial

  .content
    max-width: 980px
    margin: 0 auto

  header
    .header-line
      height: 10px
      display: flex
      margin-bottom: 5px
      &-part1
        background: rgba(157, 231, 234, 1)
        width: 30%
        height: 10px
      &-part2
        background: rgba(17, 96, 137, 1)
        width: 40%
        height: 10px
      &-part3 
        background: rgba(121, 78, 122, 1)
        width: 30%
        height: 10px
    .header-blocks
      max-width: 980px
      display: flex
      .logo
        display: flex
          align-items: center
          flex-basis: 320px
          min-width: 350px
         .logo-left
          	a
            	margin-right: 10px
      				display: block
      		.logo-right
      			.logo-right-big
      				display: block
              font-family: 'Times New Roman'
              font-size: 48px
              color: #431845
          .logo-right-mini
            color: #083045
              font-size: 11px
              font-weight: bold
              display: block
              margin-top: -6px

When compiling, an error occurs
events.js: 141
throw er; // Unhandled 'error' event
^
Error: app\sass\style.sass
Error: Invalid CSS after "...basis: 320px; }": expected "}", was "{"
on line 33 of app/sass/ style.sass
>> flex-basis: 320px; } {
----------------------------^
at options.error (D:\Projects\Gloria Sweet\gloria-sweet\node_modules\ gulp-sass\node_modules\node-sass\lib\index.js:292:26)
What is wrong? Thank you!
The inserted code was formatted very strangely. I have everything in the file..

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey B., 2016-11-08
@AlexBelkevich

In pure SASS, you can’t be so irresponsible about tabs - for study
The error you have is that you have this:

display: flex
   align-items: center
   flex-basis: 320px
   min-width: 350px

and it should be like this
display: flex
align-items: center
flex-basis: 320px
min-width: 350px

Those. you inherit from the parent
. I advise you to use parentheses and semicolons, that is, SCSS syntax, otherwise it will be a pain.

A
Alex Zeit, 2016-11-08
@idtimeless

you even have an error highlighted
line 33 in the file app/sass/style.sass
} { - this is the error

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question