Sass line-number inclusion

README.md

Sass line-number inclusion

Goal:

To be able to pass in a Sass command line option and have it include the true line-number of the css selector, into the style properties of the generated css file. This will allow you to easily jump to the line number for a selector vs having to try and do a [ctrl/cmd + f] in your code. This is different than [:debug_info] as it will actually include the line number in the css code that the browser shows us. For example:

Command line script

sass --watch --style :expanded :line-numbers sass:css

Sass Code

.thisSelector starts on line 145 in the styles.sass file

.thisSelectorChild starts on line 149 in the styles.sass file

.thisSelector {
    background: #bada55;
    font-size: 14px;

    & .thisSelectorChild {
        background: #f00;
        float: left;
        height: 40px;
    }
}

CSS Output

.thisSelector {
    -line-number: 145;
    background: #bada55;
    font-size: 14px;
}
.thisSelector .thisSelectorChild {
    -line-number: 149;
    background: #f00;
    float: left;
    height: 40px;
}

Example screenshot

https://lh3.googleusercontent.com/-Bag5i8vswjQ/UAghQeYFSuI/AAAAAAAAkt4/V_d4F98wKHI/s224/ScreenClip+%5B17%5D.png