Zen Coding trong Visual Studio

Zen Coding là một cách nhanh chóng để viết mã HTML bằng cách sử dụng các cú pháp selector của CSS .

Hiện tại thì chúng ta có thể sử dụng Zen Coding trong bộ IDE Visual Studio thông qua plugin có tên là Web Essentials. Zen Coding được giới thiệu vào năm 2009 bởi Sergey Chikuyonok và được cập nhật thường xuyên để trở thành một công cụ viết HTML hiệu quả.

CÚ PHÁP

Đây là danh sách ngắn gọn các tính năng của Zen Coding được giới thiệu trong Visual Studio thông qua plugin Web Essentials. (sau khi cài đặt plugin cho Visual Studio, các bạn nhớ khởi động lại VisualStudio thì mới có tác dụng.)

  • # tạo ra một id
  • . tạ ra một class
  • [] tạo ra một thuộc tính (attributes)  custom
  • > tạo ra 1 phần tử (element) con
  • + tạo ra một phần tử ngang cấp
  • *n tạo ra n các phần tử giống nhau
  • $ dùng để thay thế cho việc viết các số tự tăng
  • {} tạo ra đoạn text trong 1 phần tử

Các bạn có thể mở VisualStudio và tạo ra 1 file html và copy các ví dụ mẫu bên dưới để thực hiện. Lưu ý khi gõ xong thì nhớ ấn TAB

Đây là các ví dụ để các bạn tham khảo


ul[data-bind="foreach:customers"]>li*4>span{Caption $$}+input[type=text data-bind="value:$$"]
  • Caption 01
  • Caption 02
  • Caption 03
  • Caption 04

 

Bây giờ chúng ta sẽ đi chi tiết vào các phần

Thuộc tính cho class và id: # và .

div#contentRegion.address

==>

Custom attributes []

div[title]
==>

hoặc

input[placeholder=”Name” type=”text”]
==> <input placeholder=”Name” type=”text”></input>

Phần tử con: >

Đây là ví dụ tạo ra thẻ div với id là menu chứa một thẻ span với class là item và có 1 atrribute title

div#menu>span.item[title]
==>

Sibling Elements: +

footer>div>a+input

==> <footer>

</footer>

Multiplication: *

ul>li*4>span

==>

<ul>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

</ul>

Text: } {

ul>li*4>span{Caption $$}

==>

<ul>

<li><span>Caption  01</span></li>

<li><span>Caption 02</span></li>

<li><span>Caption 03</span></li>

<li><span>Caption 04</span></li>

</ul>

Sử dụng tất cả

section[data-bind=”foreach:customers”]>div*4>input[type=”text” data-bind=”text:$$”]

==>

<section data-bind=”foreach:customers”>

</section>

Grouping: ( )

Grouping là 1 tính năng mạnh mẽ của Zen Coding cho phép bạn có thể tạo ra các biểu thức phức tạp. Bạn có thể dễ dàng tạo toàn bộ cấu trúc của một trang web 1 cách nhanh chóng

div>(header>div)+section>(ul>li*2>a)+footer>(div>span)

==>

</header>
<section>
<ul>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>
</section>
<footer>

</footer>
</div>

Lorem Ipsum Generator

Lorem ipsum là dạng chữ mẫu được sử dụng trong ngành in ấn từ những năm 1500. Nó dần trở lên phổ biến kể từ những năm 1960 và cho đến ngày nay, hầu hết những giao diện và các phần mềm máy tính đều sử dụng Lorem Ipsum là chữ mẫu.

Trong Zen Coding có hỗ trợ việc tạo ra các Lorem Ipsum trực tiếp trong khung soạn thảo HTML. Bạn chỉ cần gõ “lorem” và nhấn TAB thì 1 đoạn text Lorem Ipsum 30 kí tự sẽ được thêm vào. Còn khi bạn gõ “lorem10″ thì  sẽ xuất hiện 1 đoạn text Lorem Ipsum 10 kí tự.

Link bài dịch

http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s