AlexBelkevich
@AlexBelkevich
Нет нерешаемых задач. Есть деревянные клиенты

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

Здравствуйте! Раньше работал с 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)

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

Очень странно отформатировался вставленный код. У меня в файле все ровно..
  • Вопрос задан
  • 354 просмотра
Решения вопроса 1
andykov
@andykov
Shit happens
В чистом SASS нельзя так безответственно относится к табуляции - для изучения
Ошибка у вас том что у вас так:
display: flex
   align-items: center
   flex-basis: 320px
   min-width: 350px

а должно быть так
display: flex
align-items: center
flex-basis: 320px
min-width: 350px

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

Советую использовать скобки и точки с запятой, то бишь SCSS синтаксис, иначе будет боль.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
idtimeless
@idtimeless
Front-end Developer
у вас же вот даже ошибка подсвечивается
33 строка в файле app/sass/style.sass
>> flex-basis: 320px; } {

} { - вот ошибка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы