├── README.md
├── absolute.sublime-snippet
├── active.sublime-snippet
├── after.sublime-snippet
├── ampersand.sublime-snippet
├── animation-fill-mode.sublime-snippet
├── animation-play-state.sublime-snippet
├── animation.sublime-snippet
├── auto.sublime-snippet
├── background.sublime-snippet
├── before.sublime-snippet
├── block.sublime-snippet
├── bold.sublime-snippet
├── border-radius.sublime-snippet
├── bottom.sublime-snippet
├── box-shadow.sublime-snippet
├── box-sizing.sublime-snippet
├── center.sublime-snippet
├── clearfix.sublime-snippet
├── comment.sublime-snippet
├── content.sublime-snippet
├── cursor.sublime-snippet
├── fixed.sublime-snippet
├── font.sublime-snippet
├── hidden.sublime-snippet
├── hover.sublime-snippet
├── hsla.sublime-snippet
├── hyphens.sublime-snippet
├── inline-block.sublime-snippet
├── italic.sublime-snippet
├── keyframes.sublime-snippet
├── left.sublime-snippet
├── line-height.sublime-snippet
├── linear-gradient.sublime-snippet
├── margin.sublime-snippet
├── media.sublime-snippet
├── padding.sublime-snippet
├── relative.sublime-snippet
├── rgba.sublime-snippet
├── right.sublime-snippet
├── sans-serif.sublime-snippet
├── serif.sublime-snippet
├── tap-highlight-color.sublime-snippet
├── text-decoration.sublime-snippet
├── text-shadow.sublime-snippet
├── top.sublime-snippet
├── transform.sublime-snippet
├── transition.sublime-snippet
├── transparent.sublime-snippet
├── uppercase.sublime-snippet
└── word-wrap.sublime-snippet


