Search code examples
htmlcsssassless-mixinsgridle

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

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?

Solution

  • 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>