0

I wanna create a rule for safari browser only with sass. According to this answer I need

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)

Notice there's no space after 2nd and, otherwise it triggers chrome. So somewhere in my-file.sass I do the following:

$safari-only: '(min-color-index:0) and(-webkit-min-device-pixel-ratio:0)'

@media screen and #{$safari-only}
    body
        background-image: linear-gradient(green 0%, red 100%) !important

But this thing compiles into 

@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
  body {
    background-image: linear-gradient(green 0%, red 100%) !important;
  }
}

Note, there IS a space after 2nd and. Here's the demo

Another thing I would like to know if I can create a @safari-only mixin. For example:

@mixing safari-only
  $safari-only: '(min-color-index:0) and(-webkit-min-device-pixel-ratio:0)'
  @media screen and #{$safari-only}

@include safari-only
  body
    background-image: linear-gradient(green 0%, red 100%) !important

This produces an error that the mixin doesn't have a body

So I would like to know:

  1. How do I tell sass not formatting code instead of me?
  2. How can I create a first level selector as a mixin

p.s. I'm using Sass 3.4.21 (Selective Steve)

Best regards,

Community
  • 1
  • 1
deathangel908
  • 8,601
  • 8
  • 47
  • 81

1 Answers1

-1

You can force formatting in SASS with #{}

$safari-only: #{'(min-color-index:0) and(-webkit-min-device-pixel-ratio:0)'}
AJFarkas
  • 2,929
  • 1
  • 17
  • 15
  • Could u please edit your answer according my needs? I need to create literal for selector, not for value. `background` is just a highlight example to clear see the difference between in chrome and safari. And as I wrote I used `#{$safari-only}` it doesn't work! If I replace a variable with its value it doesn't change a thing :( – deathangel908 Jul 06 '16 at 23:15
  • As I wrote in the question, it doesn't work! it complies into `...) and (-web...`see the `space` after **and**? It breaks all functionality of this browser specific rule. I think you just didn't read my question :) – deathangel908 Jul 06 '16 at 23:19
  • Could you please check the demo I added ? http://www.sassmeister.com/gist/3ddf25510ea9b0e5d9e55f6ac9929ea7 – deathangel908 Jul 06 '16 at 23:27