Sass：创建一个；复杂的；用于不同媒体查询的mixin

我是Sass的新手，因为我不是程序员，所以对一些概念的理解对我来说有点困难，所以这就是我寻求帮助的原因

这应该是一个简单的一个为你萨斯大师

我需要制作一个mixin，可以在不同的媒体查询中使用。该混音器用于现场的主导航

scs

如下所示：

/*Nav bar*/
a.menu-link { display:none; }       
.js nav[role=navigation] { max-height:0; }      
nav[role=navigation] ul { margin:0 0 0 -0.25em; border:none;
  & li { display:inline-block; margin:0 0.25em;
       & a { border:none; }
  }
}

ul.drop-menu {
    margin: 0;
    padding: 0;

    a {
        color: red;
    }

    @include inline-menu {
        border: 1px solid red;
        > a {
            padding: .5em 1em;
            display: block;
        }

        &:hover > a {
            background: red;
            color: orange;
        }

        @include drop-menu {
            border: 1px solid;
            padding: 1em 1em 1em 2em;
            background: orange;
            color: red;
            margin: 0;
            left: -1px;
            z-index: 1;
        }
    }
}

我设想像这样使用mixin：

@include-navBar

，但我不知道我是否过于简单化了

非常感谢您的帮助

---

谢谢。

对于您的代码块，这将是作为mixin编写的一种方式：

@mixin navBar {
    a.menu-link { display:none; }

    .js & { max-height: 0; }

    ul { // note that the & isn't necessary here...
        margin: 0 0 0 -0.25em;
        border: none;

        li {
            display: inline-block;
            margin: 0 0.25em;
            a { border: none; }
        }
    }
}

nav[role=navigation] {
    @include navBar;
}

如果您想自定义导航栏的外观，则必须编写重复的选择器（可能您希望在

li

s上有边框，或者悬停时有特殊的背景颜色）。可能更糟，但你不会用那种方式手工编写CSS

在选择器中包含了

nav[role=navigation]

，这段代码对我来说有点太具体了，因为我可能想要一个内联显示的东西列表，但它不是nav元素的一部分（可能是标记云或类别列表）

这是我自己的库中的一个mixin，它只包含将列表转换为内联列表的最基本要素（当然，它也不一定是一个列表，如果我愿意，它可以是一个包含一堆

div

s的容器）：

我会这样调用它：

/*Nav bar*/
a.menu-link { display:none; }       
.js nav[role=navigation] { max-height:0; }      
nav[role=navigation] ul { margin:0 0 0 -0.25em; border:none;
  & li { display:inline-block; margin:0 0.25em;
       & a { border:none; }
  }
}

ul.drop-menu {
    margin: 0;
    padding: 0;

    a {
        color: red;
    }

    @include inline-menu {
        border: 1px solid red;
        > a {
            padding: .5em 1em;
            display: block;
        }

        &:hover > a {
            background: red;
            color: orange;
        }

        @include drop-menu {
            border: 1px solid;
            padding: 1em 1em 1em 2em;
            background: orange;
            color: red;
            margin: 0;
            left: -1px;
            z-index: 1;
        }
    }
}

现在，这样做的好处是你不会有很多（如果有的话）重复选择器。如果您想将边框添加到

ul

，它将完全公开给您，因为

ul

选择器根本不是mixin的一部分：可以预期，mixin是从某种容器选择器中调用的

以下是代码生成的CSS：

ul.drop-menu {
  margin: 0;
  padding: 0;
}

ul.drop-menu a {
  color: red;
}

ul.drop-menu > li {
  display: inline-block;
  border: 1px solid red;
  position: relative;
}

ul.drop-menu > li > a {
  padding: .5em 1em;
  display: block;
}

ul.drop-menu > li:hover > a {
  background: red;
  color: orange;
}

ul.drop-menu > li ul {
  display: none;
}

ul.drop-menu > li:hover ul, ul.drop-menu > li.active ul {
  display: block;
  position: absolute;
  border: 1px solid;
  padding: 1em 1em 1em 2em;
  background: orange;
  color: red;
  margin: 0;
  left: -1px;
  z-index: 1;
}

ul.drop-menu > li a {
  white-space: nowrap;
}

---

看不到重复的选择器。这个mixin背后的魔力是

@content

指令。大括号（

{}

）之间的所有内容都包含在

@content

中，只需在适当的地方调用即可。

这正是我想要的，额外的解释和视图很棒。非常感谢你的帮助。