Question

With ul>li*3 I achieve

            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>

but what I want is something like this:

            <ul>
                <li>Value</li>
                <li>Value</li>
                <li>Value</li>
            </ul>

How can I make it using Zen Coding? And one more thing - can I list different Values so that it becomes like this:

            <ul>
                <li>Value</li>
                <li>Another Value</li>
                <li>Last Value</li>
            </ul>
Was it helpful?

Solution

You can use this abbreviation for the first case: ul>li{Value}*3 — you can use the curly braces for inserting the text into elements.

However, to do the second case you could only do this: ul>li{Value}+li{Another Value}+li{Last Value}, right now there is no way to list only the values for multiple elements.

However, if the only thing that would be different is a number (like in Joonas' example), you can still achieve it easily: ul>li{Line $}*3 — you can use $ in attributes or text nodes of abbreviations when using multipliers and they would transform to the element's counter.

OTHER TIPS

I'm not sure I know exactly what you mean, but you can write:

Line 1
Line 2
Line 3

...and after that, you should first select these lines and then use 'wrap with abbreviation' with this zencode: ul>li*, which will produce this:

<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ul>

Zen coding wiki:

http://code.google.com/p/zen-coding/wiki/Actions#Wrap_with_Abbreviation

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top