Syntax error at only_safari

[spacedog4]

I'm getting this syntax error at the mixin only_safari http://prntscr.com/fpoepl

I am using Koala 2.2 to compile the code

/*--- Only Safari ≥ 6.1 ---*/
// Dark magic, Don't touch
@function sf_func1($selector, $property) {
	@return '@media screen and(min-color-index:0)and(-webkit-min-device-pixel-ratio:0){@media{'+& $selector+'{'+$property;
}
@function sf_func2($value) {
	@return $value+'}}}';
}
@mixin only_safari($selector, $map){
	@at-root{
		@each $property, $value in ($map) {
			#{sf_func1($selector, $property)}: #{sf_func2($value)};
		}
	}
}

this line:

#{sf_func1($selector, $property)}: #{sf_func2($value)};

[KaylaPratt]

I am getting the same issue, which is unfortunate because safari 6-ish is exactly what I am trying to fix in my project.

Currently using Gulp-sass updated to the latest version, but upon compile I am getting the issue above:

`Details: status: 1 file: C:/Users/kpratt2/Documents/edu.emory.framework/source/css/scss/abstracts/_hax.scss line: 240 column: 38 formatted: Error: Invalid CSS after "...lue in ($map) {": expected 1 selector or at-rule, was "#{sf_func1($selecto" on line 240 of source/css/scss/abstracts/_hax.scss

         @each $property, $value in ($map) {

-------------------------------------^

messageFormatted: source\css\scss\abstracts\_hax.scss

Error: Invalid CSS after "...lue in ($map) {": expected 1 selector or at-rule, was "#{sf_func1($selecto" on line 240 of source/css/scss/abstracts/_hax.scss

         @each $property, $value in ($map) {

-------------------------------------^

messageOriginal: Invalid CSS after "...lue in ($map) {": expected 1 selector or at-rule, was "#{sf_func1($selecto"
relativePath: source\css\scss\abstracts\_hax.scss
domainEmitter: [object Object]
domain: [object Object]
domainThrown: false

`

[joseallona]

@spacedog4 or @KaylaPratt How did you solve it? Having the same issue here.

[bjoern-dev]

@spacedog4 , @joseallona or @KaylaPratt : any luck fixing this? I have the same Problem using "gulp-sass": "^3.1.0"

[lglasgow]

Yeah i am having the same issue.

[MaverickMartyn]

Just in case anyone else is looking for this, I've had success with this one:

@media not all and (min-resolution:.001dpcm){
	@supports (-webkit-appearance:none) {
		// Safari only rules here.
	}
}

Keep in mind, that I do not know how well it works, as I have not tested it thoroughly. Only tested on MacOS Mojave with Safari 12.1, and Windows 10 with Google Chrome 76.0.3809.132 x64. Sorry for necroing, if anyone finds that annoying.

[meoooh]

Is there any update?

[MaverickMartyn]

Is there any update?

I'm fairly certain this project is dead. There has been zero code contributions for the past 3 or so years.

[saadeghi]

Sorry everyone, I haven't used Sass for a long time and with today browsers, we barely need CSS hacks.
So, @MaverickMartyn is right, this project is dead. There is a pull request about safari issue tho. I can't test it but if anyone can confirm that it works, I can merge it.