Почему gulp выдает ошибку при генерации SASS?

Question

[Александр Белькевич]

Здравствуйте! Раньше работал с CSS только, сейчас решил на SASS подсесть. Подскажите, пожалуйста, что я не так делаю

@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

При комляции выходит ошибка
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:\Проекты\Gloria Sweet\gloria-sweet\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:292:26)

Что неправильно? Спасибо!

Очень странно отформатировался вставленный код. У меня в файле все ровно..

Answer 1

[Андрей Б.]

В чистом SASS нельзя так безответственно относится к табуляции - для изучения
Ошибка у вас том что у вас так:

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

а должно быть так

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

Т.е. вы наследуете родителя

Советую использовать скобки и точки с запятой, то бишь SCSS синтаксис, иначе будет боль.

Comments

[Александр Белькевич]

Да вот именно, что в SB3 у меня с отступами вроде хорошо. Но вообще да, наверное, лучше SCSS, иначе непонятно что...

Answer 2

[Alex Zeit]

у вас же вот даже ошибка подсвечивается
33 строка в файле app/sass/style.sass
>> flex-basis: 320px; } {

} { - вот ошибка

Comments

[Александр Белькевич]

Так а в коде выше где это...? Там же нет фигурных скобок

[Alex Zeit]

Александр Белькевич: у вас код отформатировался при вставке
посмотрите в своем файле
где то в этом районе))
.logo
display: flex
align-items: center
flex-basis: 320px
min-width: 350px

[Alex Zeit]

www.sassmeister.com можете тут свой код с файла кинуть и глянуть - где у вас ошибка

[Александр Белькевич]

Alex Zeit: там, я как понял, можно писать только с двоиточиями и скобками. А синтаксис табами он не воспринимает..

[Александр Белькевич]

Alex Zeit: И если я .logo убираю, то на другое место ругается.. Мне кажется, просто я систематически может неправильно что-то делаю

[Андрей Б.]

Александр Белькевич для справки ) dl2.joxi.net/drive/2016/11/08/0000/2132/47188/88/b...

[Александр Белькевич]

Андрей Б.: премного благодарен!