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

Question

我是Sass的新手，因为我不是程序员，所以对我来说，包装一些概念对我来说有点困难，所以这就是为什么我在寻求帮助。

对于你来说，这应该是一件容易的事。

我需要做一个mixin，我可以在不同的媒体查询中使用。这个mixin是该网站的主要导航。

的scss看起来是这样的：

/*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; } 
    } 
} 

我用这样的混入构想：@include navBar，但我不知道如果我简单化，或什么。

任何帮助，非常感谢。

谢谢。

Answer 1

为您的代码块，这将是写作的一种方式，作为一个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上有边框或在悬停时有特殊的bg颜色）。它可能会更糟糕，但是你不会用这种方式手动编写你的CSS。

随着你的选择列入nav[role=navigation]，代码块看起来有点太具体给我，因为我可能想的东西的清单显示嵌入式但它不是一个导航元素的一部分（可能这是一个标签云或一个类别列表）。

这是一个来自我自己的库的mixin，它只包含将列表变成内联列表的最基本要素（当然，它也不一定是列表，它可能是一个包含一堆div，它出现，如果我想）：

@mixin inline-menu($type: inline, $child: li) { 
    @if $type == float { 
     overflow: hidden; 
    } 

    > #{$child} { 
     @if $type == float { 
      float: left; 
      //list-style: none; 
     } @else { 
      display: inline-block; 
     } 

     @content; 

     a { white-space: nowrap } 
    } 
} 

我会调用它是这样的：

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选择器根本不是混入的一部分：预计混入是从某种容器选择器中调用的。

下面是一个代码生成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之内，只需在适当的位置调用它即可。