/README.md:
--------------------------------------------------------------------------------
  1 | # Sublime Text CSS Snippets
  2 | 
  3 | __UPDATE: The scope has been expanded to include LESS, Sass and Stylus files.__
  4 | 
  5 | Type the snippet shortcode and then press <kbd>Tab</kbd> to complete the snippet.
  6 | 
  7 | The snippets are listed below in alphabetical order. The '$1' indicates the initial position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little tricky to explain, but any snippet that has a $1/$2/$3/etc. uses this technique.
  8 | 
  9 | Feel free to play with, alter, expand, or ruin these snippets as you please. I only ask that if you come up with an incredibly handy snippet, or simply one that I have missed, that you let me know so that I can improve these for everybody. Thanks!
 10 | 
 11 | ---
 12 | 
 13 | __`__
 14 | 
 15 | 
 16 | That's a backtick in case you were unsure (it's on the same key as the tilde (~), directly above Tab).
 17 | 
 18 | ```CSS
 19 | /* $1 **************************************************/
 20 | ```
 21 | 
 22 | __abs__
 23 | 
 24 | ```CSS
 25 | position: absolute;
 26 | ```
 27 | 
 28 | __act__
 29 | 
 30 | ```CSS
 31 | $1:active {
 32 |     $2
 33 | }
 34 | ```
 35 | 
 36 | __aft__
 37 | 
 38 | ```CSS
 39 | $1:after {
 40 |     content: '';
 41 |     $2
 42 | }
 43 | ```
 44 | 
 45 | __amp__
 46 | 
 47 | Wrap ampersand with <span class="amp"></span> to make them look sexy.
 48 | 
 49 | ```CSS
 50 | .amp {
 51 |     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
 52 |     font-style: italic;
 53 |     font-weight: normal;
 54 | }
 55 | ```
 56 | 
 57 | __ani__
 58 | 
 59 | Animation shorthand: animation-name animation-duration animation-timing-function animation-delay
 60 | animation-iteration-count animation-direction.
 61 | 
 62 | ```CSS
 63 | -webkit-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 64 |    -moz-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 65 |     -ms-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 66 |      -o-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 67 |         animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 68 | ```
 69 | 
 70 | __aut__
 71 | 
 72 | ```CSS
 73 | margin: ${1:0} auto;
 74 | ```
 75 | 
 76 | __bac__
 77 | 
 78 | ```CSS
 79 | background: ${1:#fff} url('$2') ${3:0} ${4:0} ${5:repeat|repeat-x|repeat-y|no-repeat|inherit|round|space};
 80 | ```
 81 | 
 82 | __bef__
 83 | 
 84 | ```CSS
 85 | $1:before {
 86 |     content: '';
 87 |     $2
 88 | }
 89 | ```
 90 | 
 91 | __blo__
 92 | 
 93 | ```CSS
 94 | display: block;
 95 | ```
 96 | 
 97 | __bol__
 98 | 
 99 | ```CSS
100 | font-weight: bold;
101 | ```
102 | 
103 | __bor__
104 | 
105 | ```CSS
106 | border-radius: $1;
107 | ```
108 | 
109 | __bot__
110 | 
111 | ```CSS
112 | bottom: ${1:0};
113 | ```
114 | 
115 | __box__
116 | 
117 | ```CSS
118 | -webkit-box-sizing: border-box;
119 |    -moz-box-sizing: border-box;
120 |         box-sizing: border-box;
121 | ```
122 | 
123 | __cen__
124 | 
125 | ```CSS
126 | text-align: center;
127 | ```
128 | 
129 | __cf__
130 | 
131 | You should look at using inline-block for layouts instead of floats.
132 | 
133 | ```CSS
134 | .cf:after,
135 | .cf:before {
136 |     content: '';
137 |     display: table;
138 | }
139 | .cf:after {
140 |     clear: both;
141 | }
142 | .cf {
143 |     zoom: 1;
144 | }
145 | ```
146 | 
147 | __con__
148 | 
149 | ```CSS
150 | content: '$1';
151 | ```
152 | 
153 | __cur__
154 | 
155 | ```CSS
156 | cursor: ${1:auto|crosshair|default|pointer|move|e-resize|ne-resize|-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress};
157 | ```
158 | 
159 | __fil__
160 | 
161 | ```CSS
162 | -webkit-animation-fill-mode: ${1:none|forwards|backwards|both};
163 |    -moz-animation-fill-mode: ${1:none|forwards|backwards|both};
164 |     -ms-animation-fill-mode: ${1:none|forwards|backwards|both};
165 |      -o-animation-fill-mode: ${1:none|forwards|backwards|both};
166 |         animation-fill-mode: ${1:none|forwards|backwards|both};
167 | ```
168 | 
169 | __fix__
170 | 
171 | ```CSS
172 | position: fixed;
173 | ```
174 | 
175 | __fon__
176 | 
177 | You don't need to declare a value for the line-height unless using pixels (1.5 is the same as 1.5em
178 | or 150%).
179 | 
180 | ```CSS
181 | font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif};
182 | ```
183 | 
184 | __gra__
185 | It's a good idea to define a background color, and use alpha transparency with your gradients, that
186 | way you only need to alter a single value if you want to change the color of the background.
187 | 
188 | ```CSS
189 | background-image: -webkit-linear-gradient($1);
190 | background-image:    -moz-linear-gradient($1);
191 | background-image:     -ms-linear-gradient($1);
192 | background-image:      -o-linear-gradient($1);
193 | background-image:         linear-gradient($1);
194 | ```
195 | 
196 | __hid__
197 | 
198 | ```CSS
199 | overflow: hidden;
200 | ```
201 | 
202 | __hov__
203 | 
204 | It is good (for accessibility reasons) to use the focus pseudo-class alongside the hover pseudo-class
205 | when defining styles for anchors, there is no need for :focus in most other cases.
206 | 
207 | ```CSS
208 | $1:hover,
209 | $1:focus {
210 |     $2
211 | }
212 | ```
213 | 
214 | __h__
215 | 
216 | My preference over rgba(), and I have written [an article][2] explaining why
217 | [2]: http://joshnh.com/2011/09/hsla-are-you-using-it-here-is-why-i-think-you-should-be/ "HSLA and You"
218 | 
219 | ```CSS
220 | hsla(${1:0},${2:0}%,${3:0}%,${4:1})
221 | ```
222 | 
223 | __hyp__
224 | 
225 | ```CSS
226 | -webkit-hyphens: auto;
227 |    -moz-hyphens: auto;
228 |     -ms-hyphens: auto;
229 |         hyphens: auto;
230 | ```
231 | 
232 | __inl__
233 | 
234 | Comment out the whitespace between elements in your markup if you need pixel perfect alignment
235 | (although pixel perfection is not realistic).
236 | 
237 | ```CSS
238 | display: inline-block;
239 | vertical-align: top;
240 | ${1:zoom: 1;${2: /* Fix for IE7 */}
241 | *display: inline;${2: /* Fix for IE7 */}}
242 | ```
243 | 
244 | __ita__
245 | 
246 | ```CSS
247 | font-style: italic;
248 | ```
249 | 
250 | __key__
251 | 
252 | This snippet makes good use of Sublime Text 2's multiple selection capabilites. If you lose the
253 | multiple selection, a quick way to regain it is to select 'keyframes', hit CMD+D (CTRL+D on Windows)
254 | four times, and then use the arrow keys to navigate. Continuing to tab will reduce the caret back
255 | down to a single selection, but you can also force it using ESC.
256 | 
257 | ```CSS
258 | @-webkit-keyframes $1 {
259 |     0% { $2 }
260 |     100% { $3 }
261 | }
262 | @-moz-keyframes $1 {
263 |     0% { $2 }
264 |     100% { $3 }
265 | }
266 | @-ms-keyframes $1 {
267 |     0% { $2 }
268 |     100% { $3 }
269 | }
270 | @-o-keyframes $1 {
271 |     0% { $2 }
272 |     100% { $3 }
273 | }
274 | @keyframes $1 {
275 |     0% { $2 }
276 |     100% { $3 }
277 | }
278 | ```
279 | 
280 | __lef__
281 | 
282 | ```CSS
283 | left: ${1:0};
284 | ```
285 | 
286 | __lin__
287 | 
288 | ```CSS
289 | line-height: ${1:1.5};
290 | ```
291 | 
292 | __mar__
293 | 
294 | ```CSS
295 | margin: ${1:0};
296 | ```
297 | 
298 | __med__
299 | 
300 | When designing with a focus on responsiveness, using min-width is recommended (it means that smaller
301 | devices, such as mobiles, aren't applying styles that aren't being used).
302 | 
303 | ```CSS
304 | @media (min-width: $1) {
305 |     $2
306 | }
307 | ```
308 | 
309 | __non__
310 | 
311 | ```CSS
312 | text-decoration: none;
313 | ```
314 | 
315 | __pad__
316 | 
317 | ```CSS
318 | padding: ${1:0};
319 | ```
320 | 
321 | __pla__
322 | 
323 | ```CSS
324 | -webkit-animation-play-state: ${1:running|paused};
325 |    -moz-animation-play-state: ${1:running|paused};
326 |     -ms-animation-play-state: ${1:running|paused};
327 |      -o-animation-play-state: ${1:running|paused};
328 |         animation-play-state: ${1:running|paused};
329 | ```
330 | 
331 | __r__
332 | 
333 | My preference is hsla(), and I have written [an article][2] explaining why.
334 | 
335 | ```CSS
336 | rgba(${1:0},${2:0},${3:0},${4:1})
337 | ```
338 | 
339 | __rel__
340 | 
341 | ```CSS
342 | position: relative;
343 | ```
344 | 
345 | __rig__
346 | 
347 | ```CSS
348 | right: ${1:0};
349 | ```
350 | 
351 | __san__
352 | 
353 | ```CSS
354 | font-family: ${1:<font-name>,} sans-serif;
355 | ```
356 | 
357 | __ser__
358 | 
359 | ```CSS
360 | font-family: ${1:<font-name>,} serif;
361 | ```
362 | 
363 | __sha__
364 | 
365 | ```CSS
366 | box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)};
367 | ```
368 | 
369 | __t__
370 | 
371 | ```CSS
372 | transparent
373 | ```
374 | 
375 | __tap__
376 | 
377 | This overrides the highlight color on iPhones/iPads.
378 | 
379 | ```CSS
380 | -webkit-tap-highlight-color: ${1:hsla(0,0%,0%,.5)};
381 |         tap-highlight-color: ${1:hsla(0,0%,0%,.5)};
382 | ```
383 | 
384 | __tex__
385 | 
386 | Use wisely, please keep readability in mind.
387 | 
388 | ```CSS
389 | text-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:hsla(0,0%,0%,.25)};
390 | ```
391 | 
392 | __top__
393 | 
394 | ```CSS
395 | top: ${1:0};
396 | ```
397 | 
398 | __transform__
399 | 
400 | This is too complex to write out all options.
401 | 
402 | ```CSS
403 | -webkit-transform: $1;
404 |    -moz-transform: $1;
405 |     -ms-transform: $1;
406 |      -o-transform: $1;
407 |         transform: $1;
408 | ```
409 | 
410 | __transition__
411 | 
412 | Transition shorthand: transition-propery transition-duration transition-timing-function
413 | transition-delay. The default values are: all 0 ease 0, this means that if you want to apply a
414 | transition to all properties, using the ease timing-function, you only need to declare the duration
415 | (e.g. transition: .5s;).
416 | 
417 | ```CSS
418 | -webkit-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
419 |    -moz-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
420 |     -ms-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
421 |      -o-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
422 |         transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
423 | ```
424 | 
425 | __upp__
426 | 
427 | ```CSS
428 | text-transform: uppercase;
429 | ```
430 | 
431 | __wra__
432 | 
433 | For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the
434 | 'overflow-wrap' property. However this syntax non-conforming in author style sheets.
435 | (http://www.w3.org/TR/css3-text/#overflow-wrap)
436 | 
437 | ```CSS
438 | overflow-wrap: break-word;
439 |     word-wrap: break-word;
440 | ```
441 | 


--------------------------------------------------------------------------------
/absolute.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |     <content><![CDATA[position: absolute;]]></content>
3 |     <tabTrigger>abs</tabTrigger>
4 |     <description>CSS - position: absolute;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/active.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[$1:active $2]]></content>
3 | 	<tabTrigger>act</tabTrigger>
4 |     <description>CSS - :active</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/after.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[$1:after {
 3 | 	content: '';
 4 | 	$2
 5 | }]]></content>
 6 | 	<tabTrigger>aft</tabTrigger>
 7 |     <description>CSS - :after</description>
 8 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/ampersand.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[.amp {
 3 |     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
 4 |     font-style: italic;
 5 |     font-weight: normal;
 6 | }]]></content>
 7 | 	<tabTrigger>amp</tabTrigger>
 8 |     <description>CSS - .amp {}</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/animation-fill-mode.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[-webkit-animation-fill-mode: ${1:none|forwards|backwards|both};
 3 |    -moz-animation-fill-mode: ${1:none|forwards|backwards|both};
 4 |     -ms-animation-fill-mode: ${1:none|forwards|backwards|both};
 5 |      -o-animation-fill-mode: ${1:none|forwards|backwards|both};
 6 |         animation-fill-mode: ${1:none|forwards|backwards|both};]]></content>
 7 | 	<tabTrigger>fil</tabTrigger>
 8 |     <description>CSS - animation-fill-mode: ;</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/animation-play-state.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[-webkit-animation-play-state: ${1:running|paused};
 3 |    -moz-animation-play-state: ${1:running|paused};
 4 |     -ms-animation-play-state: ${1:running|paused};
 5 |      -o-animation-play-state: ${1:running|paused};
 6 |         animation-play-state: ${1:running|paused};]]></content>
 7 | 	<tabTrigger>pla</tabTrigger>
 8 |     <description>CSS - animation-play-state: ;</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/animation.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[-webkit-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 3 |    -moz-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 4 |     -ms-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 5 |      -o-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
 6 |         animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};]]></content>
 7 | 	<tabTrigger>ani</tabTrigger>
 8 |     <description>CSS - animation: ;</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/auto.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[margin: ${1:0} auto;$2]]></content>
3 | 	<tabTrigger>aut</tabTrigger>
4 |     <description>CSS - margin: 0 auto;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/background.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |     <content><![CDATA[background: ${1:#fff} url('$2') ${3:0} ${4:0} ${5:repeat|repeat-x|repeat-y|no-repeat|inherit|round|space};]]></content>
3 |     <tabTrigger>bac</tabTrigger>
4 |     <description>CSS background: #fff url('') 0 0 repeat;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/before.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[$1:before {
 3 | 	content: '';
 4 | 	$2
 5 | }]]></content>
 6 | 	<tabTrigger>bef</tabTrigger>
 7 |     <description>CSS - :before</description>
 8 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/block.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[display: block;]]></content>
3 | 	<tabTrigger>blo</tabTrigger>
4 |     <description>CSS - display: block;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/bold.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[font-weight: bold;]]></content>
3 | 	<tabTrigger>bol</tabTrigger>
4 |     <description>CSS - font-weight: bold;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/border-radius.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[border-radius: $1;]]></content>
3 | 	<tabTrigger>bor</tabTrigger>
4 |     <description>CSS - border-radius: ;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/bottom.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[bottom: ${1:0};$2]]></content>
3 | 	<tabTrigger>bot</tabTrigger>
4 |     <description>CSS - bottom: 0;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/box-shadow.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)};]]></content>
3 | 	<tabTrigger>sha</tabTrigger>
4 |     <description>CSS - box-shadow: ;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/box-sizing.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[-webkit-box-sizing: border-box;
3 |    -moz-box-sizing: border-box;
4 |         box-sizing: border-box;]]></content>
5 | 	<tabTrigger>box</tabTrigger>
6 |     <description>CSS - box-sizing: border-box;</description>
7 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/center.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[text-align: center;]]></content>
3 | 	<tabTrigger>cen</tabTrigger>
4 |     <description>CSS - text-align: center;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/clearfix.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[.cf:after,
 3 | .cf:before {
 4 | 	content: '';
 5 | 	display: table;
 6 | }
 7 | .cf:after {
 8 | 	clear: both;
 9 | }
10 | .cf {
11 | 	zoom: 1;
12 | }]]></content>
13 | 	<tabTrigger>cf</tabTrigger>
14 |     <description>CSS - clearfix</description>
15 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
16 | </snippet>
17 | 


--------------------------------------------------------------------------------
/comment.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[/* $1 **************************************************/$2]]></content>
3 | 	<tabTrigger>`</tabTrigger>
4 |     <description>CSS - /* -----*/</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/content.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[content: '$1';$2]]></content>
3 | 	<tabTrigger>con</tabTrigger>
4 |     <description>CSS - content: '';</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/cursor.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[cursor: ${1:auto|crosshair|default|pointer|move|e-resize|ne-resize|-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress};]]></content>
3 | 	<tabTrigger>cur</tabTrigger>
4 |     <description>CSS - cursor: pointer;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/fixed.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[position: fixed;]]></content>
3 | 	<tabTrigger>fix</tabTrigger>
4 |     <description>CSS - position: fixed;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/font.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif};]]></content>
3 | 	<tabTrigger>fon</tabTrigger>
4 |     <description>CSS - font: 1em/1.5 sans-serif;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/hidden.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[overflow: hidden;]]></content>
3 | 	<tabTrigger>hid</tabTrigger>
4 |     <description>CSS - overflow: hidden;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/hover.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[$1:hover,
3 | $1:focus $2]]></content>
4 | 	<tabTrigger>hov</tabTrigger>
5 |     <description>CSS - :hover, :focus</description>
6 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/hsla.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[hsla(${1:0},${2:0}%,${3:0}%,${4:1})]]></content>
3 | 	<tabTrigger>h</tabTrigger>
4 |     <description>CSS - hsla()</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/hyphens.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[-webkit-hyphens: auto;
 3 |    -moz-hyphens: auto;
 4 |     -ms-hyphens: auto;
 5 |         hyphens: auto;]]></content>
 6 | 	<tabTrigger>hyp</tabTrigger>
 7 |     <description>CSS - hyphens: auto;</description>
 8 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/inline-block.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[display: inline-block;
 3 | vertical-align: top;
 4 | ${1:zoom: 1;${2: /* Fix for IE7 */}
 5 | *display: inline;${2: /* Fix for IE7 */}}$3]]></content>
 6 | 	<tabTrigger>inl</tabTrigger>
 7 |     <description>CSS - display: inline-block;</description>
 8 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/italic.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[font-style: italic;]]></content>
