8

我正在尝试使用 Less 或 Sass 使我的 bootstrap 2.1 标记更具语义。考虑 Bootstrap 标准导航栏的以下标记：

<header id="main-nav" class="navbar navbar-static-top" role="banner">
    <nav class="navbar-inner" role="navigation">
        <div class="container">

            <!-- Collapse nav button -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Nav -->
            <nav id="navlinks" class="nav-collapse collapse pull-right">
                <ul class="nav nav-pills">
                    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </nav>
        </div>
    </nav>
</header>

显然，将 DIV 更改为更具语义的 HTML 5 标记很容易，但从标记中删除类链则更加困难。如果您要使用 mixin，例如：

header #main-nav {
    .navbar;
    .navbar-static-top;
}

以下定义不起作用，因为复合类不受影响：

.navbar .btn-navbar {
    display: none;  // hide button in full width (Why a compound class? Redundant?)
}

理想情况下，如果 less 或 sass 有这样的语法会很好：

header#main-nav $= .navbar;  // copy .navbar definitions using #main-nav as the name

或者

header#main-nav @= .navbar;  // rename .navbar definitions to #main-nav

这可以做到吗？如果没有，我怎样才能实现语义标记？

4

1 回答 1

5

正如你所说，没有别名，但是 LESS 和 Sass 都可以这样写：

.navbar, #main-nav {
    .collapse {}
}

这将输出如下：

.navbar .collapse, #main-nav .collapse {}

Sass 有一个独特的指令 @extend，它的功能如下：

%common-styles {
    .collapse {}
}

.navbar {
    // unique navbar styles
    @extend %common-styles
}

#main-nav {
    // unique main-nav styles
    @extend %common-styles
}

对于这个简化案例，输出将与第一个输出相同，但允许您以优雅的方式添加额外的样式。

改写问题的更新：

我非常谨慎地使用类，仅将元素集合描述为一个整体（它是电影列表吗？它是关于客户的信息吗？它是一个行动号召元素吗？）并让后代选择器处理其余的事情。使用 CSS 预处理器时，链式类（ala OOPCSS）在很大程度上是不必要的：它可以为您组装样式。

在理论上的 Sass 引导程序中，无论我们设计什么网站，我们都可以定义一些我们喜欢为导航元素重用的东西（LESS 的语法略有不同，但它也可以这样做）。

@mixin drop-menu { // intended for use with ordered or unordered lists that contain unordered lists
    & > li {
        @include inline-menu;
        ul { display: none }
        &:hover {
            ul { display: list }
        }
    }
}

@mixin inline-menu { // use with ordered or unordered lists if you'd like
    display: inline;
    margin-right: 1em;
    & + li { margin-left: 1em; border-left: 1px solid }
}

@mixin subtle-box { // just a box with a subtle gradient and slightly rounded corners
    linear-gradient(white, #CCC);
    border-radius: .25em;
    padding: .5em;
}

@mixin clearfix {
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
}

这些项目都不是你的 CSS 的一部分，除非你要求它们。

body > header nav { // this is our main navigation element
    @include drop-menu;
    @include subtle-box;
    color: blue;
    font-family: garamond, serif
}

nav.admin {
    @include inline-menu;
    color: orange;
}

section.gallery {
    @include clearfix;
    img { float: left; padding: 0 10px 10px 0 }
}

现在，如果您有多个非常不同但有很多共同样式的元素，请务必使用原始答案中提到的 @extend 指令。

如果你在 Sass 和 LESS 之间做出选择，Sass 有更多的特性（比如非常酷的 @extend 指令、函数、列表等）。我最初选择 LESS 是因为它有一个不错的 3rd 方 Windows 编译器，所以我不必在我的虚拟机上安装 Ruby，而是不断地与该语言作斗争（这些变量变量没用！）。

于 2012-09-14T11:46:21.653 回答