nav {
font-size: 0;
ul {
margin: $padding/3;
}
li {
z-index: 10;
position: relative;
display: inline-block;
font-size: $fontSize;
/**
* If we want separated,Uncomment!
margin: $padding/3;
@include border-radius(5px);
*/
&:first-child {
@include border-radius(0 5px 5px 0);
}
&:last-child {
@include border-radius(5px 0 0 5px);
}
padding: $padding/3 0;
@include background(linear-gradient(lighten($textColor,10%),$textColor));
border: 1px solid lighten($textColor,20%);
a {
color: $brightColor;
padding: $padding/3 $padding;
font-weight: bold;
text-decoration: none;
@include transition(.2s all);
}
//Nested menues
ul {
opacity: 0;
//display: none;
position: absolute;
margin: 0;
top: 0;
left: 0;
right: 0;
z-index: 5;
pointer-events: none;
@include transition(.2s all);
li {
@include background(linear-gradient(darken($brightColor,darken($brightColor,30%)));
display: block;
border: 1px solid lighten($textColor,20%);
&:first-child {
@include border-radius(0);
}
&:last-child {
@include border-radius(0 0 5px 5px);
}
a {
color: $textColor;
}
}
}
&:hover ul {
pointer-events: all;
top: 100%;
opacity: 1;
//display: block;
}
}
}
在实践中有多糟糕/有害吗？我听到很多关于“不要超过3个嵌套选择器”的谈话！但真的有害吗？它是否对页面加载有明显的影响？我所做的基准测试没有,但是我有没有丢失任何东西？
解决方法
现在,Steve Souders说on the average site it’s simply not a real concern.然而,在一个网络应用程序或高度互动的网站上,性能不佳的CSS规则can make your repaints slower比他们必须要好.如果你有很多重绘…
值得注意的专家如Nicole Sullivan,Paul Irish和Steve Souders涵盖了与JavaScript交互的方式以及如何编写高性能的CSS选择器.它比深度更复杂,但一个很好的经验法则是限制深度,以避免自己摆脱麻烦 – 但不要太多的性能故障,请继续阅读.
然而,正如jankfree.org所说明的那样,这不是后代选择器,因为它是certain properties in certain contexts(html5rocks.com),使油漆变得昂贵.我看到比a maintainability issue更长的选择器(Nicolas Gallagher),而不是性能问题 – 请记住可维护性与性能相互作用.高可维护的代码可以更快地迭代,并且更容易进行调试(帮助您查找和修复性能问题).
现在,关于Sass优化.是的,Sass可以优化您的CSS.但是它不能优化您的选择器. 4级嵌套块将作为4级嵌套选择器输出. Sass不能改变它,而不会使你的CSS不起作用.作为作者,您必须优化您编写Sass以优化输出的方式.我个人只使用有限的嵌套方式(Sass的杀手功能对于我来说是@extend与占位符).但是,如果您真的喜欢嵌套,您可以使用Sass parent selector reference(或更新的@at-root)在某种程度上调整输出.
据我所知,Sass和Compass都没有内置的工具来分析选择器并对其进行警告.使用AST可能创建一个工具(设置最大深度并让您的预处理器发出警告).更直接地说,Google Page Speed does具有一些现有功能,可以提供一些信息. SCSS Lint有一个嵌套选项.还有CSS Lint.(如果您还没有使用像Grunt或Gulp这样的东西,那么理论上可以将它们添加到Compass config的on_stylesheet_saved中).
