Haml là gì

Nếu các bạn đã từng có lần nghe biết ngữ điệu xây dựng LESS, Styles… Chúng đều tạo thành các phương pháp viết CSS nkhô hanh, công dụng hơn và nếu như bạn đã có lần áp dụng, bạn sẽ nhận xét cao sự linc hoạt nhưng bọn chúng đem về mang đến dự án của khách hàng.

Bạn đang xem: Haml là gì

Với HTML bạn sẽ từ bỏ hỏi tại vì sao nó lại thừa nhiều năm mẫu nlỗi vậy? Tại sao không ai kia dễ dàng và đơn giản hóa nó ? Hôm nay, chúng ta vẫn cùng mày mò phương pháp sử dụng Haml để tối ưu hóa HTLM. Về cơ bản, Haml là ngôn ngữ markup thu gọn gàng giúp vấn đề viết HTML thuận tiện hơn có thể sử dụng mang đến các ngôn ngữ PHP.., ASPhường, ERB...được thực hiện nhiều nhất là Ruby on Rails.


1.Sự biệt lập thân HTLM và Haml.

Bây giờ, bạn đã sở hữu một định nghĩa cơ bạn dạng về Haml, đã đến lúc coi nó chuyển động như thế nào?

VớiHTML:

Hello World

Chú ý phần đa cấu trúc dễ dàng và đơn giản nhất của HTML đều phải có sự lặp lại. Trong Haml ta gắng điều ấy bởi thẻ %p.

VớiHaml:

%p Hello WorldHaml phụ thuộc vào khoảng tầm trắng để khẳng định Áp sạc ra, dưới đấy là một bằng chứng.

Haml:

%h3.title Halloween%p.date Tuesday, October 31, 2006%div %ul %li %a:href => "#devices-tab" Devices %li %a:href => "#options-tab" System Options %li %a:href => "#reports-tab" Reports %li %a:href => "#notes-tab" NotesLần đầu đối với bạn cũng có thể hơi trở ngại nhưng đoạn code ở trên đó là đoạn code sinh sống dưới, tức thị chúng hoàn toàn tương đương với nhau. Nếu họ viết đoạn Haml làm việc bên trên với chuyển vào trình thông ngôn, nó vẫn đã tạo ra HTML bên dưới.

HTML:

Halloween

Tuesday, October 31, 2006


Như bạn cũng có thể thấy, phiên bản HTML đòi hỏi không ít ký tự. Sử dụng Haml, họ sẽ tiết kiệm chi phí rộng 30 tổ hợp phím trong một đoạn code nhỏ tuổi. Nhân lên với toàn thể trang web, bạn sẽ thấy kia là một trong con số lớn lao.

Classes với IDs

Nếu không tồn tại kết cấu tag truyền thống lịch sử, bạn từ bỏ hỏi làm cho cầm cố như thế nào nhằm thực thi các mục HTML sản xuất như classed cùng IDs. Với Haml, bạn hoàn toàn hoàn toàn có thể làm cho được với thậm chí là là các bạn sẽ cảm giác thân thuộc một cách kỳ dị.

Xem thêm: Hướng Dẫn Làm Đồ Án Tổ Chức Thi Công Đường, Đồ Án Tổ Chức Thi Công Đường Ô Tô

Haml:

%div %ul.tabs %li#tác phẩm %a:href => "#devices-tab" Devices %li#sản phẩm %a:href => "#options-tab" System Options %li#thành tựu %a:href => "#reports-tab" Reports %li#sản phẩm %a:href => "#notes-tab" NotesNlỗi các bạn thấy symbol “.” Và “#” được sử dụng nhằm bộc lộ classes và IDs tương ứng. Thật tuyệt vời nhất bởi các bạn đang thân quen với phương pháp này trong CSS. Một khi bạn đã có lần sử dụng CSS, các bạn hoàn toàn có thể vận dụng với Haml. Đây là bí quyết thực hiện đoạn code.

HTML:


Divs

Hãy thành thật rằng trong cả phần đông nhân tố mới lạ tốt nhất của HTML5, chúng ta cũng chỉ yêu thích divs. Cho rằng đấy là nguyên tố thịnh hành, Haml vẫn gồm một cú pháp đặc trưng dễ dàng và đơn giản. Hãy Để ý đến thực hiện cùng với Haml.

HTML:


Với hầu như gì họ đang học tập được, các bạn sẽ không nghi hoặc cú pháp “%div” là cần thiết ở chỗ này. Tuy nhiên, Haml được cho phép bạn bỏ lỡ toàn bộ cú pháp div. Để có đoạn HTML như bên trên vào Haml, tất cả bạn cần chỉ là:

Haml:

#someDivChỉ bắt buộc như vậy là đủ. Đoạn code này là div hoàn hảo với cùng 1 ID của “someDiv”. Ngay cả khi chúng ta hoài nghi rằng nó tương đối ngắn thêm gọn gàng. Một đợt nữa, họ lại thấy được công dụng cụ thể của câu hỏi viết markup nlỗi khi bọn họ viết CSS.

Lúc phải chắc chắn rằng chúng ta thiệt sự nạm được giải pháp vận động, sau đây là một ví dụ lớn hơn. Lần này chúng ta sẽ áp dụng div chính với nhị div bên trong cùng với các yếu tố khác.

Haml:

#container .box %h2 Some Headline %p Lorem ipsum doller your mom... %ul.mainList %li One %li Two %li Three .box %h2 Some Headline %p Lorem ipsum doller your mom... %ul.mainList %li One %li Two %li ThreeHTML:


Some Headline

Lorem ipsum doller your mom...

One Two Three

Some Headline

Lorem ipsum doller your mom...

One Two Three

Lần này các bạn đã đích thực hiểu được sức khỏe của Haml. Sự quyến rũ ở đây vượt xa thực tiễn rằng chúng ta ngày tiết kiện được hàng tấn ký kết từ bỏ và thậm chí còn là 1 trong vài ba cái, hãy lưu ích cách triển khai thuận lợi rộng vào Haml. Tất cả sự lộn xộn tất nhiên vào HTML đã có đào thải với thay vào đó là hệ thống phân cấp markup ví dụ nhưng mà bạn cũng có thể dễ ợt nhận ra.

Xem thêm: Chiến Lược Thâm Nhập Thị Trường Cho Sản Phẩm Mới Cho Mọi Doanh Nghiệp

Vậy HTML5 thì như vậy nào?

Chỉ trong trường vừa lòng chúng ta từ hỏi rằng Haml gồm hoạt động giỏi cùng với các tag new vào HTML5 hay là không. Điều chính là hoàn toàn được, chúng ta có thể coi đoạn code dưới.

Haml:


Chuyên mục: kiến thức