HBuilder CSS 自定义代码块
浏览数：211 /
时间：2015年06月09日
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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
