HBuilderCSS⾃定义代码块
1=begin
2本⽂档是CSS代码块的编辑⽂件。注意不要把其他语⾔的设置放到css⾥来。
3HBuilder可使⽤ruby脚本来编辑代码块和增强操作命令。
41、编辑代码块
5如果要新增⼀个代码块，复制如下⼀段代码到空⽩⾏，然后设定参数。
6    'userselect:none'是代码块的显⽰名字；
7    s.trigger = 'usn' 是设定激活字符，⽐如输⼊usn会在代码提⽰时显⽰该代码块；
8    s.expansion = '' 是设定该代码块的输出字符，其中$0、$1是光标的停留和切换位置。
9snippet "userselect:none" do |s|
10    s.trigger = "usn"
11    s.expansion = '-webkit-user-select: none;
12-moz-user-select: none;
13-ms-user-select: none;'
14end
152、编辑按键命令
16如果要新增⼀个按键操作命令，复制如下⼀段代码到空⽩⾏，然后设定参数。
17'Br'是命令名字；
18s.key_binding = 'CONTROL+ENTER' 是设定按什么快捷键可以触发这个命令；
20snippet 'Br' do |s|
hbuilder圣诞树代码
21  s.key_binding = 'CONTROL+ENTER'
22  s.expansion = '<br/>'
23end
24以上以html代码块做⽰例，css代码块类似，使⽤时注意避免混淆
25操作时注意冲突，注意备份，有问题就还原。
26多看看已经写的ruby命令，会发现更多强⼤技巧。
27修改完毕，需要重启才能⽣效。
28玩的愉快，别玩坏！
29脚本开源地址 github/dcloudio/HBuilderRubyBundle ，可以把你的配置共享到这⾥，也可以在这⾥获取其他⽹友的版本
30=end
31
32require 'ruble'
33
34with_defaults :scope => "source.pe.property-name.css" do
35
36#  snippet "!important CSS" do |s|
37#    s.trigger = "!"
38#    s.expansion = "${1:!important}"
39#  end
40
41  snippet "-webkit-" do |s|
42    s.trigger = "webkit"
43    s.needApplyReContentAssist = true
44    s.expansion = '-webkit-'
45  end
46
47  snippet "-moz-" do |s|
48    s.trigger = "moz"
49    s.needApplyReContentAssist = true
50    s.expansion = '-moz-'
51  end
52
53  snippet "-ms-" do |s|
54    s.trigger = "ms"
55    s.needApplyReContentAssist = true
56    s.expansion = '-ms-'
57  end
58
59  snippet "background: image repeat attachment position" do |s|
60    s.trigger = "bg"
61    s.needApplyReContentAssist = true
62    s.expansion = "background: url($1) ${2:repeat/repeat-x/repeat-y/no-repeat} ${3:scroll/fixed} ${4:top left/top center/top right/center left/center center/center right/bottom left/bottom center/bottom right/x-% y-%/x-pos y-pos
63  end
64
65  snippet "background-color" do |s|
66    s.trigger = "bc"
67    s.expansion = "background-color: $1"
68    s.needApplyReContentAssist = true
69  end
70
71  snippet "background-color: \#" do |s|
72    s.trigger = "bch"
73    s.expansion = "background-color: \#$1"
74    s.needApplyReContentAssist = true
75  end
76
77  snippet "background-color: rgb" do |s|
78    s.trigger = "bcr"
79    s.expansion = "background-color: rgb(${1:255},${2:255},${3:255})"
80  end
81
82  snippet "background-image" do |s|
83    s.trigger = "bi"
84    s.expansion = "background-image: $1"
85    s.needApplyReContentAssist = true
86  end
87
88  snippet "background-image: url" do |s|
89    s.trigger = "biu"
90    s.expansion = "background-image: url($1)"
91    s.needApplyReContentAssist = true
92  end
93
94  snippet "background-position" do |s|
95    s.trigger = "bp"
96    s.expansion = "background-position: $1"
97    s.needApplyReContentAssist = true
98  end
99
100  snippet "border-color" do |s|
101    s.trigger = "boc"
102    s.expansion = 'border-color: $1'
103    s.needApplyReContentAssist = true
104  end
105
106  snippet "border-style" do |s|
107    s.trigger = "bs"
108    s.expansion = 'border-style: $1'
109    s.needApplyReContentAssist = true
110  end
114    s.expansion = 'border-width: $1'
115    s.needApplyReContentAssist = true
116  end
117
118  snippet "display: none" do |s|
119    s.trigger = "dn"
120    s.expansion = 'display: none'
121  end
122
123  snippet "overflow: hidden" do |s|
124    s.trigger = "ovh"
125    s.expansion = 'overflow: hidden'
126  end
127
128  snippet "display: block" do |s|
129    s.trigger = "db"
130    s.expansion = 'display: block'
131  end
132
133  snippet "font-family: family" do |s|
134    s.trigger = "ff"
135    s.expansion = 'font-family: $1'
136    s.needApplyReContentAssist = true
137  end
138
139  snippet "font-size: size" do |s|
140    s.trigger = "fsize"
141    s.expansion = 'font-size: $1'
142    s.needApplyReContentAssist = true
143  end
144
145  snippet "height length" do |s|
146    s.trigger = "hei"
147    s.expansion = 'height ${1}px;$0'
148  end
149
150  snippet "list-style-image: url" do |s|
151    s.trigger = "lsi"
152    s.expansion = 'list-style-image: url($1);'
153    s.needApplyReContentAssist = true
154  end
155
156  snippet "properties { } ( } )" do |s|
157    s.trigger = "{"
158    s.expansion = '{
159/* $1 */
160    $0
161'
162  end
163  # FIXME Doesn't work
164  snippet "scrollbar" do |s|
165    s.trigger = "scrollbar"
166    s.expansion = 'scrollbar-base-color:      ${1:#CCCCCC}; 167scrollbar-arrow-color:      ${2:#000000};
168scrollbar-track-color:      ${3:#999999};
169scrollbar-3dlight-color:    ${4:#EEEEEE};
170scrollbar-highlight-color:  ${5:#FFFFFF};
171scrollbar-face-color:      ${6:#CCCCCC};
172scrollbar-shadow-color:    ${7:#999999};
173scrollbar-darkshadow-color: ${8:#666666};'
174  end
175
176  snippet "text-align: left" do |s|
177    s.trigger = "tal"
178    s.expansion = 'text-align: left;'
179  end
180
181  snippet "text-align: center" do |s|
182    s.trigger = "tac"
183    s.expansion = 'text-align: center;'
184  end
185
186  snippet "text-align: right" do |s|
187    s.trigger = "tar"
188    s.expansion = 'text-align: right;'
189  end
190
191  snippet "text-transform" do |s|
192    s.trigger = "tt"
193    s.expansion = 'text-transform: $1'
194    s.needApplyReContentAssist = true
195  end
196
197  snippet "width length" do |s|
198    s.trigger = "wid"
199    s.expansion = 'width: ${1}px;$0'
200  end
201
202  snippet "margin-top" do |s|
203    s.trigger = "mgt"
204    s.expansion = 'margin-top: $1'
205  end
206
207  snippet "userselect:none" do |s|
208    s.trigger = "usn"
209    s.expansion = '-webkit-user-select: none;
210-moz-user-select: none;
211-ms-user-select: none;'
212  end
213end
214
215with_defaults :scope => "source.css entity.name.tag.css" do 216  snippet "@font-face" do |s|
217    s.trigger = "@fontface"
218    s.locationType="CSS_OUTRULE"
219    s.expansion = '@font-face {
220    font-family:$1;
221    src: url($2);
222 }'
223  end
227    s.locationType="CSS_OUTRULE"
228    s.expansion = '@import url("${1:global.css}");'
229  end
230
231  snippet "@charset" do |s|
232    s.trigger = "@charset"
233    s.locationType="CSS_OUTRULE"
234    s.expansion = '@charset "${1:utf-8}";'
235  end
236
237  snippet "@page" do |s|
238    s.trigger = "@page"
239    s.locationType="CSS_OUTRULE"
240    s.expansion = '@page:${1:first/left/right}{
241
242 }'
243  end
244  snippet "@keyframes" do |s|
245    s.trigger = "@keyframes"
246    s.locationType="CSS_OUTRULE"
247    s.expansion = '@keyframes ${1:name}{
248    from{$2}
249    to{$3}
250}'
251  end
252
253  snippet "@-moz-keyframes" do |s|
254    s.trigger = "@keyframes"
255    s.locationType="CSS_OUTRULE"
256    s.expansion = '@-moz-keyframes ${1:name}{
257    from{$2}
258    to{$3}
259}'
260  end
261
262  snippet "@-ms-keyframes" do |s|
263    s.trigger = "@keyframes"
264    s.locationType="CSS_OUTRULE"
265    s.expansion = '@-ms-keyframes ${1:name}{
266    from{$2}
267    to{$3}
268}'
269  end
270
271  snippet "@-webkit-keyframes" do |s|
272    s.trigger = "@keyframes"
273    s.locationType="CSS_OUTRULE"
274    s.expansion = '@-webkit-keyframes ${1:name}{
275    from{$2}
276    to{$3}
277}'
278  end
279
280  snippet "@document" do |s|
281    s.trigger = "@document"
282    s.locationType="CSS_OUTRULE"
283    s.expansion = '@document ${1:url/url-prefix/domain/regexp}("$2") { 284    $3
285 }'
286  end
287
288  snippet "@supports" do |s|
289    s.trigger = "@supports"
290    s.locationType="CSS_OUTRULE"
291    s.expansion = '@supports(${1:prop}:${2:value}) {
292    $3
293 }'
294  end
295
296  snippet "@namespace" do |s|
297    s.trigger = "@namespace"
298    s.locationType="CSS_OUTRULE"
299    s.expansion = '@namespace ${1:prefix} "$2";'
300  end
301
302
303  snippet "@media" do |s|
304    s.trigger = "@media"
305    s.locationType="CSS_OUTRULE"
306    s.expansion = '@media only screen and (min-width: $1px) {
307    $2
308 }'
309  end
310end

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。