Как с помощью sass сделать background-image?

Question

[DanilaBodrov]

Не могу понять как делать фоновое изображение с помощью SASS, не SCSS, а именно SASS. Подскажите пожалуйста.

Answer 1

[Tizi]

background-image: url()

P.s: не благодари

Comments

[DanilaBodrov]

Пробовал, не работает почему-то.

[Tizi]

DanilaBodrov, sass и scss это препроцессоры которые используют синтаксис css. он должен работать. Кидай код в песочницу, попробуем помочь.

[DanilaBodrov]

$colorOrange: #EC4500
$colorRed: red

=buttonOrange($background, $fontColor, $fontSize, $borderRadius, $width, $none)
	color: $fontColor
	background-color: $background
	font-size: $fontSize
	border-radius: $borderRadius
	width: $width
	border: $none

/* Первый экран */
.one-section
	background-image: url('img/section-one-fon.jpg')
	


.button
	background-color: $colorOrange
	color: #fff
	font-size: 18px
	width: 150px
	height: 50px
	&:hover
		opacity: 0.75

[DanilaBodrov]

Tizi, Задавал размеры, убирал внутри кавычки, пути правильные.

[Tizi]

DanilaBodrov, в браузере глянь, определяет ли стиль к .one-section
p.s: background-color задавать пробовал ?? просто для теста

[Tizi]

DanilaBodrov, попробуй такой путь

../img/section-one-fon.jpg

[DanilaBodrov]

Tizi, Заработало, но не понятно почему, подскажешь?

[Tizi]

DanilaBodrov, что именно изменил ??

[DanilaBodrov]

Tizi, ../ Но ведь путь img/section-one-fon.jpg тоже правильный

[Антон Спирин]

Для пути к изображениям лучше определить переменную:
$img-path: 'your/path';
и потом использовать в коде:

background-image: url($img-path + 'section-one-fon.jpg';)

[Tizi]

Да, дело в каталогах, файл ищет от текущего каталога, чтобы подняться на уровень выше, нужно написать две точки: ../
background-image: url('../img/pushkin.gif');Путь означает что нужно подняться в родительский каталог, зайти в папку img и найти файл pushkin.gif.

[DanilaBodrov]

Антон Спирин, А как поставить точки .. и / ? А то слетает.

[DanilaBodrov]

Tizi, Точно, я писал от index.html, а нет от sass, опять эта ошибка. Но зато новые фишки узнал. Всем спасибо.

[Saintcoder]

Антон Спирин, Ваш вариант работает, огромное спасибо)

spoiler

Answer 2

[ой всё]

SASS и SCSS - это только препроцессоры, которые позволяют вам писать структурированный css

но сам код css остается в силе, и фоновое изображение делается везде одинаково