HBuilder CSS 自定义代码块

  1 =begin
  2 本文档是CSS代码块的编辑文件。注意不要把其他语言的设置放到css里来。
  3 HBuilder可使用ruby脚本来编辑代码块和增强操作命令。
  4 1、编辑代码块
  5 如果要新增一个代码块，复制如下一段代码到空白行，然后设定参数。
  6     ‘userselect:none‘是代码块的显示名字；
  7     s.trigger = ‘usn‘ 是设定激活字符，比如输入usn会在代码提示时显示该代码块；
  8     s.expansion = ‘‘ 是设定该代码块的输出字符，其中$0、$1是光标的停留和切换位置。
  9 snippet "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;‘
 14 end
 15 2、编辑按键命令
 16 如果要新增一个按键操作命令，复制如下一段代码到空白行，然后设定参数。
 17 ‘Br‘是命令名字；
 18 s.key_binding = ‘CONTROL+ENTER‘ 是设定按什么快捷键可以触发这个命令；
 19 s.expansion = ‘<br/>‘ 是设定输出字符。
 20 snippet ‘Br‘ do |s|
 21   s.key_binding = ‘CONTROL+ENTER‘
 22   s.expansion = ‘<br/>‘
 23 end
 24 以上以html代码块做示例，css代码块类似，使用时注意避免混淆
 25 操作时注意冲突，注意备份，有问题就还原。
 26 多看看已经写的ruby命令，会发现更多强大技巧。
 27 修改完毕，需要重启才能生效。
 28 玩的愉快，别玩坏！
 29 脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle ，可以把你的配置共享到这里，也可以在这里获取其他网友的版本
 30 =end
 31
 32 require ‘ruble‘
 33
 34 with_defaults :scope => "source.css support.type.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};$0"
 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
111
112   snippet "border-width" do |s|
113     s.trigger = "bw"
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};
167 scrollbar-arrow-color:      ${2:#000000};
168 scrollbar-track-color:      ${3:#999999};
169 scrollbar-3dlight-color:    ${4:#EEEEEE};
170 scrollbar-highlight-color:  ${5:#FFFFFF};
171 scrollbar-face-color:       ${6:#CCCCCC};
172 scrollbar-shadow-color:     ${7:#999999};
173 scrollbar-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
213 end
214
215 with_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
224
225   snippet "@import" do |s|
226     s.trigger = "@import"
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
310 end