1

私はSassを初めて使用しますが、プログラマーではないため、いくつかの概念に頭を悩ませることは少し難しいので、助けを求めています。

これはあなたにとって簡単なものでなければなりませんSassgurus。

さまざまなメディアクエリで使用できるミックスインを作成する必要があります。このミックスインは、サイトのメインナビゲーション用です。

この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; }
  }
}

私は次のようなミックスインを使用することを想定しています：@include navBar、しかし、私がそれを過度に単純化しているのか、それとも何をしているのかわかりません。

どんな助けでも大歓迎です。

ありがとう。

4

1 に答える 1

3

コードブロックの場合、これはミックスインとして記述する1つの方法になります。

@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;
}

ナビゲーションバーの外観をカスタマイズする場合は、重複するセレクターを作成する必要があります（場合によっては、lisに境界線を設定したり、ホバーに特別なbgカラーを設定したりする必要があります）。それはもっと悪いことかもしれませんが、CSSをそのように手で書くことはありません。

セレクターに含めると、そのコードのブロックは私にnav[role=navigation]は少し具体的すぎるように見えます。インラインで表示するもののリストが必要な場合がありますが、それはnav要素の一部ではありません（タグクラウドまたはリストである可能性があります）。カテゴリの）。

これは私自身のライブラリからのミックスインであり、リストをインラインリストに変換するための最も重要な要素のみが含まれています（もちろん、リストである必要はありません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は、セレクターがミックスインの一部ではないため、完全に公開されます。ulミックスインは、ある種のコンテナーセレクター内から呼び出されることが期待されます。

コードが生成するCSSは次のとおりです。

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ディレクティブです。中括弧（{}）の間はすべて、内@contentに含まれています。これは、必要に応じて呼び出す必要があります。

于 2012-12-24T17:45:42.133 に答える