Question

我正在尝试使用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标记很容易，但从标记中删除类链更加困难。如果您使用mixins，如：

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

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

Answer 1

你说的没有别名，但是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是因为它有一个很好的第三方Windows编译器，所以我不必在我的虚拟盒子上安装Ruby，而是经常与语言作斗争（这些变量变量没用！）。

是否可以在SASS或LESS中将类或标记别名为另一个类或标记？

1 个答案: