Question

我想创建一些sass变量来表示不同的z-index值，并希望使用预先存在的命名约定（如果存在）。我正在寻找类似于Swing定义root，layered，content和glass窗格的内容，或指向我可以用作命名基础的某些理论的指针

Answer 1

http://en.wikipedia.org/wiki/Structure_of_the_Earth？

外大气层热层中间层平流层对流层脆皮 UpperMantle 披风外核内芯

对你来说太可怕了？

Answer 2

在考虑了这一点后，我们想出了什么（包裹在Sass地图中）：

$z-index: (
  'satellite'           :       5000,
  'skyscraper'          :       1000,
  'tower-block'         :       500,
  'house'               :       200,
  'bungalow-chimney'    :       110,
  'bungalow'            :       100,
  'shed'                :       50,
  'postbox'             :       10,
  'curb'                :       1,
  'pavement'            :       0,
  'pothole'             :      -10,
  'ditch'               :      -20,
  'sewer'               :      -100,
  'mine'                :      -300,
  'seabed'              :      -1000
);

然后引用如下：

.foo {
  z-index: map-get($z-index, 'pothole');
}

Answer 3

我们需要按顺序从下到上维护项目封面，过滤条，位置搜索模式，模态上方的自定义下拉菜单和网站导航的堆叠顺序。我们可以设置一个Sass列表，如下所示：

$elements: project-covers, sorting-bar, modals, navigation;

此列表表示我们希望元素从最低到最高的顺序，其中每个索引或位置在表示该元素的z-index的数组中。我们可以使用Sass索引函数为每个元素分配一个z-index值。例如：

.project-cover {
   z-index: index($elements, project-covers);
}

这将打印出来：

.project-cover {
   z-index: 1;
}

这是因为project-cover是列表中的第一个元素，索引为1，是z-index堆叠顺序中的最低元素。让我们为列表中的其他项目编写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;
}

Answer 4

当我在上一个项目工作时，我遇到了这个问题经过一些经验，我意识到不需要这样的变量，它带来的只是一团糟。

是否有命名z-index图层的标准约定？

4 个答案: