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