I like nesting my selectors with less for clarity of code / organization etc.
However after compiling (In this instance I am using gulp-less) and using Firefox or Chrome Developer tools to determine the line number of my selector, it will point to the top most selector.
If there is a large chunk of selectors encapsulated this can be a waste of time to even bother looking up the line number because it will give you the top selector encasing the code.
eg. here is my 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;
}
So If I wanted to get the line number of #secondary-menu, developer tools will point to header.less file line number 1 because the encapsulating selector is #header-master.
This is obviously logical but not useful if we are looking to get the actual line numbers. Does anyone know if there is a tool / way to compile etc to get the actual line numbers without having to not use nesting?
Also I notice that it does give the correct line numbers when there is a media query being used. So the sourcemap knows where the actual line numbers are it just doesn't translate to developer tools.
