Geekly Articles each Day
📜 ⬆️ ⬇️

Zen Coding v0.7

Yesterday a new version of a set of scripts for ultrafast layout called Zen Coding was released.

Briefly about the main thing:
  1. Text nodes, full members of abbreviations

    {sample text} {item number $ ${nl}}*5 p>{Click }+a{here}+{ to continue}

  2. Improved abbreviation wrapping mechanism (with preview in Eclipse). You can see in the demo , try to wrap (Ctrl + Shift + A) the text with the following abbreviations:
    ') 
     ul>li*>a{Click at $#} span[title=$#]{Element's title is $#}* ul>li*>span{$#}+{ }+a[title=$#]{$#}

    When wrapping lists of typed text, you can specify the key |t to reset markers
  3. Multiplication of groups of elements

     dl>(dt+dd)*4

  4. New actions:
    • Increment / decrement number - changes the number under the cursor by 1, 10 or 0.1.
    • Evaluate Math Expression - performs simple mathematical expressions such as 50/2 + 10 under the cursor
    • Select Next / Previous Item - quickly selects the next / previous element in HTML (the name of the opening tag, full attribute, attribute name) and CSS (rule, full property, property value).
    • Reflect CSS Value - allows you to quickly insert the value of the CSS property and its analogues with vendor prefixes:

       -webkit-border-radius: 10px; -moz-border-radius: 5px; border-radius: 5px;

    • Encode / decode image to data: URI - quickly converts a picture to data:URL and back, to src or url()
  5. Multiple tabstops (Aptana / Eclipse, Espresso, TextMate, Komodo Edit) - moving through the property values ​​using Tab, works in the same way as TextMate. To demonstrate, try deploying to
    • CSS: bsha, brad+bsha
    • HTML: link:css*3
  6. More important updates:
    • Update image size now works in CSS.
    • Abbreviations of the type select>option*4 (i.e. block elements inside inline ones) are now expanded correctly.
    • With an exclamation mark, the CSS property abbreviation gets the !important postscript:

       pos:a! → position:absolute !important;

    • Abbreviations and snippets with a colon to speed up can be typed with a hyphen ( pos:a → pos-a ).
    • New filter |s for output in one line.
  7. Many closed bugs (see Google Code Issues ).
  8. And one more thing on the little things.

Source: https://habr.com/ru/post/115387/

More articles:


All Articles