haml
创建: 2019/05/23
文档: http://haml.info/docs/yardoc/file.REFERENCE.html
|
安装 |
|
| 安装 |
gem "haml" |
| 纯文本 | |
|
所有不带固有符号的都作为纯文本 |
|
| html也作为纯文本 | |
| 转义字符 |
直接输出后面的 %title 输出为 <title> |
| html标签 | |
| 标签名以 % 开始 |
%table#data 相当于 <table class="data"> |
| 属性 {} 或 () |
● {} 直接作为ruby的hash, 故可用所有ruby语法 - 也可以使用返回hash的方法(多个方法的话从左到右被 merge ) def html_attrs(lang = 'en-US') - 前缀 嵌套进hash里 {data: {sample: 1, test: 2}}
● () 内部插值: #{} %span(class="widget_#{@widget.number}")
|
| class, id |
若传入数组, 则先删除false的元素, 再 flatten ● class(简化方法为.) 若为数组, 先flatten再 join " " ● id(简化方法为#) 若为数组, 先flatten再 join "_" 例 %div{id: %w(a b c), class: %w(a b c)} 123
解释为 <div class="a b c" id="a_b_c"> |
| 默认元素 |
如果只指定class/id, 则为div .sample a 相当于 %div.sample a 相当于 <div class="sample"> |
| 关闭不带内容的标签 |
/ 例 %br/ |
| Whitespace Removal: > and < | |
| Object Reference: [] | |
| doctype:!!! | |
| 注释 | |
| / | 多行注释靠缩进 |
| -# | 多行注释靠缩进 |
| 插入ruby | |
| 插入ruby = |
= , 输出结果, 相当于 <%= ... %> 例: = link_to 'sample', root_path ● 多行 每一行都以 , 来结束 |
| - |
- , 不输出结果, 相当于 <% ... %> |
| 代码块 |
ruby代码块不需要end - (1..100).each do |i| |
| Whitespace Preservation: ~ | |
| 插值 #{} |
除了文字里, 也可以放在纯文本里 - (1..100).each do |i| |
| Gotchas | |
| Escaping HTML: &= | |
| Unescaping HTML: != | |
| Filters | |
haml的更多相关文章
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- HTML代码简写法:Emmet和Haml
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml ...
- 今天发现新大陆:haml和Emmet
其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...
- HTML的快速写法:Emmet和Haml
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...
- HAML学习
来源:http://ningandjiao.iteye.com/blog/1772845 一个技术能够风靡,一定是有它的原因的,在熟悉之前,我们没有资格去对它做任何的判断. Haml 是一种简洁优美的 ...
- haml、sass简单的解释
1. Haml 全名为 HTML Abstract Markup Language,主要就是让开发者能够使用缩排的方式撰写 HTML,做到永不忘记关 Tag 的效果. 例如:%h1= "He ...
- haml参考大全
原文来自: http://blackanger.blog.51cto.com/140924/47642 Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的. ...
- 【转】Haml 这货是啥? 附参考
Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的.而且也不用内嵌代码.Haml的职能就是替代那些内嵌代码的page page templating syste ...
- haml入门
1.什么是Haml Haml是HTML abstraction markup language,遵循的原则是标记应该是美的.Haml能够加速和简化模版,长处是简洁.可读.高效. 2.erbm模板和ha ...
- [转]SCSS 和 SASS 和 HAML 和CoffeeScript
Asset Pipeline 提供了内建直接使用 Sass 撰写 CSS 的功能. 你也许会生出这样的疑惑:什么是 Sass? Why should I care? Sass (Syntactical ...
随机推荐
- Windows默认字符集_查询
https://zhidao.baidu.com/question/32462047.html Windows95. XP……7操作系统自带的都是GBK字符集(含2万余汉字),是完全兼容GB2312( ...
- 2015 ETSI NFV用例指南
译者简介:忍忍鱼,曾经从SDNLAB获取了很多知识,现在努力为SDNLAB贡献自己的力量.爱学习,求进步!SDNLAB,么么哒! ETSI NFV ISG已经确定了9个潜在的NFV用例.本章节简单介绍 ...
- Spring- 异常org.xml.sax.SAXParseException; systemId: http://www.springframework.org/schema/context/; lineNumber: 1; columnNumber: 55; 在 publicId 和 systemId 之间需要有空格。
抛出异常 六月 03, 2018 7:40:44 下午 org.springframework.context.support.AbstractApplicationContext prepareRe ...
- 爬虫第一篇:爬虫详解之urllib.request模块
我将urllib.request 的GET请求和POST请求两种方法做了总结 GET请求 GET请求爬取: import urllib.request import urllib.parse head ...
- Codeforces 479E Riding in a Lift:前缀和/差分优化dp
题目链接:http://codeforces.com/problemset/problem/479/E 题意: 有一栋n层的房子. 还有一个无聊的人在玩电梯,每次玩电梯都会从某一层坐到另外一层. 他初 ...
- java:练习学校学生
java:练习学校学生 一个学生对应一个学校 一个学校对应多个学生 Student类,School类,Demo测试类 Student: public class Student { private S ...
- git忽略文件和目录
******************************************************** http://jingxuan.io/progit/2-Git%E5%9F%BA%E7 ...
- SpringBoot_05_热部署和debug
一.pom.xml配置 增加以下pom.xml配置 <!--1.spring-boot插件--> <plugin> <groupId>org.springframe ...
- JavaUtil_01_MD5加密
一.百度翻译MD5工具类 昨天做java微信开发,引用百度翻译API给公众号添加翻译功能时,需要使用MD5生成签名.注意,使用MD5生成签名后一定要转成小写,不然百度翻译后台不会认你这个签名的,会报无 ...
- 九省联考2018 D1T1 一双木棋
Alice和Bob轮流在n*m的棋盘上放棋子 a[i][j]表示Alice放在这的收益,b[i][j]表示Bob放在这的收益 一个地方没有棋子且它的左边上边都有棋子才能放棋子,边界外视为有一圈棋子 n ...