3 | 	<tabTrigger>ita</tabTrigger>
4 |     <description>CSS - font-style: italic;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/keyframes.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[@-webkit-keyframes $1 {
 3 | 	0% { $2 }
 4 | 	100% { $3 }
 5 | }
 6 | @-moz-keyframes $1 {
 7 | 	0% { $2 }
 8 | 	100% { $3 }
 9 | }
10 | @-ms-keyframes $1 {
11 | 	0% { $2 }
12 | 	100% { $3 }
13 | }
14 | @-o-keyframes $1 {
15 | 	0% { $2 }
16 | 	100% { $3 }
17 | }
18 | @keyframes $1 {
19 | 	0% { $2 }
20 | 	100% { $3 }
21 | }]]></content>
22 | 	<tabTrigger>key</tabTrigger>
23 |     <description>CSS - @keyframes {}</description>
24 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
25 | </snippet>
26 | 


--------------------------------------------------------------------------------
/left.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[left: ${1:0};$2]]></content>
3 | 	<tabTrigger>lef</tabTrigger>
4 |     <description>CSS - left: 0;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/line-height.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[line-height: ${1:1.5};$2]]></content>
3 | 	<tabTrigger>lin</tabTrigger>
4 |     <description>CSS - line-height: 1.5;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/linear-gradient.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[background-image: -webkit-linear-gradient(${1:top|left}, ${2:hsla(0,0%,100%,.1)}, ${3:hsla(0,0%,0%,.1)});
 3 | background-image:    -moz-linear-gradient(${1:top|left}, ${2:hsla(0,0%,100%,.1)}, ${3:hsla(0,0%,0%,.1)});
 4 | background-image:     -ms-linear-gradient(${1:top|left}, ${2:hsla(0,0%,100%,.1)}, ${3:hsla(0,0%,0%,.1)});
 5 | background-image:      -o-linear-gradient(${1:top|left}, ${2:hsla(0,0%,100%,.1)}, ${3:hsla(0,0%,0%,.1)});
 6 | background-image:         linear-gradient(${1:top|left}, ${2:hsla(0,0%,100%,.1)}, ${3:hsla(0,0%,0%,.1)});]]></content>
 7 | 	<tabTrigger>gra</tabTrigger>
 8 |     <description>CSS - background-image: linear-gradient();</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/margin.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[margin: ${1:0};$2]]></content>
