是否可以创建一个检测当前 URL 的 CSS/SASS mixin？答案

【问题标题】：Is it possible to create a CSS/SASS mixin that detects current URL?是否可以创建一个检测当前 URL 的 CSS/SASS mixin？
【发布时间】：2017-11-26 22:23:56
【问题描述】：

我刚刚发现 CSS 的 @media 是一个 mixin，它采用不同的参数（如宽度/高度/方向等）来确定使用的设备，然后 mixin 应用一些基本的 CSS 样式。

我的问题是是否可以创建一个非常相似的 mixin，例如 @address，它能够确定当前 URL，然后应用一些基本的 CSS 样式。 可以使用的东西这样：

@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;
    }
}

如果可能的话，我该如何创建这样的 mixin？如果不是，为什么？

【问题讨论】：

不，css 无法检测到这一点——但您可以使用 JavaScript 根据位置向 body 或 html 标签添加一个类。

标签： html css sass less-mixins gridle

【解决方案1】：

没有。这显然是不可能的。如果它对您有帮助，您只能捕获具有 href 属性的元素。我正在分享关于使用链接的原因。

p a {
  color: #333  
}

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

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

【讨论】：