1

我是 Sass 的新手，而且由于我不是程序员，所以对一些概念进行梳理对我来说有点困难，所以这就是我寻求帮助的原因。

这对 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; }
  }
}

我正在设想像这样使用 mixin: @include navBar，但我不知道我是否过于简化它或什么。

任何帮助是极大的赞赏。

谢谢。

4

1 回答 1

3

对于您的代码块，这将是一种将其编写为 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;
}

如果您想自定义导航栏的外观，则必须编写重复的选择器（也许您希望在lis 上有边框或在悬停时使用特殊的 bg 颜色）。情况可能更糟，但你不会那样手工编写 CSS。

包含nav[role=navigation]在您的选择器中，该代码块对我来说看起来有点过于具体，因为我可能希望内联显示内容列表，但它不是导航元素的一部分（可能是标签云或列表类别）。

这是我自己的库中的一个 mixin，它只包含将列表转换为内联列表的最基本要素（当然，它也不必是列表，它可以是一个包含一堆divs 的容器，如果我想了）：

@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中，只需要在适当的地方调用即可。

于 2012-12-24T17:45:42.133 回答