3 | 	<tabTrigger>mar</tabTrigger>
4 |     <description>CSS - margin: 0;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/media.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[@media (min-width: $1) {
3 | 	$2
4 | }]]></content>
5 | 	<tabTrigger>med</tabTrigger>
6 |     <description>CSS - @media {}</description>
7 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/padding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[padding: ${1:0};$2]]></content>
3 | 	<tabTrigger>pad</tabTrigger>
4 |     <description>CSS - padding: 0;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/relative.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[position: relative;]]></content>
3 | 	<tabTrigger>rel</tabTrigger>
4 |     <description>CSS - position: relative;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/rgba.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[rgba(${1:0},${2:0},${3:0},${4:1})]]></content>
3 | 	<tabTrigger>r</tabTrigger>
4 |     <description>CSS - rgba()</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/right.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[right: ${1:0};$2]]></content>
3 | 	<tabTrigger>rig</tabTrigger>
4 |     <description>CSS - right: 0;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/sans-serif.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[font-family: ${1:<font-name>,} sans-serif;$2]]></content>
3 | 	<tabTrigger>san</tabTrigger>
4 |     <description>CSS - font-family: sans-serif;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/serif.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[font-family: ${1:<font-name>,} serif;$2]]></content>
3 | 	<tabTrigger>ser</tabTrigger>
4 |     <description>CSS - font-family: serif;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/tap-highlight-color.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[-webkit-tap-highlight-color: ${1:hsla(0,0%,0%,.5)};
3 |         tap-highlight-color: ${1:hsla(0,0%,0%,.5)};]]></content>
4 | 	<tabTrigger>tap</tabTrigger>
5 |     <description>CSS - tap-highlight-color: hsla(0,0%,0%,.5);</description>
6 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/text-decoration.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[text-decoration: none;]]></content>
3 | 	<tabTrigger>non</tabTrigger>
4 |     <description>CSS - text-decoration: none;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/text-shadow.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[text-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:hsla(0,0%,0%,.25)};]]></content>
3 | 	<tabTrigger>tex</tabTrigger>
4 |     <description>CSS - text-shadow: ;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/top.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[top: ${1:0};$2]]></content>
3 | 	<tabTrigger>top</tabTrigger>
4 |     <description>CSS - top: 0;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/transform.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[-webkit-transform: $1;
 3 |    -moz-transform: $1;
 4 |     -ms-transform: $1;
 5 |      -o-transform: $1;
 6 |         transform: $1;]]></content>
 7 | 	<tabTrigger>transform</tabTrigger>
 8 |     <description>CSS - transform: ;</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/transition.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[-webkit-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
 3 |    -moz-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
 4 |     -ms-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
 5 |      -o-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
 6 |         transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};]]></content>
 7 | 	<tabTrigger>transition</tabTrigger>
 8 |     <description>CSS - transition: ;</description>
 9 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/transparent.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[transparent]]></content>
3 | 	<tabTrigger>t</tabTrigger>
4 |     <description>CSS - hsla()</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/uppercase.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[text-transform: uppercase;]]></content>
3 | 	<tabTrigger>upp</tabTrigger>
4 |     <description>CSS - text-transform: uppercase;</description>
5 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/word-wrap.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[overflow-wrap: break-word;
3 | word-wrap: break-word;]]></content>
4 | 	<tabTrigger>wra</tabTrigger>
5 |     <description>CSS - word-wrap</description>
6 |     <scope>source.css, source.less, source.scss, source.stylus</scope>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------