Question

我是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，但我不知道我是否过度简化它或者是什么。

非常感谢任何帮助。

感谢。

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]，该代码块看起来有点太特定于我，因为我可能想要一个内联列表显示内联但它不是' t nav元素的一部分（可能是标签云或类别列表）。

这是我自己的库中的mixin，它只包含将列表转换为内联列表的最基本要素（当然，它也不必是列表，它可能是一堆带有{的容器{1}}如果我愿意的话，请加入其中：

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选择器根本不是mixin的一部分：预计mixin会从一些内部调用一种容器选择器。

以下是代码生成的CSS：

ul

看不到重复的选择器。这个mixin背后的魔力是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; }指令。大括号（@content）之间的所有内容都包含在{}中，只需要在适当的位置调用。

Sass：创建一个“复杂”混合，用于不同的媒体查询

1 个答案: