There is an object with the names of the classes and the path to the icon.

currentProject = {'current-project': '../../sprites/123.png', 'composition-project': '../../sprites/123.png', 'room': '../../sprites/123.png', 'terms': '../../sprites/123.png', 'documents': '../../sprites/123.png', 'command': '../../sprites/123.png', 'contact': '../../sprites/123.png'}

How to get the result:

 &__current-project: background-image: url('../../sprites/123.png') &__room background-image: url('../../sprites/123.png')

...

    2 answers 2

    You cannot work with objects in the stylus; if you fill an object yourself, you can make two arrays and a function.

    The selectors variable is an array of selectors / classes.
    The variable sprites is an array of url sprites.
    The variable arrLength is the length of the array; it must be the same for the selectors and sprites arrays and do not forget that the score starts from zero.
    In the loop, call the function generate , which returns the code for each element of the selectors and sprites array.

    You can check the code with Stylus Compiler by inserting it in the left margin by clicking the "Compile stylus" button and css appears in the right window.

    Stylus code

     selectors = current-project, composition-project, room, terms, documents, command, contact sprites = '../../sprites/1.png', '../../sprites/2.png', '../../sprites/3.png', '../../sprites/4.png', '../../sprites/5.png', '../../sprites/6.png', '../../sprites/7.png' arrLength = 6 generate(selector, sprite) &__{selector} background-image url(sprite) .class for num in 0..arrLength generate(selectors[num], sprites[num])

    Compiled stylus

     .class__current-project { background-image: url("../../sprites/1.png"); } .class__composition-project { background-image: url("../../sprites/2.png"); } .class__room { background-image: url("../../sprites/3.png"); } .class__terms { background-image: url("../../sprites/4.png"); } .class__documents { background-image: url("../../sprites/5.png"); } .class__command { background-image: url("../../sprites/6.png"); } .class__contact { background-image: url("../../sprites/7.png"); }
    • I apologize for being off topic, but how to add the block "Run code"? - Rosnowsky
    • one
      @CodeStealer above the answer field there are icons and there is the seventh icon on the left, a document with <> inside. - greybutton
    • Thank you found. - Rosnowsky
    • look at my solution - HelpaMnePlz
    • But that's why the "execute code" button is needed, if the code is not feasible? - Qwertiy ♦

    Found a more beautiful and correct solution.

     currentProject = {'current-project': '../../sprites/1.png', 'composition-project': '../../sprites/2.png', 'room': '../../sprites/3.png', 'terms': '../../sprites/4.png', 'documents': '../../sprites/5.png', 'command': '../../sprites/6.png', 'contact': '../../sprites/7.png'} class for k, v in currentProject &__{k} background-image v