我试图使用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
可以这样做吗？如果没有,我怎样才能实现语义标记？
解决方法
你说的没有别名,但是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,而是经常与语言作斗争(这些变量变量没用！).