我喜欢将我的选择器嵌套，以减少代码/组织的清晰度等。
然而，在编译之后（在这个例子中我使用gulp-less）并使用Firefox或Chrome Developer工具来确定我的选择器的行号，它将指向最顶层的选择器。
如果封装了大量的选择器，这可能是浪费时间甚至费心查找行号，因为它会为您提供包含代码的顶部选择器。
例如。这是我的header.less：
#header-master{
background: @brand-primary url("@{img-dir}background.jpg?v=2") no-repeat;
min-height: 117px;
padding-top: 8px;
padding-left: 26px;
padding-right: 26px;
position: relative;
overflow:hidden;
&:after{
width: 416px;
position: absolute;
bottom: 0;
right: 0;
height: 7px;
content: " ";
background: white;
z-index: 1000;
@media (max-width: @screen-md-max) {
max-width: 322px;
}
@media (max-width: @screen-sm-max) {
max-width: 201px;
}
@media (max-width: @screen-xs-max) {
height: 0px;
display:none;
}
}
@media (max-width: @screen-md-max) {
padding-right: (@grid-gutter-width /2 );
}
@media (max-width: @screen-sm-max) {
background: @brand-primary url("@{img-dir}header-bg-sm.jpg?v=2") no-repeat;
}
@media (max-width: @screen-xs-max) {
min-height: 70px;
padding-top: 0px;
padding-left: 0px;
}
#logo{
margin-left: 10px;
margin-top: 2px;
}
#royal-warrant{
margin-top: 2px;
}
#header-middle{
background: #fff none repeat scroll 0% 0%;
min-height: 109px;
display: block;
width: 100%;
max-width: 603px;
float: left;
margin-left: 91px;
position: relative;
@media (max-width: @screen-md-max) {
max-width: 424px;
}
@media (max-width: @screen-sm-max) {
max-width: 201px;
}
@media (max-width: @screen-xs-max) {
max-width: none;
margin-right: 0px;
position: absolute;
right: 0px;
left: 93px;
top: 0px;
}
&:before{
width: 69px;
left: -69px;
content: " ";
z-index: 100;
position: absolute;
background: url("@{img-dir}left-header-edge.png") no-repeat;
min-height: 109px;
}
&:after{
width: 64px;
right: -64px;
content: " ";
z-index: 100;
position: absolute;
background: url("@{img-dir}right-header-edge.png") no-repeat;
min-height: 109px;
}
@media (max-width: @screen-xs-max) {
&:after{
width: 0px;
right: 0px;
background: none;
}
}
#header-search{
margin-top: 20px;
max-width: 518px;
margin-left: 4px;
float: left;
z-index: 1000;
overflow: hidden;
@media (max-width: @screen-md-max) {
margin-left: -13px;
max-width: 431px;
}
@media (max-width: @screen-sm-max) {
margin-top: 17px;
margin-left: -22px;
}
> .input-group{
width: 511px;
z-index: 1000;
@media (max-width: @screen-md-max) {
width: 431px;
}
@media (max-width: @screen-sm-max) {
width: 221px;
}
}
label, #header-search-label{
position: absolute;
left: 0;
z-index: 1000;
padding: 4px;
font-weight: normal;
max-width: 490px;
overflow: hidden;
height: 23px;
font-size: 12.2px;
padding-left: 7px;
display: none; // display with javascript
}
input{
font-size: 12.5px;
}
#header-search-links{
z-index: 1000;
position: relative;
text-transform: uppercase;
padding-top: 8px;
padding-left: 5px;
li{
font-size: 11px;
font-weight: bold;
a{
text-decoration: underline;
color: @brand-info;
&:hover{
text-decoration: none;
color: @brand-primary;
}
}
}
li.active{
a{
text-decoration: none;
color: @brand-primary;
}
}
}
#search-text-under{
padding-top: @vert-padding;
float: right;
}
}
}
#header-right{
@media (min-width: @screen-sm) {
max-width: 136px;
float: right;
}
@media (max-width: @screen-xs-max) {
z-index: 3000;
width: 300px;
float: left;
width: 300px;
position: absolute;
left: 140px;
height: 68px;
right: 0px;
width: 100%;
padding-top: 10px;
}
ol, ul, #header-links-top{
margin-bottom: 2px;
li{
&:last-child{
padding-right: 0px;
}
}
}
#header-basket-checkout{
clear: right;
margin-top: 10px;
float: right;
min-width: 110px;
line-height: 0.95em;
text-align: right;
}
#header-mobile-buttons{
.fa-lg{
font-size: 1.8em;
}
.fa-search{
font-size: 1.3em;
}
.btn-default{
line-height: 1.1em;
}
}
#header-basket-button{
margin-top: -7px;
margin-right: -2px;
}
}
#secondary-menu{
position: absolute;
height: 27px;
bottom: 0px;
z-index: 2;
margin-left:53px;
font-family: arimo;
font-size: 15px;
border-top: 2px solid @brand-primary;
border-right: 2px solid @brand-primary;
border-left: 2px solid @brand-primary;
@media (max-width: @screen-md-max) {
left: -63px;
margin-left: 0;
z-index:1000;
}
@media (max-width: @screen-sm-max) {
left: -166px;
}
@media (max-width: @screen-xs-max) {
margin-left: -14px;
z-index: 1000;
margin-top: 46px;
font-size: 13px;
border-top: 0;
border-right: 0;
top: 0;
}
ul{
margin: 0;
background: @brand-primary;
li{
background: @brand-primary;
position: relative;
padding: 3px 12px 3px 6px;
margin: 0px;
float: left;
&:before{
content: " ";
position: absolute;
left: -4px;
bottom: -2px;
border-right: 2px solid #FFF;
height: 22px;
background: #FFF none repeat scroll 0% 0%;
z-index: 100;
}
&:first-child{
&:before{
bottom: 0px; // Petes Design
}
@media (max-width: @screen-xs-max) {
&:before{
border-right: none;
background: none;
}
}
}
a{
color: white;
}
&:last-child{
padding: 3px 10px 3px 6px;
}
}
li.active{
background: white;
a{
color: @brand-primary;
vertical-align: -4px;
}
&:before{
border-right: 5px solid #FFF;
top: 0;
bottom: 0px;
height: auto;
}
/*border: 3px solid @brand-primary;*/
}
}
}
}
.ie8 #header-master{
min-height: 110px;
}
因此，如果我想获得#second-菜单的行号，开发人员工具将指向header.less文件行号1，因为封装选择器是＃header-master。
如果我们想要获得实际的行号，这显然是合乎逻辑的但没有用。有没有人知道是否有工具/方法来编译等以获得实际的行号而不必不使用嵌套？
另外，我注意到在使用媒体查询时它确实提供了正确的行号。因此，源图知道实际行号的位置，它不会转换为开发人员工具。