hbuilder边框代码是什么_HBuilder CSS 自定义代码块

1 =begin2 本文档是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 end15 2、编辑按键命令16 如果要新增一个按键操作命令，复制如下一段代码到空白行，然后设定参数。17 'Br'是命令名字；18 s.key_binding = 'CONTROL+ENTER' 是设定按什么快捷键可以触发这个命令；19 s.expansion = '
' 是设定输出字符。20 snippet 'Br' do |s|21 s.key_binding = 'CONTROL+ENTER'22 s.expansion = '
'23 end24 以上以html代码块做示例，css代码块类似，使用时注意避免混淆25 操作时注意冲突，注意备份，有问题就还原。26 多看看已经写的ruby命令，会发现更多强大技巧。27 修改完毕，需要重启才能生效。28 玩的愉快，别玩坏！29 脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle ，可以把你的配置共享到这里，也可以在这里获取其他网友的版本30 =end31

32 require 'ruble'33

34 with_defaults :scope => "source.css support.type.property-name.css" do35

36 # snippet "!important CSS" do |s|37 # s.trigger = "!"38 # s.expansion = "${1:!important}"39 # end40

41 snippet "-webkit-" do |s|42 s.trigger = "webkit"43 s.needApplyReContentAssist = true44 s.expansion = '-webkit-'45 end46

47 snippet "-moz-" do |s|48 s.trigger = "moz"49 s.needApplyReContentAssist = true50 s.expansion = '-moz-'51 end52

53 snippet "-ms-" do |s|54 s.trigger = "ms"55 s.needApplyReContentAssist = true56 s.expansion = '-ms-'57 end58

59 snippet "background: image repeat attachment position" do |s|60 s.trigger = "bg"61 s.needApplyReContentAssist = true62 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 end64

65 snippet "background-color" do |s|66 s.trigger = "bc"67 s.expansion = "background-color: $1"68 s.needApplyReContentAssist = true69 end70

71 snippet "background-color: \#" do |s|72 s.trigger = "bch"73 s.expansion = "background-color: \#$1"74 s.needApplyReContentAssist = true75 end76

77 snippet "background-color: rgb" do |s|78 s.trigger = "bcr"79 s.expansion = "background-color: rgb(${1:255},${2:255},${3:255})"80 end81

82 snippet "background-image" do |s|83 s.trigger = "bi"84 s.expansion = "background-image: $1"85 s.needApplyReContentAssist = true86 end87

88 snippet "background-image: url" do |s|89 s.trigger = "biu"90 s.expansion = "background-image: url($1)"91 s.needApplyReContentAssist = true92 end93

94 snippet "background-position" do |s|95 s.trigger = "bp"96 s.expansion = "background-position: $1"97 s.needApplyReContentAssist = true98 end99

100 snippet "border-color" do |s|101 s.trigger = "boc"102 s.expansion = 'border-color: $1'103 s.needApplyReContentAssist = true104 end105

106 snippet "border-style" do |s|107 s.trigger = "bs"108 s.expansion = 'border-style: $1'109 s.needApplyReContentAssist = true110 end111

112 snippet "border-width" do |s|113 s.trigger = "bw"114 s.expansion = 'border-width: $1'115 s.needApplyReContentAssist = true116 end117

118 snippet "display: none" do |s|119 s.trigger = "dn"120 s.expansion = 'display: none'121 end122

123 snippet "overflow: hidden" do |s|124 s.trigger = "ovh"125 s.expansion = 'overflow: hidden'126 end127

128 snippet "display: block" do |s|129 s.trigger = "db"130 s.expansion = 'display: block'131 end132

133 snippet "font-family: family" do |s|134 s.trigger = "ff"135 s.expansion = 'font-family: $1'136 s.needApplyReContentAssist = true137 end138

139 snippet "font-size: size" do |s|140 s.trigger = "fsize"141 s.expansion = 'font-size: $1'142 s.needApplyReContentAssist = true143 end144

145 snippet "height length" do |s|146 s.trigger = "hei"147 s.expansion = 'height ${1}px;$0'148 end149

150 snippet "list-style-image: url" do |s|151 s.trigger = "lsi"152 s.expansion = 'list-style-image: url($1);'153 s.needApplyReContentAssist = true154 end155

156 snippet "properties{ }( } )" do |s|157 s.trigger = "{"158 s.expansion = '{159 /*$1*/

160 $0161 '162 end163 # FIXME Doesn't work164 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 end175

176 snippet "text-align: left" do |s|177 s.trigger = "tal"178 s.expansion = 'text-align: left;'179 end180

181 snippet "text-align: center" do |s|182 s.trigger = "tac"183 s.expansion = 'text-align: center;'184 end185

186 snippet "text-align: right" do |s|187 s.trigger = "tar"188 s.expansion = 'text-align: right;'189 end190

191 snippet "text-transform" do |s|192 s.trigger = "tt"193 s.expansion = 'text-transform: $1'194 s.needApplyReContentAssist = true195 end196

197 snippet "width length" do |s|198 s.trigger = "wid"199 s.expansion = 'width: ${1}px;$0'200 end201

202 snippet "margin-top" do |s|203 s.trigger = "mgt"204 s.expansion = 'margin-top: $1'205 end206

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 end213 end214

215 with_defaults :scope => "source.css entity.name.tag.css" do216 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 end224

225 snippet "@import" do |s|226 s.trigger = "@import"227 s.locationType="CSS_OUTRULE"228 s.expansion = '@import url("${1:global.css}");'229 end230

231 snippet "@charset" do |s|232 s.trigger = "@charset"233 s.locationType="CSS_OUTRULE"234 s.expansion = '@charset "${1:utf-8}";'235 end236

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 end244 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 end252

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 end261

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 end270

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 end279

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 $3285 }'286 end287

288 snippet "@supports" do |s|289 s.trigger = "@supports"290 s.locationType="CSS_OUTRULE"291 s.expansion = '@supports(${1:prop}:${2:value}){

292 $3293 }'294 end295

296 snippet "@namespace" do |s|297 s.trigger = "@namespace"298 s.locationType="CSS_OUTRULE"299 s.expansion = '@namespace ${1:prefix}"$2";'300 end301

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 $2308 }'309 end310 end