Is it possible to create a CSS/SASS mixin that detects current URL?

Question

I just found out CSS's @media is a mixin that takes different parameters like width/height/orientation etc. to determine what device is used and then the mixin applies some basic CSS styles.

My question is whether it is possible to create a very similar mixin called for example @address that would be able to determine current URL and then apply some basic CSS styles. Something that could be used this way:

@address ("https://stackoverflow.com") {    

    /*if URL is https://stackoverflow.com then apply following styles*/

    h1 {
        color: red;
        font-size: 2.1em;
    }

    #myElement {
        background: #FFF;
        border: 1px solid #000;
    }
}

If this is possible How do I create such mixin? If not, why?

No, css has no way to detect this — but you could use JavaScript to add a class to the body or html tag based on the location. — Blazemonger, Nov 26 '17 at 02:31

score 0 · Accepted Answer · answered Nov 26 '17 at 14:23

No. It is clearly not possible. If its helpful for you, you can only catch elements with href attribute. I'm sharing cause its about using links.

p a {
  color: #333  
}

p a[href="https://stackoverflow.com"]{
  text-decoration: none;
}

<p>
  <a href="https://stackoverflow.com">stackoverflow.com</a>
</p>

Is it possible to create a CSS/SASS mixin that detects current URL?

1 Answers1