私は、異なるz-index値を表現するためにいくつかのsass変数を作成したいと思います。既存の命名規則があればそれを使用したいと思います。私はSwingの定義のようなものを探しています root
, layered
, content
、および glass
ペイン、または私は命名の基礎として使用できるいくつかの理論へのポインタです。
回答:
回答№1は4http://en.wikipedia.org/wiki/Structure_of_the_Earth ?
Exosphere 熱圏 メソスフィア 成層圏 対地圏 地殻 アッパーマントル マントル アウターコア 内核
あなたのために十分なオタク?
回答№2の場合は1
これについて少し考えた後、私たちが思いついたのはここです(Sassの地図で包まれています):
$z-index: (
"satellite" : 5000,
"skyscraper" : 1000,
"tower-block" : 500,
"house" : 200,
"bungalow-chimney" : 110,
"bungalow" : 100,
"shed" : 50,
"postbox" : 10,
"pavement" : 0,
"pothole" : -10,
"ditch" : -20,
"sewer" : -100,
"mine" : -300,
"seabed" : -1000
);
これは次に参照されるようになります:
.foo {
z-index: map-get($z-index, "pothole");
}
回答№3の場合は0
私たちは、プロジェクトカバー、フィルタバー、位置検索モーダル、モーダル上のカスタムドロップダウン、ウェブサイトナビゲーションの順に下から上に表示されます。次のようにSassリストを設定することができます:
$elements: project-covers, sorting-bar, modals, navigation;
このリストは、私たちが望む順序を表しますその要素のZ-インデックスを表す配列内の各インデックスまたは位置とともに表示されます。 Sassインデックス関数を使用して、各要素にz-インデックス値を割り当てることができます。 例えば:
.project-cover {
z-index: index($elements, project-covers);
}
これは印刷されます:
.project-cover {
z-index: 1;
}
これは、project-coverがリストの最初の要素であるインデックス1と、Zインデックスの積み上げ順序の最下位要素であるためです。残りのアイテムについては、Sassをリストに書きましょう。
.sorting-bar {
z-index: index($elements, sorting-bar);
}
.modal {
z-index: index($elements, modals);
}
.navigation {
z-index: index($elements, navigation);
}
コンパイルされたCSSは次のようになります:
.project-cover {
z-index: 1;
}
.sorting-bar {
z-index: 2;
}
.modal {
z-index: 3;
}
.navigation {
z-index: 4;
}
回答№4の場合は-1
私は最後のプロジェクトに取り組んでいたときにこの問題に直面していました。私は経験の後、そのような変数が必要ないことを認識しました。