Как подключить шрифт, чтобы sass не ругался?

Question

[Alexander]

При подключении шрифта таким образом, он не работает:

@font-face
	font-family: 'Roboto'
	font-weight: 400
	font-style: normal
	font-stretch: normal
	src: url('../fonts/roboto-400/roboto-400.eot')
	src: url('../fonts/roboto-400/roboto-400.eot#iefix') format('embedded-opentype')
	src: url('../fonts/roboto-400/roboto-400.woff') format('woff')
	src: url('../fonts/roboto-400/roboto-400.woff2') format('woff2')
	src: url('../fonts/roboto-400/roboto-400.ttf') format('truetype')
	src: url('../fonts/roboto-400/roboto-400.svg#roboto-400') format('svg')

При подключении шрифта таким образом, он работает:

@font-face
	font-family: 'Roboto'
	font-weight: 400
	font-style: normal
	font-stretch: normal
	src: url('../fonts/roboto-400/roboto-400.eot')
	src: url('../fonts/roboto-400/roboto-400.eot#iefix') format('embedded-opentype'),
	     url('../fonts/roboto-400/roboto-400.woff') format('woff'),
	     url('../fonts/roboto-400/roboto-400.woff2') format('woff2'),
	     url('../fonts/roboto-400/roboto-400.ttf') format('truetype'),
	     url('../fonts/roboto-400/roboto-400.svg#roboto-400') format('svg')

В обоих случаях используется sass и при компиляции файла со вторым вариантом подключения шрифта выдается ошибка, которая говорит, что перед url должны быть ":".
Как решить проблему?

Comments

[sergski]

если sass используете, зачем все это руками писать, миксины на все эти общие вещи есть

[Сергей delphinpro]

Синаксис на отступах в sass безнадёжно устарел. Используйте нормальный, со скобками, и всё будет работать.

Answer 1

[Вероника]

Миксин для scss https://gist.github.com/jonathantneal/d0460e5c2d5d...

Если писать именно на sass, там не должно быть переноса строки, всё в одну

Answer 2

[ljutaev]

Попробуй так в даном случае: src: url('../fonts/roboto-400/roboto-400.eot#iefix') format('embedded-opentype'), url('../fonts/roboto-400/roboto-400.woff') format('woff'), url('../fonts/roboto-400/roboto-400.woff2') format('woff2'), url('../fonts/roboto-400/roboto-400.ttf') format('truetype'),url('../fonts/roboto-400/roboto-400.svg#roboto-400') format('svg')
все одну строку.
Или подключи бурбон https://www.bourbon.io/docs/5.1.0/#font-face

Answer 3

[FeST1VaL]

Я использую mixin например...

@include font-face('Circe', '/template/fonts/Circe-Regular', normal, normal, woff2 woff ttf eot svg);
@include font-face('Circe', '/template/fonts/Circe-Light', 300, normal, woff2 woff ttf eot svg);
@include font-face('Circe', '/template/fonts/Circe-ExtraLight', 200, normal, woff2 woff ttf eot svg);
@include font-face('Circe', '/template/fonts/Circe-Thin', 100, normal, woff2 woff ttf eot svg);

Mixin ->

@function str-replace($string, $search, $replace: "") {
	$index: str-index($string, $search);

	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}

	@return $string;
}

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
	$src: null;

	$extmods: (
		eot: "?",
		svg: "#" + str-replace($name, " ", "_")
	);

	$formats: (
		otf: "opentype",
		ttf: "truetype"
	);

	@each $ext in $exts {
		$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
		$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
		$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
	}

	@font-face {
		font-family: quote($name);
		font-weight: $weight;
		font-style: $style;

		// font-display: block;
		src: $src;
	}
}

Answer 4

[nepiravno]

У меня получилось без ошибок в таком виде:

@font-face
	font-family: 'Myriad Pro Regular'
	src: url('../fonts/MyriadPro-Regular.eot')
	src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/MyriadPro-Regular.woff') format('woff'), url('../fonts/MyriadPro-Regular.ttf') format('truetype')
	font-weight: normal
	font-style: normal