Cacher is the code snippet organizer for pro developers

///////////////////////////////////////////////////////////////////////////////////////
// Mixin
///////////////////////////////////////////////////////////////////////////////////////

mixin respImage

    - var src1 = src + " " + size + "w"
    - var src2 = src.replace(/(\.[\w\d_-]+)$/i, "@large$1") + " " + size * 1.5 + "w"
    - var src3 = src.replace(/(\.[\w\d_-]+)$/i, "@huge$1") + " " + size * 2 + "w"

    img(class  = imgClass
        srcset = src1 + ", " + src2 + ", " + src3
        sizes  = sizes
        src    = src
        alt    = alt)

///////////////////////////////////////////////////////////////////////////////////////
// Call
///////////////////////////////////////////////////////////////////////////////////////

- imgClass = "section__image"
- src      = "images/picture.png"
- size     = 300
- sizes    = size / 16 + "em"
- alt      = "Image description"

+respImage

///////////////////////////////////////////////////////////////////////////////////////
// Output
///////////////////////////////////////////////////////////////////////////////////////

<img class="section__image" srcset="images/picture.png 300w, images/picture@large.png 450w, images/picture@huge.png 600w" sizes="18.75em" src="images/picture.png" alt="Image description"/>