8

Less またはおそらく Sass を使用して、ブートストラップ 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ディレクティブ、関数、リストなど）。サードパーティのWindowsコンパイラが優れていたため、最初はLESSを選択しました。そのため、仮想ボックスにRubyをインストールする必要はありませんでしたが、言語と絶えず戦いました（これらの変数変数は役に立ちません！）。

于 2012-09-14T11:46:21.653 に答える